cosy-jekyll-theme 1.0.5 → 1.0.6

data/_sass/_page.scss

@@ -20,14 +20,64 @@ body {
   display: block;
 }
 
-.hentry-dark {
-  background-color: $header-color;
-}
-
 .entry-content {
   @include font-size(16);
+  position: relative;
   word-wrap: break-word;
-  // Dotted line underlines for links
+  .page-info {
+    color: rgba(85, 85, 85, 0.8);
+    @include font-size(14);
+    font-weight: normal;
+    margin: -5px 2px 0;
+    position: relative;
+    time {
+      margin: 0 20px;
+    }
+    .qr-text {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA9ElEQVRYR9VXWw7DIAwbN+Yo3HjTJqUfqSI/FNaWvwpIjeOYMOac75cw1lrjuzz2xXeEUOMNdcM2APkkmRR0YgSsincwcBsAOSXVyVRGgoEc78TAYwBk1SOm2hnYBqCyhJxzVgMonl0F7QBYM6ycL2uAjWc7IdIADYBdyDqjGu93sTij0oAaqzQiVNeVdaNqyfPXA6jEhHKunrRaf2gA5bTrh6fLSBWNygxab1cB8gFWpLYRdaXkPgB2tWSIKfs2ZDUgA3BbMreM23rCvwNwU5B9wWZgGwDUw7EvICS+mLerwM15+TBh7wS2J2T7CdsJXQ1k5j7FF35r3ynsoAAAAABJRU5ErkJggg==) no-repeat;
+      background-size: 16px 16px;
+      width: 16px;
+      height: 16px;
+      display: none;
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        top: -20px;
+        right: -20px;
+        bottom: -20px;
+        left: -20px;
+      }
+      &:hover {
+        .qr-code {
+          width: 128px;
+          opacity: 1;
+          @include transform(none)
+        }
+      }
+    }
+    .qr-code {
+      position: absolute;
+      opacity: 0;
+      @include transition(0.3s all ease-in-out);
+      @include transform(scale(0) perspective(60px) rotateX(50deg));
+      width: 0;
+      left:-4px;
+      top:-4px;
+      z-index: 10;
+      >img{
+        box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.5);
+        padding: 4px;
+        background-color: #fff;
+      }
+    }
+    @media #{$medium}{
+      @include font-size(16);
+      .qr-text {
+        display: inline-block;
+      }
+    }
+  }
   p > a,
   li > a {
     border-bottom: 1px dotted lighten($link-color, 50);
@@ -38,7 +88,6 @@ body {
 }
 
 ///sections
-
 .content-header-title {
   text-align: center;
   margin: 30px 0 0;
@@ -103,11 +152,6 @@ body {
   a {
     color: lighten($base-color, 60);
   }
-  .vcard {
-    &:before {
-      content: "BYB";
-    }
-  }
   .tag {
     display: inline-block;
     margin: 4px;
@@ -126,29 +170,18 @@ body {
       background-color: lighten($base-color, 40);
     }
   }
-  .entry-reading-time {
-    float: right;
-  }
-}
-
-header .entry-meta {
-  display: none; // hide header meta on small screens
-  @media #{$medium} {
-    display: block;
-  }
 }
 
 #post,
 #page {
   .entry-content {
-    margin: 20px 2px 20px 2px;
+    margin: 80px 2px 20px 2px;
     padding: 10px 15px;
     background-color: $white;
     box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
     @include rounded(3px);
     @media #{$medium} {
-      margin-left: 10px;
-      margin-right: 10px;
+      margin: 30px 10px;
       padding: 20px 30px;
     }
     @media #{$large} {
@@ -194,7 +227,13 @@ header .entry-meta {
 }
 
 .tag-list {
-  line-height: 1.5;
+  line-height: 1.6;
+  .tag-time {
+    display: none;
+    @media #{$medium} {
+      display: inline-block;
+    }
+  }
 }
 
 // Go to the exact location of bookmarks in tags, categories
