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

Continue redesigning website

Browse Source 
Start template for article list for each year
This commit is contained in:
Matthew Grove
2020-03-03 07:26:53 +00:00
parent 8d6382d3a6
commit b382db281c
23 changed files with 675 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
year.md → 2019.md
View File

@@ -1,7 +1,8 @@
---
title: BBC Young Reporter
description: News articles written by Reading School students in year 8
layout: article-list
layout: year-article-list
year: 2019
---
{% if site.categories.articles %}

25
_layouts/article-list.html
View File

@@ -1,25 +0,0 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<link href="/css/mdc-card-list.css" rel="stylesheet">
<link href="/css/article-list.css" rel="stylesheet">
<script src="/js/parallax.min.js"></script>
<body>
<!-- cookie notice is included automatically -->
{% include cookie-notice.html %}
<!-- content of navbar is included via jQuery -->
{% include navbar.html %}
<div class="mdc-drawer-app-content">
{% include top-app-bar.html %}
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
{{ content }}
</div>
</main>
{% include footer.html %}
</div>
</body>
</html>

1
_layouts/home.html
View File

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

53
_layouts/year-article-list.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<link href="/css/mdc-card-list.css" rel="stylesheet">
<link href="/css/year-article-list.css" rel="stylesheet">
<body>
<!-- cookie notice is included automatically -->
{% include cookie-notice.html %}
<!-- content of navbar is included via jQuery -->
{% include navbar.html %}
<div class="mdc-drawer-app-content">
{% include top-app-bar.html %}
<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>
</div>
<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">
<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>
<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>
{% endif %}
{% endfor %}
</div>
</div>
<div class="splitter"></div>
</div>
</main>
{% include footer.html %}
</div>
</body>
</html>

557
_site/2019.html Normal file
View File

@@ -0,0 +1,557 @@
<!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">
<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">
<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">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="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>
<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__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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T09:36:00">Wednesday 6 March 2019</time>
| by Mr Baldock
</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/2019/03/06/young-reporter-team-ready-to-go.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T10:38:00">Wednesday 6 March 2019</time>
| by Tom S-R, Ben S-R
</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/2019/03/06/whats-next-for-reading-prison.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T11:46:00">Wednesday 6 March 2019</time>
| by Aadith C
</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/2019/03/06/what-is-in-the-patients-best-interest.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T12:19:00">Wednesday 6 March 2019</time>
| by Kamran S
</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/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T12:32:00">Wednesday 6 March 2019</time>
| by Hal R-D
</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/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T12:56:00">Wednesday 6 March 2019</time>
| by Ben P
</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/2019/03/06/could-sky-high-aims-bring-reading-down.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T13:38:00">Wednesday 6 March 2019</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/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T14:14:00">Wednesday 6 March 2019</time>
| by Aadith C, Adit S, Adi V
</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/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T14:38:00">Wednesday 6 March 2019</time>
| by Tom S-R, Ben S-R
</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/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.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/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>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T14:46:00">Wednesday 6 March 2019</time>
| by Riley C, Oliver C
</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/2019/03/06/are-the-roads-around-your-home-and-school-safe.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/2019-03-06-finished-product.jpg');"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">The Finished Product</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T15:52:00">Wednesday 6 March 2019</time>
| by Mr Baldock
</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/2019/03/06/finished-product.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-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>
<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>

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

