Enable auto-population & remove author pages

Make the navbar, main article list and content of articles (images, dates and authors) populate automatically, and remove pages for each author.

_includes/navbar.html

@@ -5,7 +5,7 @@
                 <img src="/images/page-logo.png" style="width: 90%;"/>
             </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">home</i>
+                <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">
@@ -16,14 +16,10 @@
                 <h3 class="mdc-list-group__subheader">Articles</h3>
                 {% for page in site.categories.articles  %}
                     <a class="mdc-list-item" href="{{ page.url | relative_url }}" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
+                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
                         <span class="mdc-list-item__text">{{ page.title }}</span>
                     </a>
                 {% endfor %}
-                <a class="mdc-list-item" href="/articles/article_name" 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>
             </div>
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Authors</h3>

_includes/navbar.html~

@@ -1,39 +0,0 @@
-<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/page-logo.png" style="width: 90%;"/>
-            </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">home</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-list-group__subheader">Articles</h3>
-                <a class="mdc-list-item" href="/articles/article_name" 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>
-            </div>
-            <div class="mdc-list-group">
-                <h3 class="mdc-list-group__subheader">Authors</h3>
-                <a class="mdc-list-item" href="/authors/name" data-mdc-auto-init="MDCRipple">
-                    <i class="material-icons mdc-list-item__graphic" aria-hidden="true">account_circle</i>
-                    <span class="mdc-list-item__text">Name</span>
-                </a>
-            </div>
-            {% loop_directory directory:articles  %}
-                <a class="mdc-list-item" href="{{ page.url | relative_url }}" data-mdc-auto-init="MDCRipple">
-                    <i class="material-icons mdc-list-item__graphic" aria-hidden="true">{{ page.icon }}</i>
-                    <span class="mdc-list-item__text">{{ page.title }}</span>
-                </a>
-            {% endloop_directory %}
-        </nav>
-    </div>
-</aside>
-
-<div class="mdc-drawer-scrim"></div>

_includes/top-app-bar.html

@@ -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">{{ page.title }} | Reading School</span>
+            <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;">

_posts/2019-01-01-article-name.md

@@ -3,11 +3,13 @@ title: Title1
 description: An article description1
 layout: article
 categories: articles
+date: 2019-01-01 7:01
+authors: Name
 ---
 
 <h3 class="mdc-typography--subtitle1">
-    <time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
+    <time class="timeago" datetime="{{ page.date | date: '%Y-%m-%d' }}T{{ page.date | date: '%H:%M:%S' }}">{{ page.date | date: '%A %e %B %Y' }}</time>
-     | by <a href="/authors/name">Name</a>
+     | by {{ page.authors }}
 </h3>
 <figure>
     <img src="/images/article_name--cover.jpg" style="width:100%;">

_posts/2019-01-01-article_name.md~

@@ -1,18 +0,0 @@
----
-title: Title1
-description: An article description1
-layout: article
-icon: home
-categories: articles
-date: 2019-01-01 9:00
----
-
-<h3 class="mdc-typography--subtitle1">
-    <time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
-     | by <a href="/authors/name">Name</a>
-</h3>
-<figure>
-    <img src="/images/article_name--cover.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
-</figure>
-Content

_posts/2019-01-25-article-name.md

@@ -1,16 +0,0 @@
----
-title: Title
-description: An article description
-layout: article
-categories: articles
----
-
-<h3 class="mdc-typography--subtitle1">
-    <time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
-     | by <a href="/authors/name">Name</a>
-</h3>
-<figure>
-    <img src="/images/article_name--cover.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
-</figure>
-Content

_posts/2019-01-25-article-name.md~

@@ -1,17 +0,0 @@
----
-title: Title
-description: An article description
-layout: article
-icon: home
-categories: articles
----
-
-<h3 class="mdc-typography--subtitle1">
-    <time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
-     | by <a href="/authors/name">Name</a>
-</h3>
-<figure>
-    <img src="/images/article_name--cover.jpg" style="width:100%;">
-    <figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
-</figure>
-Content

_site/articles/2019/01/01/article-name.html

@@ -14,15 +14,15 @@
     <!-- 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="Title | Reading School">
+    <meta name="apple-mobile-web-app-title" content="Title1 | 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>Title | Reading School</title>
+    <title>Title1 | Reading School</title>
-    <meta name="description" content="An article description">
+    <meta name="description" content="An article description1">
 
     <!-- import Roboto (font) -->
     <link href="/css/roboto.css" rel="stylesheet">
