Finish redesigning site

This commit is contained in:
2020-03-03 11:03:13 +00:00
parent b382db281c
commit 9e9f9f8c64
49 changed files with 1066 additions and 496 deletions

5
2018.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: BBC Young Reporter
description: News articles written by Reading School students in year 8
layout: year
---

37
2019.md
View File

@@ -1,40 +1,5 @@
--- ---
title: BBC Young Reporter title: BBC Young Reporter
description: News articles written by Reading School students in year 8 description: News articles written by Reading School students in year 8
layout: year-article-list layout: year
year: 2019
--- ---
{% if site.categories.articles %}
{% for article in site.categories.articles %}
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
| by {{ article.authors }}
</h3>
</div>
<div class="mdc-typography--body2">{{ article.description }}</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
</div>
</div>
</div>
<style>
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg");
}
</style>
{% endfor %}
{% else %}
<center>We haven't got any articles for you yet! Come back during this year's BBC Young Reporter day to see what Reading School's year 8 students have produced!</center>
<style>
center {
margin: 25vh auto 25vh auto;
}
</style>
{% endif %}

5
2020.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: BBC Young Reporter
description: News articles written by Reading School students in year 8
layout: year
---

View File

@@ -1,2 +1,3 @@
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>

View File

@@ -45,5 +45,4 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>

View File

@@ -2,7 +2,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{% include head.html %} {% include head.html %}
<link href="/css/mdc-card-list.css" rel="stylesheet"> <link href="/css/article-list.css" rel="stylesheet">
<link href="/css/home.css" rel="stylesheet"> <link href="/css/home.css" rel="stylesheet">
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->

View File

@@ -26,6 +26,7 @@
<div class="article-content"> <div class="article-content">
{{ content }} {{ content }}
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
{% include footer.html %} {% include footer.html %}

View File

@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
{% include head.html %} {% include head.html %}
<link href="/css/mdc-card-list.css" rel="stylesheet"> <link href="/css/article-list.css" rel="stylesheet">
<link href="/css/year-article-list.css" rel="stylesheet"> <link href="/css/year.css" rel="stylesheet">
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
{% include cookie-notice.html %} {% include cookie-notice.html %}
@@ -15,16 +15,18 @@
<main class="main-content" id="main-content"> <main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust"> <div class="mdc-top-app-bar--short-fixed-adjust">
<div class="article-section parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/{{ currentdate }}.jpg');"> {% assign pageyear = page.url | relative_url | remove: '.html' | remove: '/' %}
<div class="article-section-header"> <div class="year-header parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/{{ pageyear }}.jpg');">
<h1>{{ currentdate }}</h1> <h1 class="mdc-typography--headline1">{{ pageyear }}</h1>
<button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/{{ currentdate }}';">Read More <span class="material-icons">keyboard_arrow_right</span></button>
</div> </div>
<div class="splitter"></div>
<div class="article-section">
<div class="articles"> <div class="articles">
{% assign articles = site.categories.articles | sort: date | reverse %} {% assign articles = site.categories.articles | sort: date | reverse %}
{% for article in articles %} {% for article in articles %}
{% if article.date | date: "%Y" == page.year %} {% assign articleyear = article.date | date: "%Y" %}
<div class="mdc-card"> {% if pageyear == articleyear %}
<div class="mdc-card" onclick="window.location='{{ article.url | relative_url }}';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2> <h2 class="mdc-typography--headline6">{{ article.title }}</h2>

334
_site/2018.html Normal file
View File

@@ -0,0 +1,334 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<link rel="icon" href="/images/favicon.ico">
<!-- add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="/images/favicon.png">
<!-- add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="BBC Young Reporter | Reading School">
<link rel="apple-touch-icon-precomposed" href="/images/favicon.png">
<!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="/images/favicon.png">
<meta name="msapplication-TileColor" content="#d84315">
<title>BBC Young Reporter | Reading School</title>
<meta name="description" content="">
<!-- import Roboto (font) -->
<link href="/css/roboto.css" rel="stylesheet">
<!-- import jQuery -->
<script src="/js/jquery.min.js"></script>
<!-- import jQuery timeago -->
<script src="/js/jquery.timeago.min.js"></script>
<!-- import cookie JavaScript -->
<script src="/js/cookies.js"></script>
<!-- import Material Design components & icons -->
<link href="/css/material-components-web.min.css" rel="stylesheet">
<link href="/css/material_icons.css" rel="stylesheet">
<script src="/js/material-components-web.min.js"></script>
<!-- import Jarallax for parallax backgrounds -->
<script src="/js/jarallax.min.js"></script>
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
</head>
<link href="/css/article-list.css" rel="stylesheet">
<link href="/css/year.css" rel="stylesheet">
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
<p>Just to let you know, we use cookies on our site.</p>
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
</div>
<!-- content of navbar is included via jQuery -->
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__content">
<nav class="mdc-list">
<div style="margin: 15px;text-align:center;">
<img src="/images/logo-white.png" style="width: 90%;"/>
<img src="/images/young-reporter-logo.png" style="width: 90%;padding-top:15px;"/>
</div>
<a class="mdc-list-item" href="https://reading-school.co.uk" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">school</i>
<span class="mdc-list-item__text">Reading School Website</span>
</a>
<a class="mdc-list-item" href="/" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
<span class="mdc-list-item__text">Home Page</span>
</a>
<div class="mdc-list-group">
<h3 class="mdc-typography--headline7">Articles</h3>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">2020</h3>
<a class="mdc-list-item" href="/articles/2020/03/02/test2.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2020/03/02/test1.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2020/03/01/test.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Test</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">2019</h3>
<a class="mdc-list-item" href="/articles/2019/03/06/finished-product.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">The Finished Product</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/are-the-roads-around-your-home-and-school-safe.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Are The Roads Around Your Home And School Safe?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Book Week - Real Life Issues Inspire Sarah Govett</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/could-sky-high-aims-bring-reading-down.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Could Sky-High Aims Bring Reading Down?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Tennis Club Needs To Relocate As Redevelopment Plans Are Called Out</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Video Games - Virtual Fantasy Or A Virtual Prison?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/what-is-in-the-patients-best-interest.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">What Is 'In The Patient's Best Interest?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/whats-next-for-reading-prison.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">What's Next For Reading Prison?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/young-reporter-team-ready-to-go.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Reading School's BBC Young Reporter Team… Ready To Go!</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">2018</h3>
<a class="mdc-list-item" href="/articles/2018/03/06/test.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</span>
</a>
</div>
</div>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--short" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
<img src="/images/logo-white.png" alt="Reading School Logo" style="height:100%;"/>
</a>
</section>
</div>
</header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="year-header parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/2018.jpg');">
<h1 class="mdc-typography--headline1">2018</h1>
</div>
<div class="splitter"></div>
<div class="article-section">
<div class="articles">
<div class="mdc-card" onclick="window.location='/articles/2018/03/06/test.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2018-03-06-test.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-03-06T13:38:00">Tuesday 6 March 2018</time>
| by Luke H
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2018/03/06/test.html';">Read</button>
</div>
</div>
</div>
</div>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">
<footer>
<img>
<span >&copy; Matthew G 2020 | Made by <a href="https://mgrove.uk">Matthew G</a></span>
</footer>
</div>
</div>
</body>
</html>

