rework code snippets to work according to Jerod's extremely strict pr…

…eference

_includes/excerpt.html

@@ -1,5 +1,7 @@
 <article class="excerpt">
-  <h1 class="excerpt-header"><a href="{{ post.url }}/">{{ post.title }}</a></h1>
-  <p class="excerpt-date">{{ post.date | date_to_string }}</p>
-  <p class="excerpt-text">{{ post.excerpt }}</p>
+  <a href="{{ post.url }}/">
+    <h1 class="excerpt-header">{{ post.title }}</h1>
+    <p class="excerpt-date">{{ post.date | date_to_string }}</p>
+    <p class="excerpt-text">{{ post.excerpt }}</p>
+  </a>
 </article>

_source/css/base/mixins.scss

@@ -7,33 +7,9 @@
   @media #{$tablet-query} {
     margin: 0 20px;
   }
-}
-
-.fill {
-  // Fills it's parent element
-  @include clearfix;
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.fill-width {
-  // Fills parent element's width but height is dynamic
-  @extend .fill;
-  height: auto;
-}
-
-.centered-absolute {
-  // Center an element inside it's parent
-  display: block;
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  margin-top: -0.5em;
+  @media #{$tiny-query} {
+    margin: 0;
+  }
 }
 
 .hide-text {
@@ -47,6 +23,6 @@
 /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
 .visually-hidden.focusable:active, .visually-hidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
 
-.align-right {
-  text-align: right;
-}
+.align-left { text-align: right; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }

_source/css/base/variables.scss

@@ -4,7 +4,7 @@ $huge: 1280px;
 $desktop: 781px;
 $tablet: $desktop - 1;
 $mobile: 480px;
-$tiny: 320px;
+$tiny: 360px;
 $huge-query: "only screen and (min-width: #{$huge})";
 $desktop-query: "only screen and (min-width: #{$desktop})";
 $tablet-query: "only screen and (max-width: #{$tablet})";

_source/css/components/_all.scss

@@ -3,6 +3,7 @@
 @import "home";
 @import "footnotes";
 @import "excerpts";
+@import "archive";
 @import "post";
 @import "pagination";
 @import "syntax";

_source/css/components/archive.scss

@@ -0,0 +1,18 @@
+.category-list {
+  @include clearfix;
+  list-style-type: none;
+  margin: 20px 40px;
+  padding: 0;
+  text-align: center;
+  font-size: 1.25em;
+  letter-spacing: 0.1em;
+  li {
+    width: 50%;
+    float: left;
+    margin: 0;
+    padding: 0;
+    a {
+      color: $blue;
+    }
+  }
+}

_source/css/components/excerpts.scss

@@ -1,15 +1,18 @@
 .excerpt {
   margin: 30px 0 0;
   p { margin: 0; }
+  a:hover h1 {
+    color: $red;
+  }
 }
 
 .excerpt-header {
   font-size: 1.2em;
+  line-height: 1em;
   text-transform: uppercase;
   margin: 0;
-  &, a {
-    color: $orange;
-  }
+  color: $orange;
+  @include transition(color 0.3s ease-in-out);
 }
 
 .excerpt-date {
@@ -18,25 +21,10 @@
   font-style: italic;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  margin: 4px 0 6px;
+  margin: 4px 0 2px !important;
 }
 
 .excerpt-text {
   @extend .font-serif;
   color: $grey;
 }
-
-.category-list {
-  list-style-type: none;
-  margin: 20px 0;
-  padding: 0;
-  text-align: center;
-  font-size: 1.5em;
-  li {
-    margin: 0;
-    padding: 0;
-    a {
-      color: $orange;
-    }
-  }
-}

_source/css/components/footer.scss

@@ -3,6 +3,9 @@
   margin-bottom: 80px;
   padding: 0;
   font-size: 0.8em;
+  @media #{$tiny-query} {
+    padding: 0 $gutter-mobile;
+  }
   p, a { color: $grey; }
   a { font-weight: bold; }
 }

_source/css/components/header.scss

@@ -17,7 +17,10 @@
     left: 50%;
     margin: 0 0 0 -100px;
   }