@@ -63,7 +63,7 @@
                 <img src="/images/page-logo.png" style="width: 90%;"/>
             </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">home</i>
+                <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">
@@ -73,20 +73,21 @@
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Articles</h3>
                 
-                    <a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
+                        <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/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
                         <span class="mdc-list-item__text">Title1</span>
                     </a>
                 
-                <a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article_name.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>
+                        <span class="mdc-list-item__text">Title1</span>
                     </a>
+                
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article-name.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">Title1</span>
+                    </a>
+                
             </div>
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Authors</h3>
@@ -108,7 +109,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">Title | Reading School</span>
+            <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;">
@@ -121,10 +122,10 @@
 
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--short-fixed-adjust">
-                    <h2 class="mdc-typography--headline2">Title</h2>
+                    <h2 class="mdc-typography--headline2">Title1</h2>
                     <h3 class="mdc-typography--subtitle1">
-    <time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
+    <time class="timeago" datetime="2019-01-01T07:01:00">Tuesday  1 January 2019</time>
-     | by <a href="/authors/name">Name</a>
+     | by Name
 </h3>
 <figure>
     <img src="/images/article_name--cover.jpg" style="width:100%;" />

_site/articles/2019/01/01/article_name.html

@@ -63,7 +63,7 @@
                 <img src="/images/page-logo.png" style="width: 90%;"/>
             </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">home</i>
+                <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">
@@ -73,20 +73,21 @@
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Articles</h3>
                 
-                    <a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
+                        <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/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
                         <span class="mdc-list-item__text">Title1</span>
                     </a>
                 
-                <a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article_name.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>
+                        <span class="mdc-list-item__text">Title1</span>
                     </a>
+                
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article-name.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">Title1</span>
+                    </a>
+                
             </div>
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Authors</h3>
@@ -108,7 +109,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">Title1 | Reading School</span>
+            <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;">
@@ -123,8 +124,8 @@
                 <div class="mdc-top-app-bar--short-fixed-adjust">
                     <h2 class="mdc-typography--headline2">Title1</h2>
                     <h3 class="mdc-typography--subtitle1">
-    <time class="timeago" datetime="2019-03-06T07:08:0Z">Wednesday 6th March 2019</time>
+    <time class="timeago" datetime="2019-01-01T07:02:00">Tuesday  1 January 2019</time>
-     | by <a href="/authors/name">Name</a>
+     | by Name
 </h3>
 <figure>
     <img src="/images/article_name--cover.jpg" style="width:100%;" />

_site/articles/2019/01/02/article-name.html

@@ -14,15 +14,15 @@
     <!-- 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">
+    <meta name="apple-mobile-web-app-title" content="Title1 | 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>
+    <title>Title1 | Reading School</title>
-    <meta name="description" content="">
+    <meta name="description" content="An article description1">
 
     <!-- import Roboto (font) -->
     <link href="/css/roboto.css" rel="stylesheet">
@@ -46,7 +46,7 @@
     <link href="/css/global.css" rel="stylesheet">
 </head>
 
-    <link href="/css/mdc-card-list.css" rel="stylesheet">
+    <link href="/css/article-page.css" rel="stylesheet">
     <body>
         <!-- cookie notice is included automatically -->
         <div id="cookies">
@@ -63,7 +63,7 @@
                 <img src="/images/page-logo.png" style="width: 90%;"/>
             </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">home</i>
+                <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">
@@ -73,20 +73,21 @@
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Articles</h3>
                 
-                    <a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
+                        <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/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
                         <span class="mdc-list-item__text">Title1</span>
                     </a>
                 
-                <a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article_name.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>
+                        <span class="mdc-list-item__text">Title1</span>
                     </a>
+                
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article-name.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">Title1</span>
+                    </a>
+                
             </div>
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Authors</h3>
@@ -121,21 +122,16 @@
 
             <main class="main-content" id="main-content">
                 <div class="mdc-top-app-bar--short-fixed-adjust">
-                    <div class="mdc-card">
+                    <h2 class="mdc-typography--headline2">Title1</h2>
-    <div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
+                    <h3 class="mdc-typography--subtitle1">
-    <div class="mdc-card-content">
+    <time class="timeago" datetime="2019-01-02T07:01:00">Wednesday  2 January 2019</time>
-        <h2 class="mdc-typography--headline6">Title</h2>
+     | by Name
-        <h3 class="mdc-typography--subtitle2">
+</h3>
-            <time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
+<figure>
-             | by <a href="/authors/name">Name</a>
+    <img src="/images/article_name--cover.jpg" style="width:100%;" />
-        </h3>
+    <figcaption class="mdc-typography--caption-text">A brass statue of a child, in a garden</figcaption>
-    </div>
+</figure>
-    <div class="mdc-card__actions">
+<p>Content</p>
-        <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/article_name';">Read</button>
-        </div>
-    </div>
-</div>
 
                 </div>
             </main>

