CSS and dates, yay!

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;
+}

assets/sass/elements/_a.scss

@@ -1,3 +1,9 @@
 a {
   color: $link-color;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
 }

assets/sass/elements/_blockquote.scss

@@ -0,0 +1,4 @@
+blockquote {
+  padding-left: 2rem;
+  border-left: 3px solid $text-color-light;
+}

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;
+}

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;
 }

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

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}}

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}}

resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -310,12 +310,15 @@ html {
 *, *:before, *:after {
   box-sizing: inherit; }
 
-html {
-  font-family: "Mercury SSm A", "Mercury SSm B", serif;
-  font-style: normal;
-  font-weight: 300;
-  font-size: calc(0.85vmin + 13px);
-  line-height: 1.4; }
+a {
+  color: #1863a1;
+  text-decoration: none; }
+  a:hover, a:focus {
+    text-decoration: underline; }
+
+blockquote {
+  padding-left: 2rem;
+  border-left: 3px solid #a6a6a6; }
 
 figure {
   margin: 1em 0; }
@@ -326,6 +329,23 @@ h3 {
   font-family: "Gotham A", "Gotham B", sans-serif;
   font-weight: 700; }
 
+h3 {
+  font-size: 1.35rem; }
+
+h2 {
+  font-size: 1.6rem; }
+
+h1 {
+  font-size: 2rem; }
+
+html {
+  color: #333;
+  font-family: "Mercury SSm A", "Mercury SSm B", serif;
+  font-size: calc(0.85vmin + 13px);
+  font-style: normal;
+  font-weight: 300;
+  line-height: 1.4; }
+
 pre {
   overflow: auto;
   background: black;
@@ -333,9 +353,6 @@ pre {
   border-radius: 0.5rem;
   padding: 1em; }
 
-a {
-  color: #1863a1; }
-
 .container {
   margin-left: auto;
   margin-right: auto;
@@ -354,3 +371,12 @@ a {
     margin-left: auto;
     margin-right: auto;
     max-width: 40rem; }
+
+.post__title {
+  margin-bottom: 0.25em; }
+
+.post__date {
+  color: #a6a6a6;
+  font-size: 0.9rem;
+  margin-top: 0;
+  text-transform: uppercase; }