Redesign website

This commit is contained in:
2020-03-02 20:19:40 +00:00
parent d8c1fda74b
commit 64cd4f03d4
40 changed files with 3441 additions and 497 deletions

View File

@@ -48,6 +48,9 @@
</head>
<link href="/css/mdc-card-list.css" rel="stylesheet">
<link href="/css/home.css" rel="stylesheet">
<script src="/js/home.js"></script>
<script src="/js/jarallax.min.js"></script>
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">
@@ -79,6 +82,37 @@
<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>
@@ -88,7 +122,6 @@
<span class="mdc-list-item__text">The Finished Product</span>
</a>
@@ -97,7 +130,6 @@
<span class="mdc-list-item__text">Are The Roads Around Your Home And School Safe?</span>
</a>
@@ -106,7 +138,6 @@
<span class="mdc-list-item__text">Student Survey Shows Rosa Parks Is Most Inspirational Woman Ever</span>
</a>
@@ -115,7 +146,6 @@
<span class="mdc-list-item__text">Book Week - Real Life Issues Inspire Sarah Govett</span>
</a>
@@ -124,7 +154,6 @@
<span class="mdc-list-item__text">A Possible Autism-Anorexia Link Has Been Found, So What Are We Doing About It?</span>
</a>
@@ -133,7 +162,6 @@
<span class="mdc-list-item__text">Could Sky-High Aims Bring Reading Down?</span>
</a>
@@ -142,7 +170,6 @@
<span class="mdc-list-item__text">Tennis Club Needs To Relocate As Redevelopment Plans Are Called Out</span>
</a>
@@ -151,7 +178,6 @@
<span class="mdc-list-item__text">Video Games - Virtual Fantasy Or A Virtual Prison?</span>
</a>
@@ -160,7 +186,6 @@
<span class="mdc-list-item__text">What Is 'In The Patient's Best Interest?</span>
</a>
@@ -169,7 +194,6 @@
<span class="mdc-list-item__text">What's Next For Reading Prison?</span>
</a>
@@ -178,7 +202,6 @@
<span class="mdc-list-item__text">Reading School's BBC Young Reporter Team… Ready To Go!</span>
</a>
</div>
@@ -210,256 +233,260 @@
<main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust">
<div class="article-section" data-jarallax="" data-speed="0.4">
<div class="article-section-header">
<h1>2020</h1>
<button class="mdc-button mdc-button--outlined" data-mdc-auto-init="MDCRipple" onclick="window.location='URL';">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 -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>
</div>
<div class="splitter"></div>
<div class="article-section" data-jarallax="" data-speed="0.4">
<div class="article-section-header">
<h1>2019</h1>
<button class="mdc-button mdc-button--outlined" data-mdc-auto-init="MDCRipple" onclick="window.location='URL';">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 -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
| 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
| 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
| 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-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-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-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-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-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-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-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-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>
</main>
<footer>
<div class="footer-container">
<footer>
<img>
<span >&copy; Reading School 2019 | Made by <a href="https://mgrove.uk">Matthew G</a></span>
<span >&copy; Matthew G 2020 | Made by <a href="https://mgrove.uk">Matthew G</a></span>
</footer>
</div>
<a href="javascript:scrollUp()" class="top-scroll-button">
<img alt="Scroll to top" src="/images/up-arrow.png">
</a>