From b1c82f01d3c3a1ab9972311de3feaf4af761868a Mon Sep 17 00:00:00 2001
From: Daniel Barber <github@danbarber.me>
Date: Tue, 15 Oct 2019 17:28:12 -0400
Subject: [PATCH] CSS and dates, yay!

---
 assets/sass/components/_post.scss     | 11 +++++++++++
 assets/sass/elements/_a.scss          |  6 ++++++
 assets/sass/elements/_blockquote.scss |  4 ++++
 assets/sass/elements/_headings.scss   | 12 ++++++++++++
 assets/sass/elements/_html.scss       |  3 ++-
 assets/sass/main.scss                 |  5 +++--
 layouts/_default/single.html          |  4 +++-
 layouts/section/blog.html             |  6 +++++-
 8 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 assets/sass/elements/_blockquote.scss

diff --git a/assets/sass/components/_post.scss b/assets/sass/components/_post.scss
index 88918302..fac90592 100644
--- a/assets/sass/components/_post.scss
+++ b/assets/sass/components/_post.scss
@@ -10,3 +10,14 @@
     @include container
   }
 }
+
+.post__title {
+  margin-bottom: 0.25em;
+}
+
+.post__date {
+  color: $text-color-light;
+  font-size: 0.9rem;
+  margin-top: 0;
+  text-transform: uppercase;
+}
diff --git a/assets/sass/elements/_a.scss b/assets/sass/elements/_a.scss
index fcb088a3..5bf8ddad 100644
--- a/assets/sass/elements/_a.scss
+++ b/assets/sass/elements/_a.scss
@@ -1,3 +1,9 @@
 a {
   color: $link-color;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
 }
diff --git a/assets/sass/elements/_blockquote.scss b/assets/sass/elements/_blockquote.scss
new file mode 100644
index 00000000..1c8683fd
--- /dev/null
+++ b/assets/sass/elements/_blockquote.scss
@@ -0,0 +1,4 @@
+blockquote {
+  padding-left: 2rem;
+  border-left: 3px solid $text-color-light;
+}
diff --git a/assets/sass/elements/_headings.scss b/assets/sass/elements/_headings.scss
index 4243ef65..973080f9 100644
--- a/assets/sass/elements/_headings.scss
+++ b/assets/sass/elements/_headings.scss
@@ -4,3 +4,15 @@ h3 {
   font-family: $heading-font-family;
   font-weight: 700;
 }
+
+h3 {
+  font-size: 1.35rem;
+}
+
+h2 {
+  font-size: 1.6rem;
+}
+
+h1 {
+  font-size: 2rem;
+}
diff --git a/assets/sass/elements/_html.scss b/assets/sass/elements/_html.scss
index 19d4257e..be79b2ef 100644
--- a/assets/sass/elements/_html.scss
+++ b/assets/sass/elements/_html.scss
@@ -1,7 +1,8 @@
 html {
+  color: $text-color;
   font-family: $body-font-family;
+  font-size: calc(0.85vmin + 13px);
   font-style: normal;
   font-weight: 300;
-  font-size: calc(0.85vmin + 13px);
   line-height: 1.4;
 }
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 5d8baac6..d75cb56e 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -18,11 +18,12 @@
 // 4. Elements – styling for bare HTML elements (like H1, A, etc.).
 //    These come with default styling from the browser so we can redefine
 //    them here.
-@import "elements/html";
+@import "elements/a";
+@import "elements/blockquote";
 @import "elements/figure";
 @import "elements/headings";
+@import "elements/html";
 @import "elements/pre";
-@import "elements/a";
 
 // 5. Objects – class-based selectors which define undecorated design patterns,
 //    for example media object known from OOCSS
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9803d9fa..8fd9a4de 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,7 +1,9 @@
 {{ define "main" }}
   <article class="post">
     <header>
-      <h2>{{.Title}}</h2>
+      <h2 class="post__title">{{.Title}}</h2>
+
+      <p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
     </header>
 
     {{.Content}}
diff --git a/layouts/section/blog.html b/layouts/section/blog.html
index da002fbf..d0450c16 100644
--- a/layouts/section/blog.html
+++ b/layouts/section/blog.html
@@ -2,7 +2,11 @@
   <section class="blog-posts">
   {{ range .Pages }}
     <article class="post">
-      <h3><a href="{{.Permalink}}">{{.Title}}</a></h3>
+      <header>
+        <h3 class="post__title"><a href="{{.Permalink}}">{{.Title}}</a></h3>
+
+        <p class="post__date">{{.Date.Format "Jan 2, 2006"}}</p>
+      </header>
 
       {{ if .Truncated }}
         {{.Summary}}