CSS optimizations

assets/css/_base.scss

@@ -20,25 +20,8 @@ body {
 }
 
 article header {
-    font-size: smaller;
-}
-
-a {
-    color: $anchor-color;
-    text-decoration: none;
-}
-
-pre {
-    font-size: smaller;
-    margin: 2em;
-    padding: 0.4em;
-    border: 1px dashed $border-color;
-    overflow: auto;
-    color: #f8f8f2;
-    background-color: #272822;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
+    font-size: small;
+    font-family: "DOS", "Lucida Console", "monospace";
 }
 
 img {
@@ -49,6 +32,11 @@ img {
     height: auto;
 }
 
+a {
+    color: $anchor-color;
+    text-decoration: none;
+}
+
 a.active {
     color: $anchor-active-color;
 }
@@ -58,6 +46,16 @@ a:hover {
     text-decoration: underline;
 }
 
+ul > li > span {
+    color: $text-color;
+}
+
+ul > li > span.date {
+    color: $text-color;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+
 ul {
     list-style: square;
 }
@@ -78,39 +76,3 @@ nav ul li {
     margin: auto;
     padding: 1em;
 }
-
-@media only screen and (max-width: 1024px) {
-    .goatpr0n-wide {
-        display: none;
-    }
-    .goatpr0n-small {
-        display: block;
-    }
-    .goatpr0n-minimal {
-        display: none;
-    }
-}
-
-@media only screen and (min-width: 1024px) {
-    .goatpr0n-wide {
-        display: block;
-    }
-    .goatpr0n-small {
-        display: none;
-    }
-    .goatpr0n-minimal {
-        display: none;
-    }
-}
-
-@media only screen and (max-width: 480px) {
-    .goatpr0n-small {
-        display: none;
-    }
-    .goatpr0n-wide {
-        display: none;
-    }
-    .goatpr0n-minimal {
-        display: block;
-    }
-}

assets/css/components/_code.scss

@@ -0,0 +1,12 @@
+pre {
+    font-family: "DOS", "Lucida Console", "monospace";
+    margin: 2em;
+    padding: 0.4em;
+    border: 1px dashed $border-color;
+    overflow: auto;
+    color: #f8f8f2;
+    background-color: #272822;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+}

assets/css/components/_goatpr0n.scss

@@ -0,0 +1,35 @@
+@media only screen and (max-width: 1024px) {
+    .goatpr0n-wide {
+        display: none;
+    }
+    .goatpr0n-small {
+        display: block;
+    }
+    .goatpr0n-minimal {
+        display: none;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .goatpr0n-wide {
+        display: block;
+    }
+    .goatpr0n-small {
+        display: none;
+    }
+    .goatpr0n-minimal {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .goatpr0n-small {
+        display: none;
+    }
+    .goatpr0n-wide {
+        display: none;
+    }
+    .goatpr0n-minimal {
+        display: block;
+    }
+}

assets/css/main.scss

@@ -19,4 +19,6 @@ $pre-background-color: {{ .Site.Params.style.preBackgroundColor | default "#2728
 
 @import "base";
 
+@import "components/code";
+@import "components/goatpr0n";
 @import "components/tag_lists";

layouts/_default/list.html

@@ -1,9 +1,9 @@
 {{ define "main" }}
 <div class="boxed">
     <p>
-    <ul>
+    <ul class="content-list">
         {{ range .Pages.ByPublishDate.Reverse }}
-        <li>[ {{ .PublishDate | time.Format "2006-01-01" }} ] <a href="{{ .Permalink }}">{{ .Title }}</a></li>
+        <li><span>[</span><span class="date">{{ .PublishDate | time.Format "2006-01-01" }}</span><span>]</span> <a href="{{ .Permalink }}">{{ .Title }}</a></li>
         {{ end }}
     </ul>
     </p>

layouts/_default/single.html

@@ -1,11 +1,10 @@
 {{ define "main" }}
 <div class="boxed">
-
   <article class="post">
     <header class="post-header">
       <h1 class ="post-title">{{ .Title }}</h1>
       {{- if ne .Type "page" }}
-      <div class="post-meta">
+      <div class="post-meta compact">
         <div>
             <span>Published:</span>
           {{ .PublishDate.Format "Jan 2, 2006" }}
@@ -32,4 +31,5 @@
     {{ .Content }}
     </div>
   </article>
+</div>
 {{ end }}