_site/authors/name/index_old.html

@@ -1,90 +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="News articles written by Reading School students in year 8">
-
-        <!-- import Roboto (font) -->
-        <link href="/assets/roboto.css" rel="stylesheet">
-
-        <!-- import jQuery -->
-        <script src="/assets/jquery.min.js"></script>
-
-        <!-- import jQuery timeago -->
-        <script src="/assets/jquery.timeago.min.js"></script>
-
-        <!-- import cookie JavaScript -->
-        <script src="/assets/cookies.js"></script>
-
-        <!-- import Material Design components & icons -->
-        <link href="/assets/material-components-web.min.css" rel="stylesheet">
-        <link href="/assets/material_icons.css" rel="stylesheet">
-        <script src="/assets/material-components-web.min.js"></script>
-
-        <!-- import local styling & scripts -->
-        <script src="/assets/global.js"></script>
-        <link href="/assets/global.css" rel="stylesheet">
-        <link href="/assets/mdc-card-list.css" rel="stylesheet">
-
-        <!-- define title so that webpage & top app bar titles can be instantiated via JS -->
-        <script>
-            window.page_title = "Name";
-        </script>
-    </head>
-    <body>
-        <!-- cookie notice is included via jQuery -->
-        <div id="cookies"></div>
-
-        <!-- content of navbar is included via jQuery -->
-        <aside class="mdc-drawer mdc-drawer--modal"></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"></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" style="background-image:url('/images/article_name--cover.jpg');"></div>
-                        <div class="mdc-card-content">
-                            <h2 class="mdc-typography--headline6">Title</h2>
-                            <h3 class="mdc-typography--subtitle2">
-                                <time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
-                                 | by <a href="/authors/name">Name</a>
-                            </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/article_name';">Read</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </main>
-            <footer>
-                &copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a>
-            </footer>
-        </div>
-    </body>
-</html>

_site/css/mdc-card-list.css

@@ -14,11 +14,11 @@
 	clear:left;
 	width: 49%;
 }
