From cbe34aa100e99f9906b151ef3fec82aa9c91fc69 Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Tue, 5 Feb 2019 20:25:51 +0000
Subject: [PATCH] Add list group for each year of articles on the navbar

---
 _includes/navbar.html | 13 +++++++++++--
 css/global.css        |  5 +++++
 css/mdc-card-list.css |  7 ++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/_includes/navbar.html b/_includes/navbar.html
index 0283432..30299c2 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -14,17 +14,26 @@
             </a>
             {% if site.categories.articles %}
             <div class="mdc-list-group">
-                <h3 class="mdc-list-group__subheader">Articles</h3>
+                <h3 class="mdc-typography--headline7">Articles</h3>
                 {% for article in site.categories.articles  %}
                     {% assign currentdate = article.date | date: "%Y" %}
                     {% if currentdate != date %}
+                    {% if article.url != site.categories.articles.first.url %}
+                    </div>
+                    {% endif %}
+                    <div class="mdc-list-group">
                     <h3 class="mdc-list-group__subheader">{{ currentdate }}</h3>
                     {% assign date = currentdate %}
                     {% endif %}
-                    <a class="mdc-list-item" href="{{ page.url | relative_url }}" data-mdc-auto-init="MDCRipple">
+                    <a class="mdc-list-item" href="{{ article.url | relative_url }}" data-mdc-auto-init="MDCRipple">
                         <i class="material-icons mdc-list-item__graphic" aria-hidden="true">assignment</i>
                         <span class="mdc-list-item__text">{{ article.title }}</span>
                     </a>
+                    {% if currentdate != date %}
+                    {% endif %}
+                    {% if article.url == site.categories.articles.last.url %}
+                    </div>
+                    {% endif %}
                 {% endfor %}
             </div>
             {% endif %}
diff --git a/css/global.css b/css/global.css
index ad6b4c6..6462e32 100644
--- a/css/global.css
+++ b/css/global.css
@@ -18,6 +18,11 @@ a {
     color: var(--mdc-theme-secondary);
 }
 
+.mdc-list-group h3 {
+    margin: 20px 16px auto 16px;
+    font-weight: normal;
+}
+
 .mdc-drawer-app-content {
     flex: auto;
     overflow: auto;
diff --git a/css/mdc-card-list.css b/css/mdc-card-list.css
index ba9c11a..7e85236 100644
--- a/css/mdc-card-list.css
+++ b/css/mdc-card-list.css
@@ -14,7 +14,7 @@
 	clear:left;
 	width: 49%;
 }
-.main-content .mdc-card:nth-of-type(4n){
+.main-content .mdc-card:nth-of-type(even){
 	float:right;
 	clear:right;
 }
@@ -23,3 +23,8 @@
     clear: none;
     width: auto;
 }
+.main-content .mdc-card:nth-of-type(odd) ~ .mdc-card:last-of-type {
+    float: none;
+    clear: both;
+    width: auto;
+}