View File

@@ -47,11 +47,10 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/mdc-card-list.css" rel="stylesheet"> <link href="/css/article-list.css" rel="stylesheet">
<link href="/css/year-article-list.css" rel="stylesheet"> <link href="/css/year.css" rel="stylesheet">
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
<div id="cookies"> <div id="cookies">
@@ -235,7 +234,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -248,35 +247,21 @@
<main class="main-content" id="main-content"> <main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust"> <div class="mdc-top-app-bar--short-fixed-adjust">
<div class="article-section parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/2018.jpg');">
<div class="article-section-header"> <div class="year-header parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/2019.jpg');">
<h1>2018</h1> <h1 class="mdc-typography--headline1">2019</h1>
<button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/2018';">Read More <span class="material-icons">keyboard_arrow_right</span></button>
</div> </div>
<div class="splitter"></div>
<div class="article-section">
<div class="articles"> <div class="articles">
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2018-03-06-test.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2018-03-06T13:38:00">Tuesday 6 March 2018</time>
| by Luke H
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2018/03/06/test.html';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/young-reporter-team-ready-to-go.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-young-reporter-team-ready-to-go.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-young-reporter-team-ready-to-go.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Reading School's BBC Young Reporter Team… Ready To Go!</h2> <h2 class="mdc-typography--headline6">Reading School's BBC Young Reporter Team… Ready To Go!</h2>
@@ -295,7 +280,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/whats-next-for-reading-prison.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-whats-next-for-reading-prison.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-whats-next-for-reading-prison.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">What's Next For Reading Prison?</h2> <h2 class="mdc-typography--headline6">What's Next For Reading Prison?</h2>
@@ -314,7 +300,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/what-is-in-the-patients-best-interest.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-what-is-in-the-patients-best-interest.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-what-is-in-the-patients-best-interest.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">What Is 'In The Patient's Best Interest?</h2> <h2 class="mdc-typography--headline6">What Is 'In The Patient's Best Interest?</h2>
@@ -333,7 +320,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Video Games - Virtual Fantasy Or A Virtual Prison?</h2> <h2 class="mdc-typography--headline6">Video Games - Virtual Fantasy Or A Virtual Prison?</h2>
@@ -352,7 +340,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Tennis Club Needs To Relocate As Redevelopment Plans Are Called Out</h2> <h2 class="mdc-typography--headline6">Tennis Club Needs To Relocate As Redevelopment Plans Are Called Out</h2>
@@ -371,7 +360,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/could-sky-high-aims-bring-reading-down.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-could-sky-high-aims-bring-reading-down.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-could-sky-high-aims-bring-reading-down.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Could Sky-High Aims Bring Reading Down?</h2> <h2 class="mdc-typography--headline6">Could Sky-High Aims Bring Reading Down?</h2>
@@ -390,7 +380,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</h2> <h2 class="mdc-typography--headline6">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</h2>
@@ -409,7 +400,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-book-week-real-life-issues-inspire-sarah-govett.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-book-week-real-life-issues-inspire-sarah-govett.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Book Week - Real Life Issues Inspire Sarah Govett</h2> <h2 class="mdc-typography--headline6">Book Week - Real Life Issues Inspire Sarah Govett</h2>
@@ -428,7 +420,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2> <h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2>
@@ -447,7 +440,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/are-the-roads-around-your-home-and-school-safe.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-are-the-roads-around-your-home-and-school-safe.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-are-the-roads-around-your-home-and-school-safe.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Are The Roads Around Your Home And School Safe?</h2> <h2 class="mdc-typography--headline6">Are The Roads Around Your Home And School Safe?</h2>
@@ -466,7 +460,8 @@
<div class="mdc-card">
<div class="mdc-card" onclick="window.location='/articles/2019/03/06/finished-product.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-finished-product.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-finished-product.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">The Finished Product</h2> <h2 class="mdc-typography--headline6">The Finished Product</h2>
@@ -485,60 +480,12 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-01-test.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Test</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2020-03-01T07:01:00">Sunday 1 March 2020</time>
| by Matthew G
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2020/03/01/test.html';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test1.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2020-03-02T07:01:00">Monday 2 March 2020</time>
| by Name
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2020/03/02/test1.html';">Read</button>
</div>
</div>
</div>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test2.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2020-03-02T07:02:00">Monday 2 March 2020</time>
| by Name
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2020/03/02/test2.html';">Read</button>
</div>
</div>
</div>
</div> </div>

368
_site/2020.html Normal file
View File

