From 867114422926d4a3e48c3feb6e992d44d9d94dc0 Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Fri, 25 Jan 2019 20:36:38 +0000
Subject: [PATCH] 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                         |   8 +-
 _includes/navbar.html~                        |  39 --------
 _includes/top-app-bar.html                    |   2 +-
 ...cle_name.md => 2019-01-01-article-name.md} |   6 +-
 _posts/2019-01-01-article_name.md~            |  18 ----
 _posts/2019-01-25-article-name.md             |  16 ----
 _posts/2019-01-25-article-name.md~            |  17 ----
 .../2019/01/{25 => 01}/article-name.html      |  39 ++++----
 _site/articles/2019/01/01/article_name.html   |  31 +++---
 .../2019/01/02/article-name.html}             |  58 ++++++-----
 _site/authors/name/index_old.html             |  90 ------------------
 _site/css/mdc-card-list.css                   |   4 +-
 ...jpg => 2019-01-01-article-name--cover.jpg} | Bin
 _site/index.html                              |  89 +++++++++++++----
 authors/name.md                               |  21 ----
 authors/name.md~                              |   0
 authors/name/index_old.html                   |  90 ------------------
 css/mdc-card-list.css                         |   4 +-
 ...jpg => 2019-01-01-article-name--cover.jpg} | Bin
 index.md                                      |  18 +++-
 20 files changed, 158 insertions(+), 392 deletions(-)
 delete mode 100644 _includes/navbar.html~
 rename _posts/{2019-01-01-article_name.md => 2019-01-01-article-name.md} (61%)
 delete mode 100644 _posts/2019-01-01-article_name.md~
 delete mode 100644 _posts/2019-01-25-article-name.md
 delete mode 100644 _posts/2019-01-25-article-name.md~
 rename _site/articles/2019/01/{25 => 01}/article-name.html (83%)
 rename _site/{authors/name.html => articles/2019/01/02/article-name.html} (76%)
 delete mode 100644 _site/authors/name/index_old.html
 rename _site/images/{article_name--cover.jpg => 2019-01-01-article-name--cover.jpg} (100%)
 delete mode 100644 authors/name.md
 delete mode 100644 authors/name.md~
 delete mode 100644 authors/name/index_old.html
 rename images/{article_name--cover.jpg => 2019-01-01-article-name--cover.jpg} (100%)

diff --git a/_includes/navbar.html b/_includes/navbar.html
index 39eb343..745ea2d 100644
--- a/_includes/navbar.html
+++ b/_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>
diff --git a/_includes/navbar.html~ b/_includes/navbar.html~
deleted file mode 100644
index 3b65cbe..0000000
--- a/_includes/navbar.html~
+++ /dev/null
@@ -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>
diff --git a/_includes/top-app-bar.html b/_includes/top-app-bar.html
index 54c60ba..ae44be2 100644
--- a/_includes/top-app-bar.html
+++ b/_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;">
diff --git a/_posts/2019-01-01-article_name.md b/_posts/2019-01-01-article-name.md
similarity index 61%
rename from _posts/2019-01-01-article_name.md
rename to _posts/2019-01-01-article-name.md
index 4491e6a..7860783 100644
--- a/_posts/2019-01-01-article_name.md
+++ b/_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>
-     | by <a href="/authors/name">Name</a>
+    <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 {{ page.authors }}
 </h3>
 <figure>
     <img src="/images/article_name--cover.jpg" style="width:100%;">
diff --git a/_posts/2019-01-01-article_name.md~ b/_posts/2019-01-01-article_name.md~
deleted file mode 100644
index 3ed8d1e..0000000
--- a/_posts/2019-01-01-article_name.md~
+++ /dev/null
@@ -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
diff --git a/_posts/2019-01-25-article-name.md b/_posts/2019-01-25-article-name.md
deleted file mode 100644
index 52fda70..0000000
--- a/_posts/2019-01-25-article-name.md
+++ /dev/null
@@ -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
diff --git a/_posts/2019-01-25-article-name.md~ b/_posts/2019-01-25-article-name.md~
deleted file mode 100644
index 98b8537..0000000
--- a/_posts/2019-01-25-article-name.md~
+++ /dev/null
@@ -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
diff --git a/_site/articles/2019/01/25/article-name.html b/_site/articles/2019/01/01/article-name.html
similarity index 83%
rename from _site/articles/2019/01/25/article-name.html
rename to _site/articles/2019/01/01/article-name.html
index 4208adc..a69ddb0 100644
--- a/_site/articles/2019/01/25/article-name.html
+++ b/_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>
-    <meta name="description" content="An article description">
+    <title>Title1 | Reading School</title>
+    <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">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</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>
+                    <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">assignment</i>
+                        <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>
+                
+                    <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>
                 