@@ -212,7 +251,7 @@ header .entry-meta {
 
 // Post Pagination Module
 .pagination {
-  margin: 20px 10px;
+  margin: 36px 10px 0;
   text-align: center;
   ul {
     display: inline;
@@ -230,6 +269,7 @@ header .entry-meta {
 
 // Read More Module
 .read-more {
+  display: block;
   position: relative;
   margin: 40px 2px 20px 2px;
   padding: 40px 15px 25px;
@@ -237,13 +277,13 @@ header .entry-meta {
   box-shadow: 0 0 0 1px rgba($border-color, 0.1), 0 6px 12px rgba($black, 0.1);
   @include rounded(3px);
   @media #{$medium} {
-    margin: 50px 10px 20px 10px;
+    margin: 40px 10px 30px 10px;
     padding: 50px 40px 25px;
   }
   @media #{$large} {
     max-width: 800px;
     padding: 50px 80px;
-    margin: 60px auto;
+    margin: 50px auto 30px;
   }
   text-align: center;
   @include clearfix;
@@ -255,14 +295,14 @@ header .entry-meta {
   left: 0;
   right: 0;
   height: 35px;
-  a {
+  .read-more-btn {
     @extend .btn;
   }
 }
 
 .read-more-content {
   @include font-size(16);
-  // Dotted line underlines for links
+  margin-bottom: 0;
   p {
     text-align: left;
   }
@@ -275,7 +315,10 @@ header .entry-meta {
   }
   h3 {
     margin: 0;
-    @include font-rem(28);
+    @include font-rem(20);
+    @media #{$medium} {
+      @include font-rem(28);
+    }
     a {
       color: $text-color;
     }
@@ -297,45 +340,18 @@ header .entry-meta {
   padding-left: 5px;
 }
 
-.read-more-list {
-  border-top: solid 2px lighten($base-color, 80);
-}
-
-.list-item {
-  width: 100%;
-  text-align: left;
-  h4 {
-    @include font-rem(18);
-    margin-bottom: 0;
-  }
-  span {
-    display: block;
-    @include font-rem(14);
-    color: lighten($base-color, 50);
-  }
-  @media #{$medium} {
-    width: 49%;
-    float: left;
-    &:nth-child(2) {
-      text-align: right;
-    }
-  }
-}
-
 // Post Index
 // --------------------------------------------------
 #post-index {
   #main {
-    margin: 20px 2px 20px 2px;
+    margin: 80px 2px 20px 2px;
+    overflow: hidden;
     @media #{$medium} {
-      margin-left: 20px;
-      margin-right: 20px;
+      margin: 20px;
     }
     @media #{$large} {
       max-width: 800px;
-      margin-top: 50px;
-      margin-left: auto;
-      margin-right: auto;
+      margin: 30px auto 0;
     }
   }
   article {
@@ -355,22 +371,13 @@ header .entry-meta {
 }
 
 .entry-image-index {
-  margin-top: -25px;
-  margin-left: -15px;
-  margin-right: -15px;
-  margin-bottom: 10px;
+  margin: -25px -15px 10px -15px;
   position: relative;
   @media #{$medium} {
-    margin-top: -30px;
-    margin-left: -30px;
-    margin-right: -30px;
-    margin-bottom: 15px;
+    margin: -30px -30px 15px -30px;
   }
   @media #{$large} {
-    margin-top: -50px;
-    margin-left: -80px;
-    margin-right: -80px;
-    margin-bottom: 20px;
+    margin: -50px -80px 20px -80px;
   }
   img {
     @include border-radius(3px, 0, 0, 3px); // round image corners
@@ -381,14 +388,19 @@ header .entry-meta {
 // --------------------------------------------------
 .footer-wrapper {
   @include clearfix;
-  margin: 0 auto 20px auto;
+  margin: 14px auto 30px auto;
   text-align: center;
   color: lighten($text-color, 20);
+  @include font-rem(14);
+  @media #{$medium} {
+    margin: 8px auto 35px auto;
+  }
   a {
     color: lighten($text-color, 20);
   }
 }
 
+
 // Browser Upgrade
 // --------------------------------------------------
 .upgrade {
@@ -418,8 +430,8 @@ header .entry-meta {
   @include font-rem(14);
   background-color: $white;
   color: $text-color;
-  border-width: 2px !important;
-  border-style: solid !important;
+  border-width: 2px ;
+  border-style: solid ;
   border-color: lighten($primary, 50);
   @include rounded(3px);
 }
@@ -429,62 +441,23 @@ header .entry-meta {
 }
 
 // Header
-// --------------------------------------------------
 .entry-header {
-  width: 100%;
-  overflow: hidden;
   position: relative;
-  width: 100%;
   overflow: hidden;
-  height: 60px;
-  @media #{$medium} {
-    background-color: $header-color;
-    min-height: 260px;
-  }
-}
-
-.header-title {
-  margin-top: 0;
   width: 100%;
-  overflow: hidden;
-  line-height: 1;
+  height: 260px;
+  background: $header-color;
   display: none;
-  @media #{$medium} {
-    @include flexbox();
-    @include align-items(center);
-    @include justify-content(center);
-    @include flex-direction(column);
-    min-height: 200px;
+  svg {
     margin-top: 60px;
   }
-  h2 {
-    color: $white;
+  canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
   }
-  h1 {
-    font-weight: 700;
-    margin-bottom: 20px;
-    @include font-rem(32);
-    color: $white;
-    text-shadow: 1px 1px 4px rgba($base-color, 0.6);
-    display: block;
-    a {
-      color: $white;
-    }
-    @media #{$medium} {
-      @include font-rem(26);
-    }
-    @media #{$large} {
-      @include font-rem(36);
-    }
-  }
-  h1.post-title {
+  @media #{$medium} {
     display: block;
-    @media #{$medium}{
-      display: none;
-    }
-  }
-  p {
-    color: $white;
   }
 }
 
