up

Author: geraldb

archive.html

@@ -8,11 +8,13 @@ <h1>Archive</h1>
 {% for post in site.posts %}
 
 <div>
-  {{ post.date | date: "%b %-d, %Y" }}
-     » 
-  <a href="{{ site.url }}{{ post.url }}">
-    {{ post.title }}
-  </a>
+  <span class='post-date'>
+    {{ post.date | date: "%b %-d, %Y" }}
+    »
+  </span>
+  <span class='post-title'>
+    <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a>
+  </span>
 </div>
 
 {% endfor %}

css/style.scss

@@ -10,7 +10,7 @@
 
 html {
   font-family: $font-family;
-  font-size: 20px;
+  font-size:   20px;
   line-height: 1.5;
 }
 
@@ -19,9 +19,8 @@ body {
   background-color: $body-background-color;
 }
 
-/**************
- * Links
- */
+//////////////
+// Links
 
 a {
   color:           $link-color;
@@ -38,15 +37,14 @@ a {
 }
 
 
-/******************************
- * Headings
- */
+////////////////////////////
+// Headings
 
 h1, h2, h3, h4, h5, h6 {
-  margin-bottom: .5rem;
-  font-weight: bold;
-  line-height: 1.25;
-  color:       $headings-color;
+  margin-bottom:  .5rem;
+  font-weight:    bold;
+  line-height:    1.25;
+  color:          $headings-color;
   text-rendering: optimizeLegibility;
 }
 h1 {
@@ -65,9 +63,8 @@ h4, h5, h6 {
   font-size: 1rem;
 }
 
-/********************
- * Body text
- */
+/////////////
+// Body text
 
 p {
   margin-top: 0;
@@ -78,7 +75,10 @@ strong {
   color: $strong-color;
 }
 
-/* Lists */
+
+/////////////
+// Lists
+
 ul, ol, dl {
   margin-top: 0;
   margin-bottom: 1rem;
@@ -92,9 +92,8 @@ dd {
 }
 
 
-/**********************
- * Code
- */
+//////////////////////
+// Code
 
 code,
 pre {
@@ -122,7 +121,9 @@ pre {
 }  
 
 
-/* Quotes */
+/////////////////////
+// Quotes
+
 blockquote {
   padding: .5rem 1rem;
   margin: .8rem 0;
@@ -142,9 +143,10 @@ img {
   border-radius: 5px;
 }
 
-/*****************
- * Tables
- */
+
+//////////////////////
+// Tables
+
 table {
   margin-bottom: 1rem;
   width: 100%;
@@ -165,10 +167,9 @@ table {
 
 
 
-/*************************
- * Container
- * -- Center the page content.
- */
+////////////////////////////////
+//  Container
+//   -- centers page content
 
 .container {
   max-width: 38rem;
@@ -178,9 +179,8 @@ table {
   margin-right: auto;
 }
 
-/*******************************
- * Masthead
- */
+///////////////////////////////////////////////////
+//  Masthead
 
 .masthead {
   padding-top:    1rem;
@@ -206,29 +206,30 @@ table {
 }
 
 
-/**************************
- * Posts
- */
+//////////////////////////
+// Posts
 
 .post {
   margin-bottom: 4em;
+
+  // note: only change margin for title,date if inside post block
+  .post-title {
+    margin-top: 0;
+  }
+
+  // Meta data line below post title
+  .post-date {
+    display: block;
+    margin-top:  -.5rem;
+    margin-bottom: 1rem;
+  }
 }
 
-/* Blog title */
 .post-title,
 .post-title a {
   color: $post-title-color;
 }
 
-.post-title {
-  margin-top: 0;
-}
-
-/* Meta data line below post title */
 .post-date {
-  display: block;
-  margin-top:  -.5rem;
-  margin-bottom: 1rem;
-  color: $post-date-color;
+  color: $post-date-color;  
 }
-