@@ -20,6 +20,11 @@
padding-bottom: 6px;
}
/* hide empty black bar if there is no content to the article */
.article-content:empty {
display: none;
}
/* position headline in middle of image */
.parallax-section {
text-align: center;

4
_site/css/global.css
View File

@@ -88,6 +88,10 @@ footer {
z-index: 0;
display: flow-root;
}
.parallax-section #jarallax-container-0 div, .parallax-section #jarallax-container-1 div {
background-color: rgba(0,0,0,0.45);
background-blend-mode: multiply;
}
/* 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 {

0
_site/css/article-list.css → _site/css/year-article-list.css
View File

BIN
_site/images/backgrounds/2019.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 KiB

After

Width:  |  Height:  |  Size: 274 KiB

BIN
_site/images/backgrounds/2020.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 KiB

After

Width:  |  Height:  |  Size: 274 KiB

50
_site/index.html
View File

@@ -52,7 +52,6 @@
<link href="/css/mdc-card-list.css" rel="stylesheet">
<link href="/css/home.css" rel="stylesheet">
<script src="/js/home.js"></script>
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
@@ -261,7 +260,7 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2020-03-02-test2-html"></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">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
@@ -276,11 +275,6 @@
</div>
</div>
</div>
<style>
.-articles-2020-03-02-test2-html {
background-image: url("/images/2020-03-02-test2.jpg");
}
</style>
@@ -290,7 +284,7 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2020-03-02-test1-html"></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">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">
@@ -305,11 +299,6 @@
</div>
</div>
</div>
<style>
.-articles-2020-03-02-test1-html {
background-image: url("/images/2020-03-02-test1.jpg");
}
</style>
@@ -319,7 +308,7 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2020-03-01-test-html"></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">
<h2 class="mdc-typography--headline6">Test</h2>
<h3 class="mdc-typography--subtitle2">
@@ -334,11 +323,6 @@
</div>
</div>
</div>
<style>
.-articles-2020-03-01-test-html {
background-image: url("/images/2020-03-01-test.jpg");
}
</style>
@@ -362,7 +346,7 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-finished-product-html"></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">
<h2 class="mdc-typography--headline6">The Finished Product</h2>
<h3 class="mdc-typography--subtitle2">
@@ -377,11 +361,6 @@
</div>
</div>
</div>
<style>
.-articles-2019-03-06-finished-product-html {
background-image: url("/images/2019-03-06-finished-product.jpg");
}
</style>
@@ -391,7 +370,7 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-are-the-roads-around-your-home-and-school-safe-html"></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">
<h2 class="mdc-typography--headline6">Are The Roads Around Your Home And School Safe?</h2>
<h3 class="mdc-typography--subtitle2">
@@ -406,11 +385,6 @@
</div>
</div>
</div>
<style>
.-articles-2019-03-06-are-the-roads-around-your-home-and-school-safe-html {
background-image: url("/images/2019-03-06-are-the-roads-around-your-home-and-school-safe.jpg");
}
</style>
@@ -420,7 +394,7 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html"></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">
<h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2>
<h3 class="mdc-typography--subtitle2">
@@ -435,11 +409,6 @@
</div>
</div>
</div>
<style>
.-articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html {
background-image: url("/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.jpg");
}
</style>
@@ -511,7 +480,7 @@
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2018-03-06-test-html"></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">
<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">
@@ -526,11 +495,6 @@
</div>
</div>
</div>
<style>
.-articles-2018-03-06-test-html {
background-image: url("/images/2018-03-06-test.jpg");
}
</style>

41
_site/js/article-page.js
View File

@@ -1,39 +1,6 @@
$(document).ready(function(){
// initiate carousel
$('.carousel').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true,
autoplay: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 2,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// overwrite auto-generated inline styling
$(".slick-prev, .slick-next").hide();
// remove black bar if article has no content
if (! $.trim($(".article-content").html())) {
$(".article-content").hide();
}
});

3
_site/js/home.js
View File

@@ -1,3 +0,0 @@
// $(window).scroll(function () {
// $(".article-section").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
// });

58
_site/sitemap.xml
View File

@@ -3,9 +3,20 @@
<url>
<loc>/2019.html</loc>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/404.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
@@ -16,7 +27,7 @@
<url>
<loc>/auto-refresh.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
@@ -27,7 +38,7 @@
<url>
<loc>/</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
@@ -40,118 +51,107 @@
<url>
<loc>/year.html</loc>
<lastmod>2020-03-02</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2020/03/02/test2.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2020/03/02/test1.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2020/03/01/test.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/finished-product.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/are-the-roads-around-your-home-and-school-safe.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/could-sky-high-aims-bring-reading-down.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/what-is-in-the-patients-best-interest.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/whats-next-for-reading-prison.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2019/03/06/young-reporter-team-ready-to-go.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>/articles/2018/03/06/test.html</loc>
<lastmod>2020-03-02</lastmod>
<lastmod>2020-03-03</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>

609
_site/year.html
View File

@@ -1,609 +0,0 @@
<!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">
<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">
<script src="/js/parallax.min.js"></script>
<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">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="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2020-03-02-test2-html"></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>
<style>
.-articles-2020-03-02-test2-html {
background-image: url("/images/2020-03-02-test2--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2020-03-02-test1-html"></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>
<style>
.-articles-2020-03-02-test1-html {
background-image: url("/images/2020-03-02-test1--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2020-03-01-test-html"></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>
<style>
.-articles-2020-03-01-test-html {
background-image: url("/images/2020-03-01-test--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-finished-product-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">The Finished Product</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T15:52:00">Wednesday 6 March 2019</time>
| by Mr Baldock
</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/2019/03/06/finished-product.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-finished-product-html {
background-image: url("/images/2019-03-06-finished-product--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-are-the-roads-around-your-home-and-school-safe-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Are The Roads Around Your Home And School Safe?</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T14:46:00">Wednesday 6 March 2019</time>
| by Riley C, Oliver C
</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/2019/03/06/are-the-roads-around-your-home-and-school-safe.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-are-the-roads-around-your-home-and-school-safe-html {
background-image: url("/images/2019-03-06-are-the-roads-around-your-home-and-school-safe--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T14:38:00">Wednesday 6 March 2019</time>
| by Tom S-R, Ben S-R
</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/2019/03/06/student-survey-shows-rosa-parks-is-most-inspirational-woman-ever.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever-html {
background-image: url("/images/2019-03-06-student-survey-shows-rosa-parks-is-most-inspirational-woman-ever--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Book Week - Real Life Issues Inspire Sarah Govett</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T14:14:00">Wednesday 6 March 2019</time>
| by Aadith C, Adit S, Adi V
</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/2019/03/06/book-week-real-life-issues-inspire-sarah-govett.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-book-week-real-life-issues-inspire-sarah-govett-html {
background-image: url("/images/2019-03-06-book-week-real-life-issues-inspire-sarah-govett--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it-html"></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="2019-03-06T13:38:00">Wednesday 6 March 2019</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/2019/03/06/a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it-html {
background-image: url("/images/2019-03-06-a-possible-autism-anorexia-link-has-been-found-so-what-are-we-doing-about-it--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-could-sky-high-aims-bring-reading-down-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Could Sky-High Aims Bring Reading Down?</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T12:56:00">Wednesday 6 March 2019</time>
| by Ben P
</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/2019/03/06/could-sky-high-aims-bring-reading-down.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-could-sky-high-aims-bring-reading-down-html {
background-image: url("/images/2019-03-06-could-sky-high-aims-bring-reading-down--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Tennis Club Needs To Relocate As Redevelopment Plans Are Called ‘Out’</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T12:32:00">Wednesday 6 March 2019</time>
| by Hal R-D
</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/2019/03/06/tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out-html {
background-image: url("/images/2019-03-06-tennis-club-needs-to-relocate-as-redevelopment-plans-are-called-out--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Video Games - Virtual Fantasy Or A Virtual Prison?</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T12:19:00">Wednesday 6 March 2019</time>
| by Kamran S
</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/2019/03/06/video-games-virtual-fantasy-or-a-virtual-prison.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison-html {
background-image: url("/images/2019-03-06-video-games-virtual-fantasy-or-a-virtual-prison--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-what-is-in-the-patients-best-interest-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">What Is 'In The Patient's Best Interest’?</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T11:46:00">Wednesday 6 March 2019</time>
| by Aadith C
</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/2019/03/06/what-is-in-the-patients-best-interest.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-what-is-in-the-patients-best-interest-html {
background-image: url("/images/2019-03-06-what-is-in-the-patients-best-interest--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-whats-next-for-reading-prison-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">What's Next For Reading Prison?</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T10:38:00">Wednesday 6 March 2019</time>
| by Tom S-R, Ben S-R
</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/2019/03/06/whats-next-for-reading-prison.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-whats-next-for-reading-prison-html {
background-image: url("/images/2019-03-06-whats-next-for-reading-prison--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2019-03-06-young-reporter-team-ready-to-go-html"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Reading School's BBC Young Reporter Team… Ready To Go!</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="2019-03-06T09:36:00">Wednesday 6 March 2019</time>
| by Mr Baldock
</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/2019/03/06/young-reporter-team-ready-to-go.html';">Read</button>
</div>
</div>
</div>
<style>
.-articles-2019-03-06-young-reporter-team-ready-to-go-html {
background-image: url("/images/2019-03-06-young-reporter-team-ready-to-go--cover.jpg");
}
</style>
<div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9 -articles-2018-03-06-test-html"></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>
<style>
.-articles-2018-03-06-test-html {
background-image: url("/images/2018-03-06-test--cover.jpg");
}
</style>
</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>

5
css/article-page.css
View File

@@ -20,6 +20,11 @@
padding-bottom: 6px;
}
/* hide empty black bar if there is no content to the article */
.article-content:empty {
display: none;
}
/* position headline in middle of image */
.parallax-section {
text-align: center;

4
css/global.css
View File

@@ -88,6 +88,10 @@ footer {
z-index: 0;
display: flow-root;
}
.parallax-section #jarallax-container-0 div, .parallax-section #jarallax-container-1 div {
background-color: rgba(0,0,0,0.45);
background-blend-mode: multiply;
}
/* 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 {

0
css/article-list.css → css/year-article-list.css
View File

BIN
images/backgrounds/2019.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 KiB

After

Width:  |  Height:  |  Size: 274 KiB

BIN
images/backgrounds/2020.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 669 KiB

After

Width:  |  Height:  |  Size: 274 KiB

7
index.md
View File

@@ -27,7 +27,7 @@ layout: home
{% if currentdate_count < 3 %}
{% assign currentdate_count = currentdate_count | plus: 1 %}
<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__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>
<h3 class="mdc-typography--subtitle2">
@@ -42,11 +42,6 @@ layout: home
</div>
</div>
</div>
<style>
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}.jpg");
}
</style>
{% endif %}
{% if currentdate != date %}
{% endif %}

41
js/article-page.js
View File

@@ -1,39 +1,6 @@
$(document).ready(function(){
// initiate carousel
$('.carousel').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true,
autoplay: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 2,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// overwrite auto-generated inline styling
$(".slick-prev, .slick-next").hide();
// remove black bar if article has no content
if (! $.trim($(".article-content").html())) {
$(".article-content").hide();
}
});

3
js/home.js
View File

@@ -1,3 +0,0 @@
// $(window).scroll(function () {
// $(".article-section").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
// });