@@ -493,13 +466,14 @@ header .entry-meta {
   top: 0;
   left: 0;
   width: 100%;
-  height: $menu-height;
   z-index: 20;
+  overflow: hidden;
+  background-color: $menu-top;
+  height: $menu-height;
+  box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
   @media #{$medium} {
     position: fixed;
-    &.header-menu-top{
-      box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
-    }
+    @include transition(0.3s height ease-out);
   }
   ul {
     margin: 0 auto;
@@ -512,28 +486,10 @@ header .entry-meta {
   }
 }
 
-.header-menu-top {
-  background-color: $menu-top;
-  box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
-}
-
 .header-menu-overflow {
-  background-color: $menu-overflow;
-  z-index: 100;
-  box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
-  display: none;
-}
-
-.header-menu-overflow ul li a {
-  color: $white;
-}
-
-.header-menu-top .sub-item {
-  background-color: $menu-top;
-}
-
-.header-menu-overflow .sub-item {
-  background-color: $menu-overflow;
+  @media #{$medium} {
+    height: 0;
+  }
 }
 
 .header-item,
@@ -541,16 +497,21 @@ header .entry-meta {
   float: right;
   padding-left: 20px;
   padding-right: 20px;
-  border-top-color: transparent;
-  border-top-style: solid;
-  border-top-width: 5px;
-  box-sizing: border-box;
-
   a {
     vertical-align: middle;
     display: table-cell;
-    height: $menu-height - 2;
-    font-size: 12px;
+    height: $menu-height;
+    @include font-rem(16);
+    box-sizing: border-box;
+    font-weight: 600;
+    &:visited {
+      color: $text-color;
+    }
+  }
+  &.active, &:hover {
+    a {
+      color: $header-active;
+    }
   }
 }
 
@@ -581,93 +542,90 @@ header .entry-meta {
     font-size: 1.5rem;
     padding-left: 5px;
     vertical-align: middle;
-    height: $menu-height - 2;
+    height: $menu-height;
     @media #{$medium}{
       display: table-cell;
     }
   }
 }
 
