me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish redesigning site

Browse Source
This commit is contained in:
Matthew Grove
2020-03-03 11:03:13 +00:00
parent b382db281c
commit 9e9f9f8c64
49 changed files with 1066 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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
description: News articles written by Reading School students in year 8
layout: year-article-list
year: 2019
layout: year
---
{% 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
---

1
_includes/article-page-head.html
View File

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

1
_includes/head.html
View File

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

2
_includes/top-app-bar.html
View File

@@ -2,7 +2,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">

2
_layouts/home.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<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">
<body>
<!-- cookie notice is included automatically -->

1
_layouts/image-article.html
View File

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

18
_layouts/year-article-list.html → _layouts/year.html
View File

@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<link href="/css/mdc-card-list.css" rel="stylesheet">
<link href="/css/year-article-list.css" rel="stylesheet">
<link href="/css/article-list.css" rel="stylesheet">
<link href="/css/year.css" rel="stylesheet">
<body>
<!-- cookie notice is included automatically -->
{% include cookie-notice.html %}
@@ -15,16 +15,18 @@
<main class="main-content" id="main-content">
<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');">
<div class="article-section-header">
<h1>{{ 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>
{% assign pageyear = page.url | relative_url | remove: '.html' | remove: '/' %}
<div class="year-header parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/{{ pageyear }}.jpg');">
<h1 class="mdc-typography--headline1">{{ pageyear }}</h1>
</div>
<div class="splitter"></div>
<div class="article-section">
<div class="articles">
{% assign articles = site.categories.articles | sort: date | reverse %}
{% for article in articles %}
{% if article.date | date: "%Y" == page.year %}
<div class="mdc-card">
{% assign articleyear = article.date | date: "%Y" %}
{% 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-content">
<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>

113
_site/2019.html
View File

@@ -47,11 +47,10 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/mdc-card-list.css" rel="stylesheet">
<link href="/css/year-article-list.css" rel="stylesheet">
<link href="/css/article-list.css" rel="stylesheet">
<link href="/css/year.css" rel="stylesheet">
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
@@ -235,7 +234,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -248,35 +247,21 @@
<main class="main-content" id="main-content">
<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">
<h1>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>
<div class="year-header parallax-section" data-jarallax data-speed="0.4" style="background-image: url('/images/backgrounds/2019.jpg');">
<h1 class="mdc-typography--headline1">2019</h1>
</div>
<div class="splitter"></div>
<div class="article-section">
<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-content">
<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-content">
<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-content">
<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-content">
<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-content">
<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-content">
<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-content">
<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-content">
<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-content">
<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-content">
<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-content">
<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>

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>

3
_site/404.html
View File

@@ -47,7 +47,6 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<body>
@@ -233,7 +232,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">

5
_site/articles/2018/03/06/test.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -276,6 +276,7 @@
<p>Caroline Norton, from the South London and Maudsley NHS Trust’s 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 class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -276,6 +276,7 @@
<p>Caroline Norton, from the South London and Maudsley NHS Trust’s 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 class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/are-the-roads-around-your-home-and-school-safe.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -288,6 +288,7 @@
</figure>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -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>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/could-sky-high-aims-bring-reading-down.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -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 doesn’t become its downfall.</p>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/finished-product.html
View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -263,6 +263,7 @@
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -281,6 +281,7 @@
</figure>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -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>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -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>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/what-is-in-the-patients-best-interest.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -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>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/whats-next-for-reading-prison.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -309,6 +309,7 @@ Under the plan, the main theatre would operate on a commercial basis with the re
</figure>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2019/03/06/young-reporter-team-ready-to-go.html
View File

@@ -49,11 +49,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -238,7 +238,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -266,6 +266,7 @@
<p>Breaking news will appear here as it happens…</p>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2020/03/01/test.html
View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -263,6 +263,7 @@
<p>Content</p>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2020/03/02/test1.html
View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -263,6 +263,7 @@
<p>Content</p>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

5
_site/articles/2020/03/02/test2.html
View File

@@ -48,11 +48,11 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
@@ -237,7 +237,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -263,6 +263,7 @@
<p>Content</p>
</div>
<div class="splitter"></div>
</div>
</main>
<div class="footer-container">

51
_site/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);
}
}

5
_site/css/article-page.css
View File

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

67
_site/css/global.css
View File

@@ -4,15 +4,6 @@
--mdc-theme-secondary: #ea6343;
--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 {
font-family: 'Roboto', sans-serif;
display: flex;
@@ -29,7 +20,17 @@ body {
.mdc-drawer .mdc-list-group__subheader {
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 {
color: var(--mdc-theme-secondary);
}
@@ -37,33 +38,37 @@ body {
background-color: var(--mdc-theme-secondary);
}
a {
color: var(--mdc-theme-secondary);
/* change cursor on top app bar */
.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 {
margin: 20px 16px auto 16px;
font-weight: normal;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
}
.mdc-drawer {
width: 350px;
}
.main-content {
margin: 15px 0;
overflow: auto;
}
.app-bar {
position: absolute;
}
/* footer */
.footer-container {
background: var(--mdc-theme-background);
padding: 5px 0;
@@ -73,15 +78,6 @@ footer {
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-section {
position: relative;
@@ -93,6 +89,15 @@ footer {
background-blend-mode: multiply;
}
/* splitter for between sections */
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
}
/* 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 {
padding-left: 15%;
@@ -116,7 +121,6 @@ footer span {
position: relative;
top: 19px;
}
footer img {
display: block;
width: 125px;
@@ -124,7 +128,6 @@ footer img {
content: url("/images/young-reporter-logo.png");
vertical-align: middle;
}
@media screen and (max-width: 800px) {
footer {
text-align: center;
@@ -141,7 +144,7 @@ footer img {
}
}
/* for cookie notice */
/* cookie notice */
#cookies {
display: none;
width: 100%;
@@ -153,18 +156,15 @@ footer img {
left: 0;
z-index: 1;
}
#cookies p {
margin: 10px;
}
#cookies p a {
color: var(--mdc-theme-secondary);
text-decoration: none;
}
/* for scroll-to-top button */
/* scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
@@ -183,7 +183,6 @@ footer img {
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button img {
position: relative;
top: 7px;
@@ -194,11 +193,9 @@ footer img {
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56;
}
.top-scroll-button:hover img {
top: 3px;
}

44
_site/css/home.css
View File

@@ -1,23 +1,4 @@
.main-content .mdc-card {
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;
}
/* place button on right */
.article-section-header button {
display: inline;
padding: 5px 14px;
@@ -25,6 +6,8 @@
float: right;
top: 3.5px;
}
/* animate button on hover */
.article-section-header button span {
position: relative;
left: 0;
@@ -33,33 +16,28 @@
font-size: inherit;
}
.article-section-header button:hover span {
left: 3px;
}
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
left: 4px;
}
/* alternate section backgrounds */
.article-section:nth-of-type(3n) {
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;
}
.article-section:nth-of-type(3n+2) {
background: var(--mdc-theme-primary);
}
/* hide articles on smaller screen sizes */
@media screen and (max-width: 600px) {
.article-section .mdc-card:nth-of-type(3) {
display: none;
}
.article-section .mdc-card {
width: calc((100% / 2) - 12px);
}
}
@media screen and (max-width: 350px) {
.article-section .mdc-card:nth-of-type(2) {
display: none;
}
.article-section .mdc-card {
width: calc((100% / 1) - 12px);
}
}

16
_site/css/mdc-card-list.css
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;
}

63
_site/css/year-article-list.css
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;
}

BIN
_site/images/backgrounds/2018.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

31
_site/index.html
View File

@@ -47,10 +47,9 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</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">
<body>
<!-- cookie notice is included automatically -->
@@ -235,7 +234,7 @@
<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">BBC Young Reporter | Reading School</span>
<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;">
@@ -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-header">
<h1>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>
<h1 class="mdc-typography--headline4">2020</h1>
<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 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-content">
<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-content">
<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-content">
<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-header">
<h1>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>
<h1 class="mdc-typography--headline4">2019</h1>
<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 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-content">
<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-content">
<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-content">
<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-header">
<h1>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>
<h1 class="mdc-typography--headline4">2018</h1>
<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 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-content">
<h2 class="mdc-typography--headline6">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</h2>

22
_site/sitemap.xml
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>
<loc>/2019.html</loc>
<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>
<loc>/404.html</loc>
<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);
}
}