-  a { color: $grey1; }
+  a {
+    color: $grey1;
+    &:hover { color: $white; }
+  }
   a.main-header-archive {
     margin-right: 140px;
   }

_source/css/components/home.scss

@@ -1,6 +1,5 @@
 .main-wrapper {
   @extend .wrap;
-  padding: 10px $gutter-desktop $gutter-desktop;
   background: $white;
   border-radius: $radius;
   padding: 10px $gutter-desktop $gutter-desktop;
@@ -17,12 +16,8 @@
     text-transform: uppercase;
     margin: 0;
     line-height: 1em;
-    &, a {
-      color: $red;
-    }
+    &, a { color: $red; }
   }
   h1 { font-size: 2em; }
-  h2 {
-    margin-top: 10px;
-  }
+  h2 { margin-top: 10px; }
 }

_source/css/components/post.scss

@@ -51,12 +51,16 @@
     }
   }
   .highlight-wrap {
-    overflow: scroll;
+    overflow-x: auto;
     background: $navy;
   }
+  .highlight-scroll-wrap {
+    width: 9999px;
+  }
   .highlight {
-    width: 700px;
     background: $navy;
+    width: auto;
+    display: inline-block;
     padding-top: 20px;
     padding-bottom: 20px;
     pre { margin: 0; }

_source/css/styles.scss

@@ -7,7 +7,6 @@
 
 body {
   @extend .font-sans;
-  min-width: 320px;
   font-size: 18px;
   background: $navy;
   background-position: center 70px;

_source/js/site.js

@@ -34,7 +34,14 @@
         blog.sharePopup($(this).attr('href'));
         return false;
       });
-      $('.highlight').wrap('<div class="highlight-wrap"></div>');
+      $('.highlight').each(function() {
+        var $this, snippetWidth;
+        $this = $(this);
+        $this.wrap('<div class="highlight-wrap" />');
+        $this.wrap('<div class="highlight-scroll-wrap" />');
+        snippetWidth = $this.width();
+        return $this.parent('.highlight-scroll-wrap').css('width', snippetWidth);
+      });
       randos = ["Whathaveyou", "Tomfoolery", "Jetsam", "Rants", "Highjinks", "Flotsam", "Rando Calrissian"];
       $("#rando").text(randos[Math.floor(Math.random() * randos.length)]);
       $("#content img").each(function() {

_source/js/site.js.coffee

@@ -32,7 +32,12 @@ blog =
       blog.sharePopup $(this).attr 'href'
       false
 
-    $('.highlight').wrap '<div class="highlight-wrap"></div>'
+    $('.highlight').each ->
+      $this = $(this)
+      $this.wrap '<div class="highlight-wrap" />'
+      $this.wrap '<div class="highlight-scroll-wrap" />'
+      snippetWidth = $this.width()
+      $this.parent('.highlight-scroll-wrap').css 'width', snippetWidth
 
     # TODO: Blog home only
     randos = [

archives/index.html

@@ -11,7 +11,11 @@ <h1>Categories</h1>
   <ul class="category-list">
     {% for category in site.categories %}
       {% assign name = category[0] %}
-      <li><a href="/{{ name }}" title="{{ name }}">{{ name | capitalize }}</a></li>
+      <li>
+        <a href="/{{ name }}" title="{{ name }}">
+          {{ name | capitalize }}
+        </a>
+      </li>
     {% endfor %}
   </ul>
 

js/compiled.js

@@ -11701,7 +11701,14 @@ return jQuery;
         blog.sharePopup($(this).attr('href'));
         return false;
       });
-      $('.highlight').wrap('<div class="highlight-wrap"></div>');
+      $('.highlight').each(function() {
+        var $this, snippetWidth;
+        $this = $(this);
+        $this.wrap('<div class="highlight-wrap" />');
+        $this.wrap('<div class="highlight-scroll-wrap" />');
+        snippetWidth = $this.width();
+        return $this.parent('.highlight-scroll-wrap').css('width', snippetWidth);
+      });
       randos = ["Whathaveyou", "Tomfoolery", "Jetsam", "Rants", "Highjinks", "Flotsam", "Rando Calrissian"];
       $("#rando").text(randos[Math.floor(Math.random() * randos.length)]);
       $("#content img").each(function() {