@@ -0,0 +1,368 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<link rel="icon" href="/images/favicon.ico">
<!-- add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="/images/favicon.png">
<!-- add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="BBC Young Reporter | Reading School">
<link rel="apple-touch-icon-precomposed" href="/images/favicon.png">
<!-- tile icon & colour for Windows 8 -->
<meta name="msapplication-TileImage" content="/images/favicon.png">
<meta name="msapplication-TileColor" content="#d84315">
<title>BBC Young Reporter | Reading School</title>
<meta name="description" content="">
<!-- import Roboto (font) -->
<link href="/css/roboto.css" rel="stylesheet">
<!-- import jQuery -->
<script src="/js/jquery.min.js"></script>
<!-- import jQuery timeago -->
<script src="/js/jquery.timeago.min.js"></script>
<!-- import cookie JavaScript -->
<script src="/js/cookies.js"></script>
<!-- import Material Design components & icons -->
<link href="/css/material-components-web.min.css" rel="stylesheet">
<link href="/css/material_icons.css" rel="stylesheet">
<script src="/js/material-components-web.min.js"></script>
<!-- import Jarallax for parallax backgrounds -->
<script src="/js/jarallax.min.js"></script>
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
</head>
<link href="/css/article-list.css" rel="stylesheet">
<link href="/css/year.css" rel="stylesheet">
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
<p>Just to let you know, we use cookies on our site.</p>
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
</div>
<!-- content of navbar is included via jQuery -->
<aside class="mdc-drawer mdc-drawer--modal">
<div class="mdc-drawer__content">
<nav class="mdc-list">
<div style="margin: 15px;text-align:center;">
<img src="/images/logo-white.png" style="width: 90%;"/>
<img src="/images/young-reporter-logo.png" style="width: 90%;padding-top:15px;"/>
</div>
<a class="mdc-list-item" href="https://reading-school.co.uk" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">school</i>
<span class="mdc-list-item__text">Reading School Website</span>
</a>
<a class="mdc-list-item" href="/" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">home</i>
<span class="mdc-list-item__text">Home Page</span>
</a>
<div class="mdc-list-group">
<h3 class="mdc-typography--headline7">Articles</h3>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">2020</h3>
<a class="mdc-list-item" href="/articles/2020/03/02/test2.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2020/03/02/test1.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Title</span>
</a>
<a class="mdc-list-item" href="/articles/2020/03/01/test.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Test</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">2019</h3>
<a class="mdc-list-item" href="/articles/2019/03/06/finished-product.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">The Finished Product</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/are-the-roads-around-your-home-and-school-safe.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Are The Roads Around Your Home And School Safe?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Book Week - Real Life Issues Inspire Sarah Govett</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/could-sky-high-aims-bring-reading-down.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Could Sky-High Aims Bring Reading Down?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Tennis Club Needs To Relocate As Redevelopment Plans Are Called Out</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Video Games - Virtual Fantasy Or A Virtual Prison?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/what-is-in-the-patients-best-interest.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">What Is 'In The Patient's Best Interest?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/whats-next-for-reading-prison.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">What's Next For Reading Prison?</span>
</a>
<a class="mdc-list-item" href="/articles/2019/03/06/young-reporter-team-ready-to-go.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">Reading School's BBC Young Reporter Team… Ready To Go!</span>
</a>
</div>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">2018</h3>
<a class="mdc-list-item" href="/articles/2018/03/06/test.html" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
<span class="mdc-list-item__text">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</span>
</a>
</div>
</div>
</nav>
</div>
</aside>
<div class="mdc-drawer-scrim"></div>
<div class="mdc-drawer-app-content">
<header class="mdc-top-app-bar mdc-top-app-bar--short" id="app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
<img src="/images/logo-white.png" alt="Reading School Logo" style="height:100%;"/>
</a>
</section>
</div>
</header>
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="year-header parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/2020.jpg');">
<h1 class="mdc-typography--headline1">2020</h1>
</div>
<div class="splitter"></div>
<div class="article-section">
<div class="articles">
<div class="mdc-card" onclick="window.location='/articles/2020/03/01/test.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-01-test.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Test</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2020-03-01T07:01:00">Sunday 1 March 2020</time>
| by Matthew G
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2020/03/01/test.html';">Read</button>
</div>
</div>
</div>
<div class="mdc-card" onclick="window.location='/articles/2020/03/02/test1.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test1.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2020-03-02T07:01:00">Monday 2 March 2020</time>
| by Name
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2020/03/02/test1.html';">Read</button>
</div>
</div>
</div>
<div class="mdc-card" onclick="window.location='/articles/2020/03/02/test2.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test2.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2020-03-02T07:02:00">Monday 2 March 2020</time>
| by Name
</h3>
</div>
<div class="mdc-typography--body2"></div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2020/03/02/test2.html';">Read</button>
</div>
</div>
</div>
</div>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">
<footer>
<img>
<span >&copy; Matthew G 2020 | Made by <a href="https://mgrove.uk">Matthew G</a></span>
</footer>
</div>
</div>
</body>
</html>

View File