5
css/article-page.css
View File

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

67
css/global.css
View File

@@ -4,15 +4,6 @@
--mdc-theme-secondary: #ea6343;
--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 {
font-family: 'Roboto', sans-serif;
display: flex;
@@ -29,7 +20,17 @@ body {
.mdc-drawer .mdc-list-group__subheader {
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 {
color: var(--mdc-theme-secondary);
}
@@ -37,33 +38,37 @@ body {
background-color: var(--mdc-theme-secondary);
}
a {
color: var(--mdc-theme-secondary);
/* change cursor on top app bar */
.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 {
margin: 20px 16px auto 16px;
font-weight: normal;
}
.mdc-drawer-app-content {
flex: auto;
overflow: auto;
}
.mdc-drawer {
width: 350px;
}
.main-content {
margin: 15px 0;
overflow: auto;
}
.app-bar {
position: absolute;
}
/* footer */
.footer-container {
background: var(--mdc-theme-background);
padding: 5px 0;
@@ -73,15 +78,6 @@ footer {
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-section {
position: relative;
@@ -93,6 +89,15 @@ footer {
background-blend-mode: multiply;
}
/* splitter for between sections */
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
}
/* 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 {
padding-left: 15%;
@@ -116,7 +121,6 @@ footer span {
position: relative;
top: 19px;
}
footer img {
display: block;
width: 125px;
@@ -124,7 +128,6 @@ footer img {
content: url("/images/young-reporter-logo.png");
vertical-align: middle;
}
@media screen and (max-width: 800px) {
footer {
text-align: center;
@@ -141,7 +144,7 @@ footer img {
}
}
/* for cookie notice */
/* cookie notice */
#cookies {
display: none;
width: 100%;
@@ -153,18 +156,15 @@ footer img {
left: 0;
z-index: 1;
}
#cookies p {
margin: 10px;
}
#cookies p a {
color: var(--mdc-theme-secondary);
text-decoration: none;
}
/* for scroll-to-top button */
/* scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
@@ -183,7 +183,6 @@ footer img {
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button img {
position: relative;
top: 7px;
@@ -194,11 +193,9 @@ footer img {
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56;
}
.top-scroll-button:hover img {
top: 3px;
}

44
css/home.css
View File

@@ -1,23 +1,4 @@
.main-content .mdc-card {
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;
}
/* place button on right */
.article-section-header button {
display: inline;
padding: 5px 14px;
@@ -25,6 +6,8 @@
float: right;
top: 3.5px;
}
/* animate button on hover */
.article-section-header button span {
position: relative;
left: 0;
@@ -33,33 +16,28 @@
font-size: inherit;
}
.article-section-header button:hover span {
left: 3px;
}
.splitter {
height: 15px;
width: 100%;
background-color: var(--mdc-theme-primary);
left: 4px;
}
/* alternate section backgrounds */
.article-section:nth-of-type(3n) {
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;
}
.article-section:nth-of-type(3n+2) {
background: var(--mdc-theme-primary);
}
/* hide articles on smaller screen sizes */
@media screen and (max-width: 600px) {
.article-section .mdc-card:nth-of-type(3) {
display: none;
}
.article-section .mdc-card {
width: calc((100% / 2) - 12px);
}
}
@media screen and (max-width: 350px) {
.article-section .mdc-card:nth-of-type(2) {
display: none;
}
.article-section .mdc-card {
width: calc((100% / 1) - 12px);
}
}

16
css/mdc-card-list.css
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;
}

63
css/year-article-list.css
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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

6
index.md
View File

@@ -18,15 +18,15 @@ layout: home
{% 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-header">
<h1>{{ 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>
<h1 class="mdc-typography--headline4">{{ currentdate }}</h1>
<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 class="articles">
{% assign date = currentdate %}
{% endif %}
{% if currentdate_count < 3 %}
{% 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-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2>