0.9.4

- Basic MU support

assets/css/screen.css

@@ -14,10 +14,12 @@
     7.  Third Party Elements
     8.  Pagination
     9.  Footer
-    10.  Media Queries (Tablet)
+    10. Media Queries (Medium Desktop)
-    11. Media Queries (Mobile)
+    11. Media Queries (Tablet)
+    12. Media Queries (Mobile)
+    13. Animations
 
- */
+*/
 
 /* ==========================================================================
    0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
@@ -42,14 +44,14 @@ a:focus { outline: thin dotted; }
 a:active, a:hover { outline: 0; }
 h1 { font-size: 2em; margin: 0.67em 0; }
 abbr[title] { border-bottom: 1px dotted; }
-b, strong { font-weight: bold; }
+b, strong { font-weight: 700; }
 dfn { font-style: italic; }
 hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
 }
-mark { background: #ff0; color: #000; }
+mark { background: #FF0; color: #000; }
 code, kbd, pre,
 samp { font-family: monospace, serif; font-size: 1em; }
 pre { white-space: pre-wrap; }
@@ -104,12 +106,12 @@ table { border-collapse: collapse; border-spacing: 0; }
 
 /* Import the font file with the icons in it */
 @font-face {
-    font-family: 'icons';
+    font-family: "icons";
-    src:url('../fonts/icons.eot');
+    src:url("../fonts/icons.eot");
-    src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
+    src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
-        url('../fonts/icons.woff') format('woff'),
+        url("../fonts/icons.woff") format("woff"),
-        url('../fonts/icons.ttf') format('truetype'),
+        url("../fonts/icons.ttf") format("truetype"),
-        url('../fonts/icons.svg#icons') format('svg');
+        url("../fonts/icons.svg#icons") format("svg");
     font-weight: normal;
     font-style: normal;
 }
@@ -120,7 +122,7 @@ table { border-collapse: collapse; border-spacing: 0; }
 .icon-twitter:before,
 .icon-google-plus:before,
 .icon-facebook:before {
-    font-family: 'icons';
+    font-family: "icons";
     speak: none;
     font-style: normal;
     font-weight: normal;
@@ -132,7 +134,7 @@ table { border-collapse: collapse; border-spacing: 0; }
     -moz-osx-font-smoothing: grayscale;
 }
 