@@ -47,7 +47,6 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<body> <body>
@@ -233,7 +232,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -276,6 +276,7 @@
<p>Caroline Norton, from the South London and Maudsley NHS Trusts Eating Disorder Service (and a former patient at the facility), recently stated that “our autistic patients can have one-to-one sessions”. This is to make the patients feel more comfortable and able to talk about any concerns about anorexia, without feeling like people will judge them for it.</p> <p>Caroline Norton, from the South London and Maudsley NHS Trusts Eating Disorder Service (and a former patient at the facility), recently stated that “our autistic patients can have one-to-one sessions”. This is to make the patients feel more comfortable and able to talk about any concerns about anorexia, without feeling like people will judge them for it.</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -276,6 +276,7 @@
<p>Caroline Norton, from the South London and Maudsley NHS Trusts Eating Disorder Service (and a former patient at the facility), recently stated that “our autistic patients can have one-to-one sessions”. This is to make the patients feel more comfortable and able to talk about any concerns about anorexia, without feeling like people will judge them for it.</p> <p>Caroline Norton, from the South London and Maudsley NHS Trusts Eating Disorder Service (and a former patient at the facility), recently stated that “our autistic patients can have one-to-one sessions”. This is to make the patients feel more comfortable and able to talk about any concerns about anorexia, without feeling like people will judge them for it.</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -288,6 +288,7 @@
</figure> </figure>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -283,6 +283,7 @@
<p>Ms Govett also revealed she was working on a new dystopian novel. It is set around the idea of a world where antibiotics do not work. This comes at a time when many bacteria are becoming immune to certain antibiotics due to their use in scenarios when they are not needed as can be seen in the recently launched campaign by the NHS to stop the overuse of antibiotics: Keep Antibiotics Working.</p> <p>Ms Govett also revealed she was working on a new dystopian novel. It is set around the idea of a world where antibiotics do not work. This comes at a time when many bacteria are becoming immune to certain antibiotics due to their use in scenarios when they are not needed as can be seen in the recently launched campaign by the NHS to stop the overuse of antibiotics: Keep Antibiotics Working.</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -288,6 +288,7 @@
<p>So, Reading needs to plan carefully and take action to respond to all the needs of its growing population, to keep it an attractive place to live and work and make sure its success doesnt become its downfall.</p> <p>So, Reading needs to plan carefully and take action to respond to all the needs of its growing population, to keep it an attractive place to live and work and make sure its success doesnt become its downfall.</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -263,6 +263,7 @@
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -281,6 +281,7 @@
</figure> </figure>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -302,6 +302,7 @@ Others objected to the planning application by expressing fears of the damaging
<p>The club is now preparing for the move which members hope will happen within the next few years. The club will move when new facilities are built at proposed site of Caversham Heath golf club, but the tennis club is still looking for a buyer for the current location within the next few months.</p> <p>The club is now preparing for the move which members hope will happen within the next few years. The club will move when new facilities are built at proposed site of Caversham Heath golf club, but the tennis club is still looking for a buyer for the current location within the next few months.</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -304,6 +304,7 @@ Well of course the most effective and most common method experienced by Reading
<p>The gamers I contacted said that there is a lack of awareness in the community on how to deal with these situations. Declan says: “awareness is not raised enough for young people to know what to do when they experience these situations.” Tom thinks that the un-educated should be told in PSHE lessons, or made aware of the problems: “This will encourage them to ask how they are able to address the problems themselves.” Reading School gamers, Xbox and Playstation alike, agreed that developers do try to raise awareness about in-game bullying but they do not do it enough.</p> <p>The gamers I contacted said that there is a lack of awareness in the community on how to deal with these situations. Declan says: “awareness is not raised enough for young people to know what to do when they experience these situations.” Tom thinks that the un-educated should be told in PSHE lessons, or made aware of the problems: “This will encourage them to ask how they are able to address the problems themselves.” Reading School gamers, Xbox and Playstation alike, agreed that developers do try to raise awareness about in-game bullying but they do not do it enough.</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -315,6 +315,7 @@ It is standard protocol in the NHS that doctors must consult with the patient an
<p>In their view, palliative care is a wonderful resource but cannot help in all situations. They also suggest that discussions on how assisted dying can be safely and comprehensively implemented into UK healthcare.</p> <p>In their view, palliative care is a wonderful resource but cannot help in all situations. They also suggest that discussions on how assisted dying can be safely and comprehensively implemented into UK healthcare.</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -309,6 +309,7 @@ Under the plan, the main theatre would operate on a commercial basis with the re
</figure> </figure>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -266,6 +266,7 @@
<p>Breaking news will appear here as it happens…</p> <p>Breaking news will appear here as it happens…</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -263,6 +263,7 @@
<p>Content</p> <p>Content</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -263,6 +263,7 @@
<p>Content</p> <p>Content</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/article-page.css" rel="stylesheet"> <link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script> <script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -263,6 +263,7 @@
<p>Content</p> <p>Content</p>
</div> </div>
<div class="splitter"></div>
</div> </div>
</main> </main>
<div class="footer-container"> <div class="footer-container">

View File

@@ -0,0 +1,51 @@
/* adjust header styling */
.article-section-header h1, .year-header h1 {
margin-block-start: 0;
margin-block-end: 0;
margin: 6px;
display: inline;
}
.article-section-header, .year-header {
background-color: rgba(24,26,27,0.5);
padding-top: 12px;
padding-bottom: 12px;
}
/* make cards display next to each other with correct dimensions and adjust styling */
.main-content .mdc-card {
display: inline-flex;
width: calc((100% / 3) - 18px);
box-shadow: none;
margin: 6px 6px 10px 6px;
background: none;
cursor: pointer;
}
/* style cards */
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0;
}
.mdc-card .mdc-typography--headline6 {
text-transform: capitalize;
}
/* change number of articles in each row depending on screen size */
@media screen and (max-width: 600px) {
.article-section .mdc-card {
width: calc((100% / 2) - 18px);
}
}
@media screen and (max-width: 350px) {
.article-section .mdc-card {
width: calc((100% / 1) - 18px);
}
}

View File

