re-organize templates (use baseof.html)

assets/sass/pages/_home.scss

@@ -5,19 +5,9 @@ main#home {
   font-size: 1.4em;
   font-weight: 300;
   max-width: 980px;
-  padding: 1.5em 1.75em;
+  padding: 1.5em 1.75em 0.5em 1.75em;
   margin: 0 auto;
 
-  a {
-    // Loop through $colors-home -- the main reason I switched to SASS :)
-    @each $id, $color in $colors-home {
-      &##{$id} {
-        color: $color;
-        background-image: underline-hack($color);
-      }
-    }
-  }
-
   h2 {
     margin: 0 0 0.6em 0;
     font-size: 1.4em;
@@ -52,22 +42,6 @@ main#home {
     vertical-align: middle;
   }
 
-  img#me {
-    float: right;
-    margin: 0 0 0.75em 0.75em;
-    padding: 4px;
-    border: 1px solid $color-super-light;
-    width: 160px;
-    height: 160px;
-  }
-
-  // easter egg emoji cursor
-  a#birthday {
-    &:hover {
-      cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
-    }
-  }
-
   // non-link colors
   span {
     &#serverless {
@@ -79,13 +53,39 @@ main#home {
     }
   }
 
-  p#blog {
-    font-size: 0.9em;
-    margin-bottom: 0;
-
-    span {
-      margin-right: 4px;
+  a {
+    // Loop through $colors-home -- the main reason I switched to SASS :)
+    @each $id, $color in $colors-home {
+      &##{$id} {
+        color: $color;
+        background-image: underline-hack($color);
+      }
     }
+
+    &#blog {
+      font-size: 0.9em;
+      margin-bottom: 0;
+  
+      span {
+        margin-right: 4px;
+      }
+    }
+
+    // easter egg emoji cursor
+    &#birthday {
+      &:hover {
+        cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
+      }
+    }
+  }
+
+  img#me {
+    float: right;
+    margin: 0 0 0.5em 1em;
+    padding: 4px;
+    border: 1px solid $color-super-light;
+    width: 160px;
+    height: 160px;
   }
 }
 
@@ -94,14 +94,13 @@ main#home {
 @mixin responsive--home() {
   main#home {
     font-size: 1.1em;
-  
-    p, p#blog {
-      font-size: 1.1em;
-    }
+    line-height: 1.6;
+    padding: 1em 1.2em 0.5em 1.2em;
   
     img#me {
-      width: 100px;
-      height: 100px;
+      width: 85px;
+      height: 85px;
+      margin: 0 0 0.3em 0.6em;
       padding: 2px;
     }
   }  

assets/sass/pages/_single.scss

@@ -7,41 +7,6 @@ main#single {
   margin: 0 auto;
 
   article div {
-    &#meta {
-      color: $color-light;
-      font-size: 0.85em;
-      line-height: 1.5;
-      letter-spacing: 1px;
-
-      a {
-        color: inherit;
-      }
-
-      div#tags {
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        margin-top: 0.5em;
-
-        span.tag {
-          margin: 0 0.6em;
-        }
-      }
-    }
-
-    &#info {
-      text-align: center;
-
-      h1 {
-        margin: 0.3em 0;
-        font-size: 2em;
-        line-height: 1.4;
-
-        a {
-          color: inherit;
-        }
-      }
-    }
-
     &#content {
       font-weight: 400;
       line-height: 1.8;
@@ -49,8 +14,7 @@ main#single {
       h1,
       h2,
       h3 {
-        margin-top: 0.9em;
-        margin-bottom: 0.5em;
+        margin: 0.5em 0;
         font-weight: 500;
         line-height: 1.5;
       }
@@ -95,10 +59,13 @@ main#single {
         }
       }
 
+      // https://css-tricks.com/examples/hrs/
       hr {
-        width: 60%;
-        margin: 0.75em auto;
-        border: 1px solid $color-super-light;
+        width: 90%;
+        margin: 1.5em auto;
+        border: 0;
+        height: 2px;
+        background-image: linear-gradient(to right, #ffffff, #cccccc, #ffffff);
       }
 
       video.embed {
@@ -147,7 +114,6 @@ main#single {
       pre code {
         display: block;
         padding: 1em 1.5em;
-        margin: 1.4em 0;
         line-height: 1.6;
         border-left: 3px solid $color-links;
         max-width: 100%;
@@ -156,6 +122,44 @@ main#single {
         object-fit: scale-down;
       }
     }
+
+    &#meta {
+      text-align: center;
+
+      h1 {
+        margin: 0.3em 0;
+        font-size: 2em;
+        line-height: 1.4;
+
+        a {
+          color: inherit;
+        }
+      }
+
+      div#byline {
+        color: $color-light;
+        font-size: 0.85em;
+        line-height: 1.5;
+        letter-spacing: 1px;
+
+        a {
+          color: inherit;
+        }
+
+        ul#tags {
+          margin-top: 0.5em;
+          padding: 0;
+          list-style: none;
+
+          li {
+            display: inline;
+            margin: 0 0.7em;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+          }
+        }
+      }
+    }
   }
 }
 

assets/sass/pages/_videos.scss

@@ -9,7 +9,7 @@ main#video {
     font-size: 0.85em;
     line-height: 1.5em;
     color: #777777;
-    margin: 20px 10px;
+    margin: 1.25em;
   }
 
   a {
@@ -28,12 +28,12 @@ main#video {
 @mixin responsive--videos() {
   main#video {
     margin: 20px 0;
-  
+
     h1 {
       font-size: 1.6em;
       padding: 0 15px;
     }
-  
+
     video {
       width: 100%;
       height: auto;