Finish redesigning site

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

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>
<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>