@@ -32,20 +32,17 @@
padding: 150px 15px; padding: 150px 15px;
} }
/* adjust video dimensions depending on screen size */ /* adjust video dimensions depending on screen size */
iframe { iframe {
width: 100%; width: 100%;
height: calc(68.8vw / 16 * 9); height: calc(68.8vw / 16 * 9);
} }
@media screen and (max-width: 1550px) { @media screen and (max-width: 1550px) {
iframe { iframe {
width: 100%; width: 100%;
height: calc(70vw / 16 * 9 - 6px); height: calc(70vw / 16 * 9 - 6px);
} }
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
iframe { iframe {
height: calc(90vw / 16 * 9 - 5px); height: calc(90vw / 16 * 9 - 5px);
@@ -55,14 +52,12 @@ iframe {
line-height: 2.625rem; line-height: 2.625rem;
} }
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.mdc-typography--headline3, .mdc-typography--headline5 { .mdc-typography--headline3, .mdc-typography--headline5 {
font-size: 2rem; font-size: 2rem;
line-height: 2.125rem; line-height: 2.125rem;
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
iframe { iframe {
height: calc(93.5vw / 16 * 9); height: calc(93.5vw / 16 * 9);

View File

@@ -4,15 +4,6 @@
--mdc-theme-secondary: #ea6343; --mdc-theme-secondary: #ea6343;
--mdc-theme-background: #181a1b; --mdc-theme-background: #181a1b;
} }
.mdc-top-app-bar--short-fixed-adjust {
padding-top: 41px;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
color: var(--mdc-theme-primary);
}
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
display: flex; display: flex;
@@ -29,7 +20,17 @@ body {
.mdc-drawer .mdc-list-group__subheader { .mdc-drawer .mdc-list-group__subheader {
color: #ccc; color: #ccc;
} }
.mdc-button:not(:disabled) {
color: var(--mdc-theme-secondary);
border-color: var(--mdc-theme-secondary);
}
.mdc-button::before, .mdc-button::after {
background-color: var(--mdc-theme-secondary);
}
a {
color: var(--mdc-theme-secondary);
}
/* navbar buttons */
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic { .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
color: var(--mdc-theme-secondary); color: var(--mdc-theme-secondary);
} }
@@ -37,33 +38,37 @@ body {
background-color: var(--mdc-theme-secondary); background-color: var(--mdc-theme-secondary);
} }
a { /* change cursor on top app bar */
color: var(--mdc-theme-secondary); .mdc-top-app-bar__title {
cursor: pointer;
} }
/* remove margin above main content */
.mdc-top-app-bar--short-fixed-adjust {
padding-top: 41px;
}
/* make content display properly */
.mdc-list-group h3 { .mdc-list-group h3 {
margin: 20px 16px auto 16px; margin: 20px 16px auto 16px;
font-weight: normal; font-weight: normal;
} }
.mdc-drawer-app-content { .mdc-drawer-app-content {
flex: auto; flex: auto;
overflow: auto; overflow: auto;
} }
.mdc-drawer { .mdc-drawer {
width: 350px; width: 350px;
} }
.main-content { .main-content {
margin: 15px 0; margin: 15px 0;
overflow: auto; overflow: auto;
} }
.app-bar { .app-bar {
position: absolute; position: absolute;
} }
/* footer */
.footer-container { .footer-container {
background: var(--mdc-theme-background); background: var(--mdc-theme-background);
padding: 5px 0; padding: 5px 0;
@@ -73,15 +78,6 @@ footer {
overflow: auto; overflow: auto;
} }
/* change button colours */
.mdc-button:not(:disabled) {
color: var(--mdc-theme-secondary);
border-color: var(--mdc-theme-secondary);
}
.mdc-button::before, .mdc-button::after {
background-color: var(--mdc-theme-secondary);
}
/* parallax backgrounds */ /* parallax backgrounds */
.parallax-section { .parallax-section {
position: relative; position: relative;
@@ -93,6 +89,15 @@ footer {
background-blend-mode: multiply; background-blend-mode: multiply;
} }
/* splitter for between sections */
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
}
/* responsive side margins */ /* responsive side margins */
.article-section .articles, .article-section-header, .footer-container, .article-content, .footer-container, .article-title-section ~ .mdc-typography--caption-text, .article-title-section, .mdc-typography--subtitle1, .mdc-typography--headline3 { .article-section .articles, .article-section-header, .footer-container, .article-content, .footer-container, .article-title-section ~ .mdc-typography--caption-text, .article-title-section, .mdc-typography--subtitle1, .mdc-typography--headline3 {
padding-left: 15%; padding-left: 15%;
@@ -116,7 +121,6 @@ footer span {
position: relative; position: relative;
top: 19px; top: 19px;
} }
footer img { footer img {
display: block; display: block;
width: 125px; width: 125px;
@@ -124,7 +128,6 @@ footer img {
content: url("/images/young-reporter-logo.png"); content: url("/images/young-reporter-logo.png");
vertical-align: middle; vertical-align: middle;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
footer { footer {
text-align: center; text-align: center;
@@ -141,7 +144,7 @@ footer img {
} }
} }
/* for cookie notice */ /* cookie notice */
#cookies { #cookies {
display: none; display: none;
width: 100%; width: 100%;
@@ -153,18 +156,15 @@ footer img {
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
#cookies p { #cookies p {
margin: 10px; margin: 10px;
} }
#cookies p a { #cookies p a {
color: var(--mdc-theme-secondary); color: var(--mdc-theme-secondary);
text-decoration: none; text-decoration: none;
} }
/* scroll-to-top button */
/* for scroll-to-top button */
.top-scroll-button { .top-scroll-button {
width: 50px; width: 50px;
height: 50px; height: 50px;
@@ -183,7 +183,6 @@ footer img {
-o-transition-duration: 0.25s; -o-transition-duration: 0.25s;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
.top-scroll-button img { .top-scroll-button img {
position: relative; position: relative;
top: 7px; top: 7px;
@@ -194,11 +193,9 @@ footer img {
-o-transition-duration: 0.25s; -o-transition-duration: 0.25s;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
.top-scroll-button:hover, .top-scroll-button:focus { .top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56; background-color: #1C2E56;
} }
.top-scroll-button:hover img { .top-scroll-button:hover img {
top: 3px; top: 3px;
} }

View File

@@ -1,23 +1,4 @@
.main-content .mdc-card { /* place button on right */
float: left;
width: calc((100% / 3) - 12px);
box-shadow: none;
}
.mdc-card {
margin: 6px 6px 10px 6px;
background: none;
}
.article-section-header {
background-color: rgba(24,26,27,0.5);
padding-top: 12px;
padding-bottom: 12px;
}
.article-section-header h1 {
margin-block-start: 0;
margin-block-end: 0;
margin: 6px;
display: inline;
}
.article-section-header button { .article-section-header button {
display: inline; display: inline;
padding: 5px 14px; padding: 5px 14px;
@@ -25,6 +6,8 @@
float: right; float: right;
top: 3.5px; top: 3.5px;
} }
/* animate button on hover */
.article-section-header button span { .article-section-header button span {
position: relative; position: relative;
left: 0; left: 0;
@@ -33,33 +16,28 @@
font-size: inherit; font-size: inherit;
} }
.article-section-header button:hover span { .article-section-header button:hover span {
left: 3px; left: 4px;
}
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
} }
/* alternate section backgrounds */
.article-section:nth-of-type(3n) { .article-section:nth-of-type(3n) {
background: var(--mdc-theme-background); background: var(--mdc-theme-background);
} }
.article-section:nth-of-type(3n) #jarallax-container-1 { .article-section:nth-of-type(3n) > div:nth-of-type(3), .article-section:nth-of-type(3n+2) > div:nth-of-type(3) {
display: none; display: none;
} }
.article-section:nth-of-type(3n+2) {
background: var(--mdc-theme-primary);
}
/* hide articles on smaller screen sizes */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.article-section .mdc-card:nth-of-type(3) { .article-section .mdc-card:nth-of-type(3) {
display: none; display: none;
} }
.article-section .mdc-card {
width: calc((100% / 2) - 12px);
}
} }
@media screen and (max-width: 350px) { @media screen and (max-width: 350px) {
.article-section .mdc-card:nth-of-type(2) { .article-section .mdc-card:nth-of-type(2) {
display: none; display: none;
} }
.article-section .mdc-card {
width: calc((100% / 1) - 12px);
}
} }

View File

@@ -1,16 +0,0 @@
/* make article cards look nice by altering margins */
.mdc-card {
margin: 2px 2px 10px 2px;
}
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0;
}
.mdc-card .mdc-typography--headline6 {
text-transform: capitalize;
}

View File

@@ -1,63 +0,0 @@
/* automatically display articles on either side of the page, alternating */
.main-content .mdc-card {
float: right;
clear: right;
width: calc(50% - 6px);
}
.main-content .mdc-card:nth-of-type(even) {
float: left;
clear: left;
}
/* make first article full-width */
.main-content .mdc-card:first-of-type {
float: none;
clear: both;
width: auto;
}
/* makes last article full-width if it is on its own in a row - i.e. if there is an even number of articles in total */
.main-content .mdc-card:nth-of-type(odd):nth-last-of-type(2) ~ .mdc-card:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 1 article present */
.main-content .mdc-card:first-of-type:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 2 articles present & small screen is detected */
@media screen and (max-width: 1000px) {
.main-content .mdc-card:nth-child(1):nth-last-of-type(2), .main-content .mdc-card:nth-of-type(2):last-of-type {
float: none;
clear: both;
width: auto;
}
}
/* styling for when 3 articles present */
.main-content .mdc-card:first-of-type:nth-last-of-type(3) {
float: none;
clear: both;
width: auto;
}
.main-content .mdc-card:nth-of-type(3):last-of-type {
float: right;
clear: right;
}
.main-content .mdc-card:nth-of-type(2):nth-last-of-type(2) {
float: left;
clear: left;
}

12
_site/css/year.css Normal file
View File

@@ -0,0 +1,12 @@
/* position heading in middle of image */
.parallax-section {
text-align: center;
vertical-align: middle;
padding: 150px 15px;
}
/* list of articles */
.articles {
background-color: var(--mdc-theme-background);
padding-top: 12px;
padding-bottom: 12px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 KiB

View File

@@ -47,10 +47,9 @@
<!-- import local styling & scripts --> <!-- import local styling & scripts -->
<script src="/js/global.js"></script> <script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet"> <link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head> </head>
<link href="/css/mdc-card-list.css" rel="stylesheet"> <link href="/css/article-list.css" rel="stylesheet">
<link href="/css/home.css" rel="stylesheet"> <link href="/css/home.css" rel="stylesheet">
<body> <body>
<!-- cookie notice is included automatically --> <!-- cookie notice is included automatically -->
@@ -235,7 +234,7 @@
<div class="mdc-top-app-bar__row"> <div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <a href="javascript:void(0);" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">BBC Young Reporter | Reading School</span> <span class="mdc-top-app-bar__title" onclick="window.location='/';">BBC Young Reporter | Reading School</span>
</section> </section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;"> <a href="/" class="mdc-top-app-bar__action-item" aria-label="Reading School" style="padding:0;">
@@ -251,15 +250,15 @@
<div class="article-section parallax-section" data-jarallax="" data-speed="0.4" style="background-image: url('/images/backgrounds/2020.jpg');"> <div class="article-section parallax-section" data-jarallax="" data-speed="0.4" style="background-image: url('/images/backgrounds/2020.jpg');">
<div class="article-section-header"> <div class="article-section-header">
<h1>2020</h1> <h1 class="mdc-typography--headline4">2020</h1>
<button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/2020';">Read More <span class="material-icons">keyboard_arrow_right</span></button> <button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/2020';">See All <span class="material-icons">keyboard_arrow_right</span></button>
</div> </div>
<div class="articles"> <div class="articles">
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='/articles/2020/03/02/test2.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test2.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test2.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2> <h2 class="mdc-typography--headline6">Title</h2>
@@ -283,7 +282,7 @@
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='/articles/2020/03/02/test1.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test1.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-02-test1.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2> <h2 class="mdc-typography--headline6">Title</h2>
@@ -307,7 +306,7 @@
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='/articles/2020/03/01/test.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-01-test.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2020-03-01-test.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Test</h2> <h2 class="mdc-typography--headline6">Test</h2>
@@ -337,15 +336,15 @@
<div class="article-section parallax-section" data-jarallax="" data-speed="0.4" style="background-image: url('/images/backgrounds/2019.jpg');"> <div class="article-section parallax-section" data-jarallax="" data-speed="0.4" style="background-image: url('/images/backgrounds/2019.jpg');">
<div class="article-section-header"> <div class="article-section-header">
<h1>2019</h1> <h1 class="mdc-typography--headline4">2019</h1>
<button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/2019';">Read More <span class="material-icons">keyboard_arrow_right</span></button> <button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/2019';">See All <span class="material-icons">keyboard_arrow_right</span></button>
</div> </div>
<div class="articles"> <div class="articles">
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='/articles/2019/03/06/finished-product.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-finished-product.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-finished-product.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">The Finished Product</h2> <h2 class="mdc-typography--headline6">The Finished Product</h2>
@@ -369,7 +368,7 @@
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='/articles/2019/03/06/are-the-roads-around-your-home-and-school-safe.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-are-the-roads-around-your-home-and-school-safe.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-are-the-roads-around-your-home-and-school-safe.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Are The Roads Around Your Home And School Safe?</h2> <h2 class="mdc-typography--headline6">Are The Roads Around Your Home And School Safe?</h2>
@@ -393,7 +392,7 @@
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2> <h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2>
@@ -471,15 +470,15 @@
<div class="article-section parallax-section" data-jarallax="" data-speed="0.4" style="background-image: url('/images/backgrounds/2018.jpg');"> <div class="article-section parallax-section" data-jarallax="" data-speed="0.4" style="background-image: url('/images/backgrounds/2018.jpg');">
<div class="article-section-header"> <div class="article-section-header">
<h1>2018</h1> <h1 class="mdc-typography--headline4">2018</h1>
<button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/2018';">Read More <span class="material-icons">keyboard_arrow_right</span></button> <button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/2018';">See All <span class="material-icons">keyboard_arrow_right</span></button>
</div> </div>
<div class="articles"> <div class="articles">
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='/articles/2018/03/06/test.html';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2018-03-06-test.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/2018-03-06-test.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</h2> <h2 class="mdc-typography--headline6">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</h2>

View File

@@ -3,6 +3,17 @@
<url>
<loc>/2018.html</loc>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url> <url>
<loc>/2019.html</loc> <loc>/2019.html</loc>
<lastmod>2020-03-03</lastmod> <lastmod>2020-03-03</lastmod>
@@ -14,6 +25,17 @@
<url>
<loc>/2020.html</loc>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url> <url>
<loc>/404.html</loc> <loc>/404.html</loc>
<lastmod>2020-03-03</lastmod> <lastmod>2020-03-03</lastmod>

51
css/article-list.css Normal file
View File

@@ -0,0 +1,51 @@
/* adjust header styling */
.article-section-header h1, .year-header h1 {
margin-block-start: 0;
margin-block-end: 0;
margin: 6px;
display: inline;
}
.article-section-header, .year-header {
background-color: rgba(24,26,27,0.5);
padding-top: 12px;
padding-bottom: 12px;
}
/* make cards display next to each other with correct dimensions and adjust styling */
.main-content .mdc-card {
display: inline-flex;
width: calc((100% / 3) - 18px);
box-shadow: none;
margin: 6px 6px 10px 6px;
background: none;
cursor: pointer;
}
/* style cards */
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0;
}
.mdc-card .mdc-typography--headline6 {
text-transform: capitalize;
}
/* change number of articles in each row depending on screen size */
@media screen and (max-width: 600px) {
.article-section .mdc-card {
width: calc((100% / 2) - 18px);
}
}
@media screen and (max-width: 350px) {
.article-section .mdc-card {
width: calc((100% / 1) - 18px);
}
}

View File

@@ -32,20 +32,17 @@
padding: 150px 15px; padding: 150px 15px;
} }
/* adjust video dimensions depending on screen size */ /* adjust video dimensions depending on screen size */
iframe { iframe {
width: 100%; width: 100%;
height: calc(68.8vw / 16 * 9); height: calc(68.8vw / 16 * 9);
} }
@media screen and (max-width: 1550px) { @media screen and (max-width: 1550px) {
iframe { iframe {
width: 100%; width: 100%;
height: calc(70vw / 16 * 9 - 6px); height: calc(70vw / 16 * 9 - 6px);
} }
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
iframe { iframe {
height: calc(90vw / 16 * 9 - 5px); height: calc(90vw / 16 * 9 - 5px);
@@ -55,14 +52,12 @@ iframe {
line-height: 2.625rem; line-height: 2.625rem;
} }
} }
@media screen and (max-width: 400px) { @media screen and (max-width: 400px) {
.mdc-typography--headline3, .mdc-typography--headline5 { .mdc-typography--headline3, .mdc-typography--headline5 {
font-size: 2rem; font-size: 2rem;
line-height: 2.125rem; line-height: 2.125rem;
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
iframe { iframe {
height: calc(93.5vw / 16 * 9); height: calc(93.5vw / 16 * 9);

View File

@@ -4,15 +4,6 @@
--mdc-theme-secondary: #ea6343; --mdc-theme-secondary: #ea6343;
--mdc-theme-background: #181a1b; --mdc-theme-background: #181a1b;
} }
.mdc-top-app-bar--short-fixed-adjust {
padding-top: 41px;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
color: var(--mdc-theme-primary);
}
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
display: flex; display: flex;
@@ -29,7 +20,17 @@ body {
.mdc-drawer .mdc-list-group__subheader { .mdc-drawer .mdc-list-group__subheader {
color: #ccc; color: #ccc;
} }
.mdc-button:not(:disabled) {
color: var(--mdc-theme-secondary);
border-color: var(--mdc-theme-secondary);
}
.mdc-button::before, .mdc-button::after {
background-color: var(--mdc-theme-secondary);
}
a {
color: var(--mdc-theme-secondary);
}
/* navbar buttons */
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic { .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
color: var(--mdc-theme-secondary); color: var(--mdc-theme-secondary);
} }
@@ -37,33 +38,37 @@ body {
background-color: var(--mdc-theme-secondary); background-color: var(--mdc-theme-secondary);
} }
a { /* change cursor on top app bar */
color: var(--mdc-theme-secondary); .mdc-top-app-bar__title {
cursor: pointer;
} }
/* remove margin above main content */
.mdc-top-app-bar--short-fixed-adjust {
padding-top: 41px;
}
/* make content display properly */
.mdc-list-group h3 { .mdc-list-group h3 {
margin: 20px 16px auto 16px; margin: 20px 16px auto 16px;
font-weight: normal; font-weight: normal;
} }
.mdc-drawer-app-content { .mdc-drawer-app-content {
flex: auto; flex: auto;
overflow: auto; overflow: auto;
} }
.mdc-drawer { .mdc-drawer {
width: 350px; width: 350px;
} }
.main-content { .main-content {
margin: 15px 0; margin: 15px 0;
overflow: auto; overflow: auto;
} }
.app-bar { .app-bar {
position: absolute; position: absolute;
} }
/* footer */
.footer-container { .footer-container {
background: var(--mdc-theme-background); background: var(--mdc-theme-background);
padding: 5px 0; padding: 5px 0;
@@ -73,15 +78,6 @@ footer {
overflow: auto; overflow: auto;
} }
/* change button colours */
.mdc-button:not(:disabled) {
color: var(--mdc-theme-secondary);
border-color: var(--mdc-theme-secondary);
}
.mdc-button::before, .mdc-button::after {
background-color: var(--mdc-theme-secondary);
}
/* parallax backgrounds */ /* parallax backgrounds */
.parallax-section { .parallax-section {
position: relative; position: relative;
@@ -93,6 +89,15 @@ footer {
background-blend-mode: multiply; background-blend-mode: multiply;
} }
/* splitter for between sections */
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
}
/* responsive side margins */ /* responsive side margins */
.article-section .articles, .article-section-header, .footer-container, .article-content, .footer-container, .article-title-section ~ .mdc-typography--caption-text, .article-title-section, .mdc-typography--subtitle1, .mdc-typography--headline3 { .article-section .articles, .article-section-header, .footer-container, .article-content, .footer-container, .article-title-section ~ .mdc-typography--caption-text, .article-title-section, .mdc-typography--subtitle1, .mdc-typography--headline3 {
padding-left: 15%; padding-left: 15%;
@@ -116,7 +121,6 @@ footer span {
position: relative; position: relative;
top: 19px; top: 19px;
} }
footer img { footer img {
display: block; display: block;
width: 125px; width: 125px;
@@ -124,7 +128,6 @@ footer img {
content: url("/images/young-reporter-logo.png"); content: url("/images/young-reporter-logo.png");
vertical-align: middle; vertical-align: middle;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
footer { footer {
text-align: center; text-align: center;
@@ -141,7 +144,7 @@ footer img {
} }
} }
/* for cookie notice */ /* cookie notice */
#cookies { #cookies {
display: none; display: none;
width: 100%; width: 100%;
@@ -153,18 +156,15 @@ footer img {
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
#cookies p { #cookies p {
margin: 10px; margin: 10px;
} }
#cookies p a { #cookies p a {
color: var(--mdc-theme-secondary); color: var(--mdc-theme-secondary);
text-decoration: none; text-decoration: none;
} }
/* scroll-to-top button */
/* for scroll-to-top button */
.top-scroll-button { .top-scroll-button {
width: 50px; width: 50px;
height: 50px; height: 50px;
@@ -183,7 +183,6 @@ footer img {
-o-transition-duration: 0.25s; -o-transition-duration: 0.25s;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
.top-scroll-button img { .top-scroll-button img {
position: relative; position: relative;
top: 7px; top: 7px;
@@ -194,11 +193,9 @@ footer img {
-o-transition-duration: 0.25s; -o-transition-duration: 0.25s;
transition-duration: 0.25s; transition-duration: 0.25s;
} }
.top-scroll-button:hover, .top-scroll-button:focus { .top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56; background-color: #1C2E56;
} }
.top-scroll-button:hover img { .top-scroll-button:hover img {
top: 3px; top: 3px;
} }

View File

@@ -1,23 +1,4 @@
.main-content .mdc-card { /* place button on right */
float: left;
width: calc((100% / 3) - 12px);
box-shadow: none;
}
.mdc-card {
margin: 6px 6px 10px 6px;
background: none;
}
.article-section-header {
background-color: rgba(24,26,27,0.5);
padding-top: 12px;
padding-bottom: 12px;
}
.article-section-header h1 {
margin-block-start: 0;
margin-block-end: 0;
margin: 6px;
display: inline;
}
.article-section-header button { .article-section-header button {
display: inline; display: inline;
padding: 5px 14px; padding: 5px 14px;
@@ -25,6 +6,8 @@
float: right; float: right;
top: 3.5px; top: 3.5px;
} }
/* animate button on hover */
.article-section-header button span { .article-section-header button span {
position: relative; position: relative;
left: 0; left: 0;
@@ -33,33 +16,28 @@
font-size: inherit; font-size: inherit;
} }
.article-section-header button:hover span { .article-section-header button:hover span {
left: 3px; left: 4px;
}
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
} }
/* alternate section backgrounds */
.article-section:nth-of-type(3n) { .article-section:nth-of-type(3n) {
background: var(--mdc-theme-background); background: var(--mdc-theme-background);
} }
.article-section:nth-of-type(3n) #jarallax-container-1 { .article-section:nth-of-type(3n) > div:nth-of-type(3), .article-section:nth-of-type(3n+2) > div:nth-of-type(3) {
display: none; display: none;
} }
.article-section:nth-of-type(3n+2) {
background: var(--mdc-theme-primary);
}
/* hide articles on smaller screen sizes */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.article-section .mdc-card:nth-of-type(3) { .article-section .mdc-card:nth-of-type(3) {
display: none; display: none;
} }
.article-section .mdc-card {
width: calc((100% / 2) - 12px);
}
} }
@media screen and (max-width: 350px) { @media screen and (max-width: 350px) {
.article-section .mdc-card:nth-of-type(2) { .article-section .mdc-card:nth-of-type(2) {
display: none; display: none;
} }
.article-section .mdc-card {
width: calc((100% / 1) - 12px);
}
} }

View File

@@ -1,16 +0,0 @@
/* make article cards look nice by altering margins */
.mdc-card {
margin: 2px 2px 10px 2px;
}
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0;
}
.mdc-card .mdc-typography--headline6 {
text-transform: capitalize;
}

View File

@@ -1,63 +0,0 @@
/* automatically display articles on either side of the page, alternating */
.main-content .mdc-card {
float: right;
clear: right;
width: calc(50% - 6px);
}
.main-content .mdc-card:nth-of-type(even) {
float: left;
clear: left;
}
/* make first article full-width */
.main-content .mdc-card:first-of-type {
float: none;
clear: both;
width: auto;
}
/* makes last article full-width if it is on its own in a row - i.e. if there is an even number of articles in total */
.main-content .mdc-card:nth-of-type(odd):nth-last-of-type(2) ~ .mdc-card:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 1 article present */
.main-content .mdc-card:first-of-type:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 2 articles present & small screen is detected */
@media screen and (max-width: 1000px) {
.main-content .mdc-card:nth-child(1):nth-last-of-type(2), .main-content .mdc-card:nth-of-type(2):last-of-type {
float: none;
clear: both;
width: auto;
}
}
/* styling for when 3 articles present */
.main-content .mdc-card:first-of-type:nth-last-of-type(3) {
float: none;
clear: both;
width: auto;
}
.main-content .mdc-card:nth-of-type(3):last-of-type {
float: right;
clear: right;
}
.main-content .mdc-card:nth-of-type(2):nth-last-of-type(2) {
float: left;
clear: left;
}

12
css/year.css Normal file
View File

@@ -0,0 +1,12 @@
/* position heading in middle of image */
.parallax-section {
text-align: center;
vertical-align: middle;
padding: 150px 15px;
}
/* list of articles */
.articles {
background-color: var(--mdc-theme-background);
padding-top: 12px;
padding-bottom: 12px;
}

BIN
images/backgrounds/2018.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 KiB

View File

@@ -18,15 +18,15 @@ layout: home
{% endif %} {% endif %}
<div class="article-section parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/{{ currentdate }}.jpg');"> <div class="article-section parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/{{ currentdate }}.jpg');">
<div class="article-section-header"> <div class="article-section-header">
<h1>{{ currentdate }}</h1> <h1 class="mdc-typography--headline4">{{ currentdate }}</h1>
<button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/{{ currentdate }}';">Read More <span class="material-icons">keyboard_arrow_right</span></button> <button class="mdc-button " data-mdc-auto-init="MDCRipple" onclick="window.location='/{{ currentdate }}';">See All <span class="material-icons">keyboard_arrow_right</span></button>
</div> </div>
<div class="articles"> <div class="articles">
{% assign date = currentdate %} {% assign date = currentdate %}
{% endif %} {% endif %}
{% if currentdate_count < 3 %} {% if currentdate_count < 3 %}
{% assign currentdate_count = currentdate_count | plus: 1 %} {% assign currentdate_count = currentdate_count | plus: 1 %}
<div class="mdc-card"> <div class="mdc-card" onclick="window.location='{{ article.url | relative_url }}';">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url('/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2> <h2 class="mdc-typography--headline6">{{ article.title }}</h2>