-/* Each icon is created by inserting the corret character into the
+/* Each icon is created by inserting the correct character into the
    content of the :before pseudo element. Like a boss. */
 .icon-ghost:before {
     content: "\e000";
@@ -163,66 +165,70 @@ html {
 }
 
 body {
+    -webkit-font-feature-settings: 'kern' 1;
+    -moz-font-feature-settings: 'kern' 1;
+    -ms-font-feature-settings: 'kern' 1;
+    -o-font-feature-settings: 'kern' 1;
+    font-feature-settings: 'kern' 1;
     height: 100%;
     max-height: 100%;
-    font-family: 'Noto Serif', serif;
+    font-family: "Noto Serif", serif;
-    font-size: 2.0rem;
+    font-size: 2.2rem;
-    line-height: 1.6em;
+    line-height: 1.7em;
     color: #3A4145;
 }
 
 ::-moz-selection {
-    color: #222;
     background: #D6EDFF;
-    text-shadow: none;
 }
 
 ::selection {
-    color: #222;
     background: #D6EDFF;
-    text-shadow: none;
 }
 
 h1, h2, h3,
 h4, h5, h6 {
-    text-rendering: optimizeLegibility;
+    -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    line-height: 1;
+    -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    margin-top: 0;
+    -ms-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    font-family: 'Open Sans', sans-serif;
+    -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
+    font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
+    color: #2E2E2E;
+    line-height: 1.3em;
+    margin: 0 0 0.5em 0;
+    font-family: "Open Sans", sans-serif;
 }
 
 h1 {
-    font-size: 5rem;
+    font-size: 5.6rem;
-    line-height: 1.2em;
     letter-spacing: -2px;
     text-indent: -3px;
 }
 
 h2 {
-    font-size: 4rem;
+    font-size: 4.4rem;
-    line-height: 1.2em;
     letter-spacing: -1px;
     text-indent: -2px;
 }
 
 h3 {
-    font-size: 3.5rem;
+    font-size: 3.9rem;
 }
 
 h4 {
-    font-size: 3rem;
+    font-size: 3.1rem;
 }
 
 h5 {
-    font-size: 2.5rem;
+    font-size: 2.8rem;
 }
 
 h6 {
-    font-size: 2rem;
+    font-size: 2.2rem;
 }
 
 a {
-    color: #4a4a4a;
+    color: #4A4A4A;
     transition: color ease 0.3s;
 }
 
@@ -235,14 +241,23 @@ h4 a, h5 a, h6 a {
     color: #50585D;
 }
 
-
 p, ul, ol, dl {
-    margin: 1.6em 0;
+    -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
+    -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
+    -ms-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
+    -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
+    font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
+    margin: 0 0 1.7em 0;
+}
+
+ol, ul {
+    padding-left: 0;
 }
 
 ol ol, ul ul,
 ul ol, ol ul {
-    margin: 0.4em 0;
+    margin: 0 0 0.4em 0;
+    padding-left: 2em;
 }
 
 dl dt {
@@ -253,8 +268,8 @@ dl dt {
     text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: bold;
+    font-weight: 700;
-    margin-bottom: 1em
+    margin-bottom: 1em;
 }
 
 dl dd {
@@ -266,7 +281,7 @@ hr {
     display: block;
     height: 1px;
     border: 0;
-    border-top: 1px solid #efefef;
+    border-top: #EFEFEF 1px solid;
     margin: 3.2em 0;
     padding: 0;
 }
@@ -274,9 +289,9 @@ hr {
 blockquote {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 1.6em 0 1.6em -2.2em;
+    margin: 1.7em 0 1.7em -2.2em;
     padding: 0 0 0 1.6em;
-    border-left: #4a4a4a 0.4em solid;
+    border-left: #4A4A4A 0.4em solid;
 }
 
 blockquote p {
@@ -287,20 +302,20 @@ blockquote p {
 blockquote small {
     display: inline-block;
     margin: 0.8em 0 0.8em 1.5em;
-    font-size:0.9em;
+    font-size: 0.9em;
-    color: #ccc;
+    color: #CCC;
 }
 
-blockquote small:before { content: '\2014 \00A0'; }
+blockquote small:before { content: "\2014 \00A0"; }
 
 blockquote cite {
-    font-weight:bold;
+    font-weight: 700;
 }
 
 blockquote cite a { font-weight: normal; }
 
 mark {
-    background-color: #ffc336;
+    background-color: #FFC336;
 }
 
 code, tt {
@@ -308,7 +323,7 @@ code, tt {
     font-family: Inconsolata, monospace, sans-serif;
     font-size: 0.85em;
     white-space: pre-wrap;
-    border: 1px solid #E3EDF3;
+    border: #E3EDF3 1px solid;
     background: #F7FAFB;
     border-radius: 2px;
 }
@@ -316,8 +331,8 @@ code, tt {
 pre {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 1.6em 0;
+    margin: 0 0 1.7em 0;
-    border: 1px solid #E3EDF3;
+    border: #E3EDF3 1px solid;
     width: 100%;
     padding: 10px;
     font-family: Inconsolata, monospace, sans-serif;
@@ -341,12 +356,12 @@ kbd {
     display: inline-block;
     margin-bottom: 0.4em;
     padding: 1px 8px;
-    border: #ccc 1px solid;
+    border: #CCC 1px solid;
     color: #666;
-    text-shadow: #fff 0 1px 0;
+    text-shadow: #FFF 0 1px 0;
     font-size: 0.9em;
-    font-weight: bold;
+    font-weight: 700;
-    background: #f4f4f4;
+    background: #F4F4F4;
     border-radius: 4px;
     box-shadow:
         0 1px 0 rgba(0, 0, 0, 0.2),
@@ -356,8 +371,8 @@ kbd {
 table {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 1.6em 0;
+    margin: 1.7em 0;
-    width:100%;
+    width: 100%;
     max-width: 100%;
     background-color: transparent;
 }
@@ -368,7 +383,7 @@ table td {
     line-height: 20px;
     text-align: left;
     vertical-align: top;
-    border-top: 1px solid #efefef;
+    border-top: #EFEFEF 1px solid;
 }
 
 table th { color: #000; }
@@ -382,13 +397,13 @@ table thead:first-child tr:first-child td {
     border-top: 0;
 }
 
-table tbody + tbody { border-top: 2px solid #efefef; }
+table tbody + tbody { border-top: #EFEFEF 2px solid; }
 
-table table table { background-color: #fff; }
+table table table { background-color: #FFF; }
 
 table tbody > tr:nth-child(odd) > td,
 table tbody > tr:nth-child(odd) > th {
-    background-color: #f6f6f6;
+    background-color: #F6F6F6;
 }
 
 table.plain tbody > tr:nth-child(odd) > td,
@@ -432,7 +447,7 @@ margin on the iframe, cause it breaks stuff. */
 .inner {
     position: relative;
     width: 80%;
-    max-width: 700px;
+    max-width: 780px;
     margin: 0 auto;
 }
 
@@ -455,11 +470,15 @@ margin on the iframe, cause it breaks stuff. */
     height: 60%;
     margin-bottom: 5rem;
     text-align: center;
-    color: #fff;
     background: #303538 no-repeat center center;
     background-size: cover;
 }
 
+.site-head h1,
+.site-head h2 {
+    color: #FFF;
+}
+
 .blog-logo {
     text-decoration: none;
 }
@@ -476,28 +495,56 @@ margin on the iframe, cause it breaks stuff. */
 /* The details of your blog. Defined in ghost/settings/ */
 .blog-title {
     margin: 10px 0 10px 0;
-    font-size: 5rem;
+    font-size: 5.6rem;
     letter-spacing: -1px;
-    font-weight: bold;
+    font-weight: 700;
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
     text-shadow: 0 1px 6px rgba(0,0,0,0.1);
 }
 
 .blog-description {
     margin: 0;
     font-size: 1.8rem;
-    line-height: 1.5em;
+    line-height: 1.6em;
-    font-weight: 300;
+    font-weight: 400;
-    font-family: 'Noto Serif', serif;
+    font-family: "Noto Serif", serif;
     letter-spacing: 0;
     text-shadow: 0 1px 3px rgba(0,0,0,0.15);
 }
 
+/* Add subtle load-in animation for content on the home page */
+.home-template .site-head {
+    -webkit-animation: fade-in-down-subtle 2s;
+    animation: fade-in-down-subtle 2s;
+}
+.home-template .blog-logo img {
+    -webkit-animation: fade-in-down 1s;
+    animation: fade-in-down 1s;
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+.home-template .blog-title {
+    -webkit-animation: fade-in-down 1s;
+    animation: fade-in-down 1s;
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.home-template .blog-description {
+    -webkit-animation: fade-in-down 1s;
+    animation: fade-in-down 1s;
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+}
+.home-template .content {
+    -webkit-animation: fade-in-up-subtle 2s;
+    animation: fade-in-up-subtle 2s;
+}
+
 /* Every post, on every page, gets this style on its <article> tag */
 .post {
     position: relative;
-    width:80%;
+    width: 80%;
-    max-width: 700px;
+    max-width: 780px;
     margin: 4rem auto;
     padding-bottom: 4rem;
     border-bottom: #EBF2F6 1px solid;
@@ -517,15 +564,11 @@ margin on the iframe, cause it breaks stuff. */
     bottom: -5px;
     left: 50%;
     margin-left: -5px;
-    background: #fff;
+    background: #FFF;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
-    box-shadow: #fff 0 0 0 5px;
+    box-shadow: #FFF 0 0 0 5px;
-}
-
-.post-title {
-    margin:0;
 }
 
 .post-title a {
@@ -533,15 +576,17 @@ margin on the iframe, cause it breaks stuff. */
 }
 
 .post-excerpt p {
-    margin: 1.6rem 0 0 0;
+    margin: 0;
-    font-size: 0.9em;
+}
-    line-height: 1.6em;
+
+.read-more {
+    text-decoration: none;
 }
 
 .post-meta {
     display: inline-block;
     margin: 0 0 5px 0;
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
     font-size: 1.5rem;
     color: #9EABB3;
 }
@@ -569,7 +614,7 @@ margin on the iframe, cause it breaks stuff. */
 
 .user-name {
     display: block;
-    font-weight: bold;
+    font-weight: 700;
 }
 
 .user-bio {
@@ -589,7 +634,7 @@ margin on the iframe, cause it breaks stuff. */
 
 .publish-heading {
     display: block;
-    font-weight: bold;
+    font-weight: 700;
 }
 
 .publish-date {
@@ -678,6 +723,10 @@ margin on the iframe, cause it breaks stuff. */
     color: #9EABB3;
 }
 
+.author h4 a {
+    text-decoration: none;
+}
+
 .author-meta li {
     float: left;
     margin-left: 10px; /* space to the left of the bullet */
@@ -735,27 +784,14 @@ margin on the iframe, cause it breaks stuff. */
    6. Tag archive
    ========================================================================== */
 
-.archive-template .site-head {
-    height: auto;
-    padding-bottom: 5rem;
-}
-
-.archive-template .site-head a {
-    color: #fff;
-}
-
-.archive-template .blog-logo {
-    display: block;
-    margin-top: 5rem;
-}
-
 .tag-archive-header {
-    padding: 20px 0;
+    position: relative;
-    text-align: center;
     max-width: 700px;
     margin: 4rem auto;
     border-bottom: 1px solid #EBF2F6;
-    position: relative;
+    padding: 20px 0;
+    text-align: center;
+    color: #222;
 }
 
 .tag-archive-header:after {
@@ -768,17 +804,13 @@ margin on the iframe, cause it breaks stuff. */
     bottom: -5px;
     left: 50%;
     margin-left: -5px;
-    background: #fff;
+    background: #FFF;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
-    box-shadow: #fff 0 0 0 5px;
+    box-shadow: #FFF 0 0 0 5px;
 }
 
-.archive-template .blog-title {
-    display: inline-block;
-    padding: 2.5rem 0;
-}
 
 /* ==========================================================================
    7. Third Party Elements - Embeds from other services
@@ -805,9 +837,9 @@ margin on the iframe, cause it breaks stuff. */
 .pagination {
     position: relative;
     width: 80%;
-    max-width: 700px;
+    max-width: 780px;
     margin: 4rem auto;
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
     font-size: 1.3rem;
     color: #9EABB3;
     text-align: center;
@@ -836,6 +868,7 @@ margin on the iframe, cause it breaks stuff. */
 .page-number {
     display: inline-block;
     padding: 2px 0;
+    min-width: 100px;
 }
 
 .newer-posts {
@@ -857,7 +890,7 @@ margin on the iframe, cause it breaks stuff. */
     margin: 8rem 0 0 0;
     padding: 4rem 0;
     border-top: #EBF2F6 1px solid;
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
     font-size: 1.3rem;
     line-height: 1.7em;
     color: #BBC7CC;
@@ -900,7 +933,7 @@ margin on the iframe, cause it breaks stuff. */
     text-align: center;
     line-height: 2.4rem;
     border-radius: 50px;
-    background: #fff;
+    background: #FFF;
     transition: box-shadow 0.5s;
 }
 
@@ -911,7 +944,7 @@ margin on the iframe, cause it breaks stuff. */
     position: absolute;
     top: 9px;
     left: 9px;
-    font-weight: bold;
+    font-weight: 700;
     transition: color 0.5s ease;
 }
 
@@ -927,7 +960,7 @@ margin on the iframe, cause it breaks stuff. */
 
 /* CSS tooltip saying "Subscribe!" - initially hidden */
 .tooltip {
-    opacity:0;
+    opacity: 0;
     display: inline-block;
     padding: 4px 8px 5px 8px;
     position:absolute;
@@ -938,24 +971,24 @@ margin on the iframe, cause it breaks stuff. */
     line-height: 1em;
     text-align: center;
     background: #50585D;
-    border-radius:20px;
+    border-radius: 20px;
     box-shadow: 0 1px 4px rgba(0,0,0,0.1);
     transition: opacity 0.3s ease, top 0.3s ease;
 }
 
 /* The little chiclet arrow under the tooltip, pointing down */
 .tooltip:after {
-    content:"";
+    content: " ";
-    border-width:5px 5px 0 5px;
+    border-width: 5px 5px 0 5px;
-    border-style:solid;
+    border-style: solid;
     border-color: #50585D transparent;
-    display:block;
+    display: block;
-    position:absolute;
+    position: absolute;
-    bottom:-4px;
+    bottom: -4px;
-    left:50%;
+    left: 50%;
-    margin-left:-5px;
+    margin-left: -5px;
     z-index: 220;
-    width:0;
+    width: 0;
 }
 
 /* On hover, show the tooltip! */
@@ -966,7 +999,69 @@ margin on the iframe, cause it breaks stuff. */
 
 
 /* ==========================================================================
-   10. Media Queries - Smaller than 900px
+   10. Media Queries - Smaller than 1600px
+   ========================================================================== */
+
+@media only screen and (max-width: 1600px) {
+
+    .blog-title {
+        font-size: 5rem;
+    }
+
+    .blog-description {
+        font-size: 1.7rem;
+        line-height: 1.5em;
+    }
+
+    .post {
+        font-size: 0.9em;
+        line-height: 1.65em;
+    }
+
+    p, ul, ol, dl {
+        margin: 0 0 1.65em 0;
+    }
+
+    .post,
+    .inner,
+    .tag-archive-header {
+        max-width: 710px;
+    }
+
+    h1, h2, h3,
+    h4, h5, h6 {
+        margin: 0 0 0.4em 0;
+    }
+
+    h1 {
+        font-size: 5rem;
+    }
+
+    h2 {
+        font-size: 4rem;
+    }
+
+    h3 {
+        font-size: 3.5rem;
+    }
+
+    h4 {
+        font-size: 2.8rem;
+    }
+
+    h5 {
+        font-size: 2.5rem;
+    }
+
+    h6 {
+        font-size: 2rem;
+    }
+
+}
+
+
+/* ==========================================================================
+   11. Media Queries - Smaller than 900px
    ========================================================================== */
 
 @media only screen and (max-width: 900px) {
@@ -995,8 +1090,7 @@ margin on the iframe, cause it breaks stuff. */
     }
 
     .post {
-        font-size: 0.9em;
+        font-size: 0.8em
-        line-height: 1.6em;
     }
 
     .post-template .post {
@@ -1007,29 +1101,41 @@ margin on the iframe, cause it breaks stuff. */
         padding: 40px 0;
     }
 
+    ol, ul {
+        padding-left: 2em;
+    }
+
     h1 {
-        font-size: 4.8rem;
+        font-size: 4.5rem;
         text-indent: -2px;
     }
 
     h2 {
-        font-size: 3.8rem;
+        font-size: 3.6rem;
     }
 
     h3 {
-        font-size: 3.3rem;
+        font-size: 3.1rem;
     }
 
     h4 {
-        font-size: 2.8rem;
+        font-size: 2.5rem;
+    }
+
+    h5 {
+        font-size: 2.2rem;
+    }
+
+    h6 {
+        font-size: 1.8rem;
     }
 
 }
 
-/* ==========================================================================
-   11. Media Queries - Smaller than 500px
-   ========================================================================== */
 
+/* ==========================================================================
+   12. Media Queries - Smaller than 500px
+   ========================================================================== */
 
 @media only screen and (max-width: 500px) {
 
@@ -1045,13 +1151,17 @@ margin on the iframe, cause it breaks stuff. */
     }
 
     .post {
-        width:auto;
+        width: auto;
         margin-left: 16px;
         margin-right: 16px;
         font-size: 0.8em;
         line-height: 1.6em;
     }
 
+    p, ul, ol, dl {
+        margin: 0 0 1.6em 0;
+    }
+
     .site-head {
         padding: 10% 0;
     }
@@ -1064,29 +1174,50 @@ margin on the iframe, cause it breaks stuff. */
         font-size: 1.5rem;
     }
 
+    h1, h2, h3,
+    h4, h5, h6 {
+        margin: 0 0 0.3em 0;
+    }
 
-    h1, h2 {
+    h1 {
         font-size: 3rem;
-        line-height: 1.1em;
         letter-spacing: -1px;
     }
 
+    h2 {
+        font-size: 2.6rem;
+        letter-spacing: 0;
+    }
+
     h3 {
-        font-size: 2.8rem;
+        font-size: 2.4rem;
     }
 
     h4 {
-        font-size: 2.3rem;
+        font-size: 2.1rem;
+    }
+
+    h5 {
+        font-size: 1.9rem;
+    }
+
+    h6 {
+        font-size: 1.7rem;
     }
 
     .post-template .post {
         padding-bottom: 0;
+        margin-bottom: 0;
     }
 
     .post-template .post-header {
         padding: 30px 0;
     }
 
+    .post-template .site-footer {
+        margin-top: 0;
+    }
+
     .post-content img {
         padding: 0;
     }
@@ -1123,6 +1254,16 @@ margin on the iframe, cause it breaks stuff. */
         margin: 1.4rem 0.8rem 0 0.8rem;
     }
 
+    .author-meta li {
+        float: none;
+        margin: 0;
+        line-height: 1.6em;
+    }
+
+    .author-meta li:before {
+        display: none;
+    }
+
     .older-posts,
     .newer-posts {
         position: static;
@@ -1140,7 +1281,89 @@ margin on the iframe, cause it breaks stuff. */
 
 }
 
+
 /* ==========================================================================
-   End of file. Media queries should be the last thing here. Do not add stuff
+   13. Animations
+   ========================================================================== */
+
+@-webkit-keyframes fade-in-down {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(-5px);
+    }
+    60% {
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+@keyframes fade-in-down {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateY(-5px);
+    }
+    60% {
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+
+@-webkit-keyframes fade-in-down-subtle {
+    0% {
+        opacity: 0.8;
+        -webkit-transform: translateY(-5px);
+    }
+    30% {
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+@keyframes fade-in-down-subtle {
+    0% {
+        opacity: 0.8;
+        -webkit-transform: translateY(-5px);
+    }
+    30% {
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+
+@-webkit-keyframes fade-in-up-subtle {
+    0% {
+        opacity: 0.3;
+        -webkit-transform: translateY(3px);
+    }
+    30% {
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+@keyframes fade-in-down-subtle {
+    0% {
+        opacity: 0.3;
+        -webkit-transform: translateY(3px);
+    }
+    30% {
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+
+
+
+/* ==========================================================================
+   End of file. Animations should be the last thing here. Do not add stuff
    below this point, or it will probably fuck everything up.
    ========================================================================== */

author.hbs

@@ -0,0 +1,39 @@
+{{!< default}}
+
+{{! The comment above "< default" means - insert everything in this file into
+    the {body} of the default.hbs template, which contains our header/footer. }}
+
+{{! Everything inside the #author tags pulls data from the author }}
+{{#author}}
+<header class="site-head" {{#if cover}}style="background-image: url({{cover}})"{{/if}}>
+    <div class="vertical">
+        <div class="site-head-content inner">
+            <h1 class="blog-title">{{name}}</h1>
+            <h2 class="blog-description">{{bio}}</h2>
+        </div>
+    </div>
+</header>
+{{/author}}
+
+{{! The main content area on the homepage }}
+<main class="content" role="main">
+
+    {{! Each post will be output using this markup }}
+    {{#foreach posts}}
+
+    <article class="{{post_class}}">
+        <header class="post-header">
+            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
+            <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
+        </header>
+        <section class="post-excerpt">
+            <p>{{excerpt}}&hellip; <a class="read-more" href="{{url}}">&raquo;</a></p>
+        </section>
+    </article>
+
+    {{/foreach}}
+
+    {{!! After all the posts, we have the previous/next pagination links }}
+    {{pagination}}
+
+</main>

index.hbs

@@ -22,12 +22,11 @@
 
     <article class="{{post_class}}">
         <header class="post-header">
-            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
+            <span class="post-meta">{{author}}, <time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMM YYYY"}}</time> {{tags prefix="on "}}</span>
             <h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
-
         </header>
         <section class="post-excerpt">
-            <p>{{excerpt}}&hellip;</p>
+            <p>{{excerpt}}&hellip; <a class="read-more" href="{{url}}">&raquo;</a></p>
         </section>
     </article>
 

package.json

@@ -1,4 +1,4 @@
 {
   "name": "Casper",
-  "version": "0.9.3"
+  "version": "0.9.4"
 }

post.hbs

@@ -21,7 +21,7 @@
         {{! Everything inside the #post tags pulls data from the post }}
         {{#post}}
 
-            <span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{tags prefix="on " separator=" | "}}</span>
+            <span class="post-meta">{{author}}, <time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{tags prefix="on " separator=" | "}}</span>
 
             <h1 class="post-title">{{{title}}}</h1>
 
@@ -31,14 +31,20 @@
 
             <footer class="post-footer">
                 
+                {{#author}}
                 <section class="author">
-                    <h4>{{author.name}}</h4>
+                    <h4><a href="{{url}}">{{name}}</a></h4>
-                    <p>{{author.bio}}</p>
+                    {{#if bio}}
-                    <ul class="author-meta clearfix">
+                        <p>{{bio}}</p>
-                        {{#if author.location}}<li>{{author.location}}</li>{{/if}}
+                    {{else}}
-                        {{#if author.website}}<li><a href="{{author.website}}">{{author.website}}</a></li>{{/if}}
+                        <p>Read <a href="{{url}}">more posts</a> by this author.</p>
-                    </ul>
+                    {{/if}}
+                    <div class="author-meta">
+                        {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
+                        {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
+                    </div>
                 </section>
+                {{/author}}
 
                 <section class="share">
                     <h4>Share this post</h4>