-.header-item.active,
-.header-item:hover {
-  border-top-color: $header-margin;
-}
-
-.header-item:hover .header-submenu {
+.header-href {
   display: block;
-  position: absolute;
 }
 
-.header-submenu {
-  display: none;
-  border-top: 2px solid $header-margin;
-  width: 200px;
-  z-index: 100;
-  list-style-type: none;
-  transform: translateX(-25%);
+.index-content-time {
+  margin-left: -6px;
 }
 
-.sub-item {
+.video-container {
   position: relative;
-  padding-left: 10px;
-  width: 100%;
-  border-bottom: 1px solid gray;
-  border-left: 1px solid;
-  height: 50px;
-  text-decoration: none;
-}
-
-.sub-item a {
-  vertical-align: middle;
-  display: table-cell;
-  height: 50px;
-}
-
-.sub-item:hover {
-  border-bottom-color: $header-margin;
-  border-left-color: $header-margin;
+  padding-bottom: 75%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }
 
-.button-twitter {
-  color: $white;
-  position: fixed;
-  margin-top: $menu-height / 2 - 20;
-  margin-right: 10px;
-  top: 0;
-  right: 0;
-  z-index: 10000000000;
-  @media #{$large}{
-    top: auto;
-    bottom: 0;
+.coffee{
+  width: 100%;
+  @include flexbox();
+  @include flex-direction(column);
+  @include align-items(center);
+  margin:20px 0 15px;
+  @media #{$medium} {
+    margin: 40px 0 -20px;
   }
-
-  span {
-    display: none;
-    @media #{$medium}{
-      display: inline;
+  .buy-me-coffee{
+    @extend .btn;
+    margin: 0 auto;
+    position: relative;
+    height: 36px;
+    width: 174px;
+    padding-left: 38px;
+    font-size: 16px;
+    line-height: 18px;
+    text-align: center;
+    @include text-overflow(clip);
+    cursor: pointer;
+    @include user-select(none);
+    &:hover{
+      background-color: #222;
+      color: #fff;
     }
-  }
-}
-
-footer {
-  font-size: 13px;
-}
-
-.entry-content{
-  position: relative;
-  .page-info{
-    color: rgba(85,85,85,0.8);
-    font-size: 14px;
-    font-weight: normal;
-    margin: -15px 2px 0;
-    time{
-      margin-left: 20px;
+    &.active{
+      background-color: #fff;
+      color: #222;
     }
-    @media #{$medium}{
-      font-size: 16px;
+    &::after{
+      content: "";
+      position: absolute;
+      top: 12px;
+      left: 10px;
+      width: 20px;
+      height: 13px;
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjE4MS45ODgybW0iICAgaGVpZ2h0PSIxMTUuOTU2MjltbSIgICB2aWV3Qm94PSIwIDAgNjQ0Ljg0MDEgNDEwLjg2ODc1IiAgIGlkPSJzdmc0MjM4IiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJjdXBsb2dvLnN2ZyI+ICA8ZGVmcyAgICAgaWQ9ImRlZnM0MjQwIiAvPiAgPHNvZGlwb2RpOm5hbWVkdmlldyAgICAgaWQ9ImJhc2UiICAgICBwYWdlY29sb3I9IiNmZmZmZmYiICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIgICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOnpvb209IjAuMzUiICAgICBpbmtzY2FwZTpjeD0iNzgwLjI3NzE4IiAgICAgaW5rc2NhcGU6Y3k9Ii0yMTQuNTY1NjEiICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiICAgICBzaG93Z3JpZD0iZmFsc2UiICAgICBmaXQtbWFyZ2luLXRvcD0iMCIgICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIgICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4MCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjY5OSIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjEiICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAvPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjQzIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGcgICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIgICAgIGlkPSJsYXllcjEiICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzcuNTc5OTY0LC0xMzUuNDk5MjcpIj4gICAgPGcgICAgICAgaWQ9Imc0MCIgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4xNDIxNTI4LDAsMCwtMS4xNDIxNTI4LDI2NS45MzM5OCw0NjAuNzMwOTUpIj4gICAgICA8ZyAgICAgICAgIGlkPSJnNDE4NCI+ICAgICAgICA8cGF0aCAgICAgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgICAgIGlkPSJwYXRoMzgiICAgICAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIiAgICAgICAgICAgZD0ibSAwLDAgYyAtMTkuOTQ2LC0yLjQ5MiAtMzYuMTUxLC0wLjYyMiAtMzYuMTUxLC0wLjYyMiBsIDAsMTIyLjEzMiAzOC4wMiwwIGMgMCwwIDQyLjM4NSwtMTEuODM5IDQyLjM4NSwtNTYuNzA0IEMgNDQuMjU0LDIzLjY4IDIzLjA2Myw3LjQ3OCAwLDAgTSAxMDUuMDYzLDg1LjczOSBDIDg4LjQzNSwxNzMuNTYgMC42MjQsMTg0LjQ3MyAwLjYyNCwxODQuNDczIGwgLTM5My4zMzMsMCBjIC0xMi45OSwwIC0xNC41ODgsLTE3LjE0OCAtMTQuNTg4LC0xNy4xNDggMCwwIC0xLjc1MiwtMTU3LjQzIC0wLjQ4MSwtMjU0LjExMiAzLjUyNCwtNTIuMDkzIDU1LjU5NywtNTcuNDM1IDU1LjU5NywtNTcuNDM1IDAsMCAxNzcuNzAxLDAuNTIgMjU3LjIsMS4wMzkgNTIuNDEsOS4xODEgNTcuNjc0LDU1LjE1NSA1Ny4xNTUsODAuMyA5My41MjcsLTUuMTk2IDE1OS41MTUsNjAuOCAxNDIuODg5LDE0OC42MjIiICAgICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjA5NDQyNDUsMCwwLDEuMDk0NDI0NSwyNDYuODU1MzYsODIuODYxNDQ2KSIgLz4gICAgICAgIDxwYXRoICAgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAgICAgICAgICAgaWQ9InBhdGg0MiIgICAgICAgICAgIHN0eWxlPSJmaWxsOiNmZjVmNWY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiICAgICAgICAgICBkPSJtIDAsMCBjIDQuNDQ1LC0yLjIzOCA3LjI4NSwwLjU0MyA3LjI4NSwwLjU0MyAwLDAgNjUuMDQ1LDU5LjM2NyA5NC4zNDgsOTMuNTU3IDI2LjA2MywzMC41ODYgMjcuNzYyLDgyLjEyOSAtMTYuOTk3LDEwMS4zODggLTQ0Ljc1OCwxOS4yNTggLTgxLjU4NCwtMjIuNjU3IC04MS41ODQsLTIyLjY1NyAtMzEuOTM1LDM1LjEyMyAtODAuMjY4LDMzLjM0NSAtMTAyLjYyMyw5LjU3NSAtMjIuMzU0LC0yMy43NyAtMTQuNTQ4LC02NC41NjggMi4xMjksLTg3LjI3NCAxNS42NTUsLTIxLjMxNCA4NC40NjUsLTgyLjY0NCA5NC44OTQsLTkzLjAxNiAwLDAgMC43NiwtMC43OTUgMi41NDgsLTIuMTE2IiAvPiAgICAgIDwvZz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);
+      background-size: 20px 13px;
+    }
+  }
+  .my-pay-img{
+    width: 360px;
+    display: block;
+    overflow: hidden;
+    height: 0;
+    @include transition(0.5s all ease-in-out);
+    @include transform(scale(0) perspective(360px) rotateX(60deg));
+    &.active{
+      height: 489px;
+      @include transform(none);
     }
   }
-}
-.header-href{
-  display: block;
 }

data/_sass/_rouge.scss

@@ -8,8 +8,9 @@
 	pre {
 		position: relative;
 		margin: 0;
-		padding: 1em;
-	}
+		padding: 0.7em;
+    @include font-rem(14);
+  }
 	.lineno { padding-right: 24px; color: #8f908a;}
 	.hll { background-color: #49483e }
 	.c { color: #75715e } /* Comment */
@@ -70,4 +71,4 @@
 	.vg { color: #f8f8f2 } /* Name.Variable.Global */
 	.vi { color: #f8f8f2 } /* Name.Variable.Instance */
 	.il { color: #ae81ff } /* Literal.Number.Integer.Long */
-}
+}

data/_sass/_typography.scss

@@ -11,7 +11,8 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: $heading-font;
 }
 h1 {
-	@include font-rem(28);
+	@include font-rem(24);
+  margin: 12px 0;
 	@media #{$medium} {
 		@include font-rem(32);
 	}
@@ -19,22 +20,22 @@ h1 {
 
 // Links
 // --------------------------------------------------
-a { 
+a {
 	text-decoration: none;
-	color: $link-color; 
-	&:visited { 
-		color: lighten($link-color, 20); 
+	color: $link-color;
+	&:visited {
+		color: lighten($link-color, 20);
 	}
-	&:hover { 
-		color: darken($link-color, 20); 
+	&:hover {
+		color: darken($link-color, 20);
 	}
-	&:focus { 
-		outline: thin dotted; 
+	&:focus {
+		outline: thin dotted;
 		color: darken($link-color, 20);
 	}
-	&:hover, 
-	&:active { 
-		outline: 0; 
+	&:hover,
+	&:active {
+		outline: 0;
 	}
 }
 
@@ -97,7 +98,7 @@ tt, code, kbd, samp, pre {
 	font-family: $code-font;
 }
 p,
-li { 
+li {
 	code {
 		@include font-rem(12);
 		line-height: 1.5;

data/_sass/_variables.scss

@@ -19,8 +19,7 @@ body {
 // --------------------------------------------------
 $base-color: rgba(#222, 0.8);
 $header-color: #000;
-$sub-item-color: rgba(#000, 0.1);
-$header-margin: #000;
+$header-active: #000;
 $menu-top: white;
 $menu-height: 60px;
 $menu-overflow: #000;