-.main-content .mdc-card:nth-of-type(even){
+.main-content .mdc-card:nth-of-type(4n){
 	float:right;
 	clear:right;
 }
-.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(2) {
+.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(3) {
     float: none;
     clear: none;
     width: auto;

_site/index.html

@@ -63,7 +63,7 @@
                 <img src="/images/page-logo.png" style="width: 90%;"/>
             </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">home</i>
+                <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">
@@ -73,20 +73,21 @@
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Articles</h3>
                 
-                    <a class="mdc-list-item" href="/articles/2019/01/25/article-name.html" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/02/article-name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
+                        <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/2019/01/01/article_name.html" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</i>
                         <span class="mdc-list-item__text">Title1</span>
                     </a>
                 
-                <a class="mdc-list-item" href="/articles/article_name" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article_name.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>
+                        <span class="mdc-list-item__text">Title1</span>
                     </a>
+                
+                    <a class="mdc-list-item" href="/articles/2019/01/01/article-name.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">Title1</span>
+                    </a>
+                
             </div>
             <div class="mdc-list-group">
                 <h3 class="mdc-list-group__subheader">Authors</h3>
@@ -121,22 +122,74 @@
 
             <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" style="background-image:url('/images/article_name--cover.jpg');"></div>
+<div class="mdc-card">
+    <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-01-02-article-name-html"></div>
     <div class="mdc-card-content">
-        <h2 class="mdc-typography--headline6">Title</h2>
+        <h2 class="mdc-typography--headline6">Title1</h2>
         <h3 class="mdc-typography--subtitle2">
-            <time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
+            <time class="timeago" datetime="2019-01-02T07:01:00">Wednesday  2 January 2019</time>
-             | by <a href="/authors/name">Name</a>
+             | by Name
         </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/article_name';">Read</button>
+            <button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='/articles/2019/01/02/article-name.html';">Read</button>
         </div>
     </div>
 </div>
 
+<style>
+    .-articles-2019-01-02-article-name-html {
+        background-image: url("/images/2019-01-02-article-name--cover.jpg");
+    }
+</style>
+
+<div class="mdc-card">
+    <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-01-01-article_name-html"></div>
+    <div class="mdc-card-content">
+        <h2 class="mdc-typography--headline6">Title1</h2>
+        <h3 class="mdc-typography--subtitle2">
+            <time class="timeago" datetime="2019-01-01T07:02:00">Tuesday  1 January 2019</time>
+             | by Name
+        </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/01/01/article_name.html';">Read</button>
+        </div>
+    </div>
+</div>
+
+<style>
+    .-articles-2019-01-01-article_name-html {
+        background-image: url("/images/2019-01-01-article_name--cover.jpg");
+    }
+</style>
+
+<div class="mdc-card">
+    <div class="mdc-card__media mdc-card__media--16-9 -articles-2019-01-01-article-name-html"></div>
+    <div class="mdc-card-content">
+        <h2 class="mdc-typography--headline6">Title1</h2>
+        <h3 class="mdc-typography--subtitle2">
+            <time class="timeago" datetime="2019-01-01T07:01:00">Tuesday  1 January 2019</time>
+             | by Name
+        </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/01/01/article-name.html';">Read</button>
+        </div>
+    </div>
+</div>
+
+<style>
+    .-articles-2019-01-01-article-name-html {
+        background-image: url("/images/2019-01-01-article-name--cover.jpg");
+    }
+</style>
+
+
                 </div>
             </main>
             <footer>

authors/name.md

@@ -1,21 +0,0 @@
----
-title: BBC Young Reporter
-categories: authors
-layout: article-list
----
-
-<div class="mdc-card">
-    <div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
-    <div class="mdc-card-content">
-        <h2 class="mdc-typography--headline6">Title</h2>
-        <h3 class="mdc-typography--subtitle2">
-            <time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
-             | by <a href="/authors/name">Name</a>
-        </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/article_name';">Read</button>
-        </div>
-    </div>
-</div>

authors/name/index_old.html

@@ -1,90 +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="News articles written by Reading School students in year 8">
-
-        <!-- import Roboto (font) -->
-        <link href="/assets/roboto.css" rel="stylesheet">
-
-        <!-- import jQuery -->
-        <script src="/assets/jquery.min.js"></script>
-
-        <!-- import jQuery timeago -->
-        <script src="/assets/jquery.timeago.min.js"></script>
-
-        <!-- import cookie JavaScript -->
-        <script src="/assets/cookies.js"></script>
-
-        <!-- import Material Design components & icons -->
-        <link href="/assets/material-components-web.min.css" rel="stylesheet">
-        <link href="/assets/material_icons.css" rel="stylesheet">
-        <script src="/assets/material-components-web.min.js"></script>
-
-        <!-- import local styling & scripts -->
-        <script src="/assets/global.js"></script>
-        <link href="/assets/global.css" rel="stylesheet">
-        <link href="/assets/mdc-card-list.css" rel="stylesheet">
-
-        <!-- define title so that webpage & top app bar titles can be instantiated via JS -->
-        <script>
-            window.page_title = "Name";
-        </script>
-    </head>
-    <body>
-        <!-- cookie notice is included via jQuery -->
-        <div id="cookies"></div>
-
-        <!-- content of navbar is included via jQuery -->
-        <aside class="mdc-drawer mdc-drawer--modal"></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"></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" style="background-image:url('/images/article_name--cover.jpg');"></div>
-                        <div class="mdc-card-content">
-                            <h2 class="mdc-typography--headline6">Title</h2>
-                            <h3 class="mdc-typography--subtitle2">
-                                <time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
-                                 | by <a href="/authors/name">Name</a>
-                            </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/article_name';">Read</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </main>
-            <footer>
-                &copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a>
-            </footer>
-        </div>
-    </body>
-</html>

css/mdc-card-list.css

@@ -14,11 +14,11 @@
 	clear:left;
 	width: 49%;
 }
-.main-content .mdc-card:nth-of-type(even){
+.main-content .mdc-card:nth-of-type(4n){
 	float:right;
 	clear:right;
 }
-.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(2) {
+.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(3) {
     float: none;
     clear: none;
     width: auto;

index.md

@@ -4,18 +4,26 @@ description: News articles written by Reading School students in year 8
 layout: article-list
 ---
 
+{% for article in site.categories.articles %}
 <div class="mdc-card">
-    <div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
+    <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">Title</h2>
+        <h2 class="mdc-typography--headline6">{{ article.title }}</h2>
         <h3 class="mdc-typography--subtitle2">
-            <time class="timeago" datetime="2018-11-21T07:08:0Z">Wednesday 21st November 2018</time>
+            <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 <a href="/authors/name">Name</a>
+             | by {{ article.authors }}
         </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/article_name';">Read</button>
+            <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 %}