-                <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>
@@ -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>
-     | by <a href="/authors/name">Name</a>
+    <time class="timeago" datetime="2019-01-01T07:01:00">Tuesday  1 January 2019</time>
+     | by Name
 </h3>
 <figure>
     <img src="/images/article_name--cover.jpg" style="width:100%;" />
diff --git a/_site/articles/2019/01/01/article_name.html b/_site/articles/2019/01/01/article_name.html
index df5ee91..28a17cd 100644
--- a/_site/articles/2019/01/01/article_name.html
+++ b/_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">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</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>
+                    <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">assignment</i>
+                        <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>
+                
+                    <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>
                 
-                <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>
@@ -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>
-     | by <a href="/authors/name">Name</a>
+    <time class="timeago" datetime="2019-01-01T07:02:00">Tuesday  1 January 2019</time>
+     | by Name
 </h3>
 <figure>
     <img src="/images/article_name--cover.jpg" style="width:100%;" />
diff --git a/_site/authors/name.html b/_site/articles/2019/01/02/article-name.html
similarity index 76%
rename from _site/authors/name.html
rename to _site/articles/2019/01/02/article-name.html
index 81b5c34..437ccbd 100644
--- a/_site/authors/name.html
+++ b/_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>
-    <meta name="description" content="">
+    <title>Title1 | Reading School</title>
+    <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">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</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>
+                    <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">assignment</i>
+                        <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>
+                
+                    <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>
                 
-                <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>
@@ -121,21 +122,16 @@
 
             <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>
+                    <h2 class="mdc-typography--headline2">Title1</h2>
+                    <h3 class="mdc-typography--subtitle1">
+    <time class="timeago" datetime="2019-01-02T07:01:00">Wednesday  2 January 2019</time>
+     | by Name
+</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>
+<p>Content</p>
 
                 </div>
             </main>
diff --git a/_site/authors/name/index_old.html b/_site/authors/name/index_old.html
deleted file mode 100644
index 89aa652..0000000
--- a/_site/authors/name/index_old.html
+++ /dev/null
@@ -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>
diff --git a/_site/css/mdc-card-list.css b/_site/css/mdc-card-list.css
index 46dcfc7..ba9c11a 100644
--- a/_site/css/mdc-card-list.css
+++ b/_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;
diff --git a/_site/images/article_name--cover.jpg b/_site/images/2019-01-01-article-name--cover.jpg
similarity index 100%
rename from _site/images/article_name--cover.jpg
rename to _site/images/2019-01-01-article-name--cover.jpg
diff --git a/_site/index.html b/_site/index.html
index 9b952d3..1fb94ed 100644
--- a/_site/index.html
+++ b/_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">
-                        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">subject</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>
+                    <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">assignment</i>
+                        <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>
+                
+                    <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>
                 
-                <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>
@@ -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>
-             | by <a href="/authors/name">Name</a>
+            <time class="timeago" datetime="2019-01-02T07:01:00">Wednesday  2 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/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>
diff --git a/authors/name.md b/authors/name.md
deleted file mode 100644
index 1770fd4..0000000
--- a/authors/name.md
+++ /dev/null
@@ -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>
diff --git a/authors/name.md~ b/authors/name.md~
deleted file mode 100644
index e69de29..0000000
diff --git a/authors/name/index_old.html b/authors/name/index_old.html
deleted file mode 100644
index 89aa652..0000000
--- a/authors/name/index_old.html
+++ /dev/null
@@ -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>
diff --git a/css/mdc-card-list.css b/css/mdc-card-list.css
index 46dcfc7..ba9c11a 100644
--- a/css/mdc-card-list.css
+++ b/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;
diff --git a/images/article_name--cover.jpg b/images/2019-01-01-article-name--cover.jpg
similarity index 100%
rename from images/article_name--cover.jpg
rename to images/2019-01-01-article-name--cover.jpg
diff --git a/index.md b/index.md
index 3a23b7d..5a3f128 100644
--- a/index.md
+++ b/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>
-             | by <a href="/authors/name">Name</a>
+            <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-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 %}