Implement author contributions to the UI and dedicated author pages.

assets/js/src/__init.js

@@ -5,7 +5,7 @@ $(function() {
         openHash = "#open";
 
     window.CaffeineTheme = CaffeineTheme = {
-        version: "2.8.2",
+        version: "2.9.0",
         search: {
             container: function() {
                 return $("#results");

assets/scss/components/_media-queries.scss

@@ -8,8 +8,8 @@
         }
     }
 
-    .post .post-card,
-    .post .post-related,
+    .post-card,
+    .post-related,
     .container-wrapper {
         max-width: $container-large-width;
     }
@@ -21,11 +21,11 @@
 @media all and (max-width:1024px) {
     .post {
         margin: 0;
+    }
 
-        .post-card,
-        .post-related {
-            margin: 0 40px;
-        }
+    .post-card,
+    .post-related {
+        margin: 0 40px;
     }
 
     .container-wrapper {
@@ -100,23 +100,37 @@
     .card {
         width: 100%;
     }
+
+    .post {
+        .author-credit {
+            .author-info {
+                width: 70%;
+            }
+        }
+    }
 }
 
 // ------------------------------
 // < 600px ( 7" Tablet)
 // ------------------------------
 @media all and (max-width:600px) {
     .post {
-        .post-related,
-        .post-card {
-            margin: 0 20px;
-
-            .post-container {
-                padding: 20px 40px;
+        .author-credit {
+            .author-info {
+                width: 65%;
             }
         }
     }
 
+    .post-related,
+    .post-card {
+        margin: 0 20px;
+
+        .post-container {
+            padding: 20px 40px;
+        }
+    }
+
     .post-content {
         p {
             img {
@@ -222,14 +236,13 @@
             margin-bottom: 0;
         }
 
-        .post-related,
-        .post-card {
-            margin: 0;
+        .author-credit {
+            text-align: center;
 
-            .post-container {
-                padding: 20px;
+            .author-image {
+                margin-right: 0;
+                display: block;
             }
-
         }
 
         &.newer,
@@ -244,6 +257,16 @@
         }
     }
 
+    .post-related,
+    .post-card {
+        margin: 0;
+
+        .post-container {
+            padding: 20px;
+        }
+
+    }
+
     .pagination {
         text-align: center;
         padding: 0 20px;

assets/scss/components/_page.scss

@@ -38,6 +38,66 @@
     margin: 0 auto;
 }
 
+.page-author {
+    margin: 0 auto;
+
+    .profile-container {
+        margin-top: 40px;
+    }
+
+    .author-header {
+        text-align: center;
+
+        h1 {
+            margin-top: 60px;
+            margin-bottom: 0;
+
+            i {
+                font-size: 25px;
+                vertical-align: text-top;
+            }
+        }
+    }
+
+    .author-posts {
+        max-width: $container-medium-width;
+        background: white;
+        margin: 0 auto;
+        @include transition(all 250ms);
+        @include shadow(2);
+    }
+
+    .author-posts-list {
+        padding: 0;
+        margin: 0 20px;
+        list-style-type: none;
+        text-align: left;
+
+        li {
+            padding-bottom: 10px;
+
+            a {
+                color: $gray-darkest;
+
+                h2 {
+                    margin-bottom: 12px;
+                }
+
+                &:hover {
+                    h2, p {
+                        color: $hover-color;
+                    }
+                }
+            }
+        }
+    }
+
+    .profile-image {
+        // position: relative;
+        // margin-bottom: -80px;
+    }
+}
+
 .page-about {
     .material-cover {
         margin-bottom: -40px;
@@ -58,4 +118,4 @@
             }
         }
     }
-}
+}

assets/scss/components/_post.scss

@@ -46,20 +46,54 @@
     }
 }
 
-.post {
-    .post-card {
-        max-width: $container-medium-width;
-        background: white;
-        margin: 0 auto;
-        @include transition(all 250ms);
-        @include shadow(2);
-    }
+.post-card {
+    max-width: $container-medium-width;
+    background: white;
+    margin: 0 auto;
+    @include transition(all 250ms);
+    @include shadow(2);
 
     .post-container {
         padding: 20px 60px;
     }
 }
 
+.post {
+    .author-credit {
+        border-top: 2px solid $primary-color;
+        padding: 30px 0 20px 10px;
+        margin-top: 40px;
+
+        h4,
+        p {
+            margin: 0;
+            color: $gray-darker;
+        }
+
+        .author-image {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 34px;
+
+            img {
+                max-width: 70px;
+                border: 1px solid $primary-color;
+            }
+        }
+
+        .author-info {
+            display: inline-block;
+            vertical-align: top;
+            margin-top: 14px;
+            width: 75%;
+
+            .author-name {
+                color: $gray-darker;
+            }
+
+        }
+    }
+}
 
 .posts,
 .post-header {

assets/scss/modules/_variables.scss

@@ -73,4 +73,3 @@ $container-small-width       : 700px;
 /* OTHER */
 
 $border-radius         : 3px;
-$astronaut-size        : 20vh;

author.hbs

@@ -0,0 +1,44 @@
+{{!< default}}
+
+<article class="page page-author">
+    {{> material-cover}}
+    <div class="profile-container animated fade-in">
+        {{#author}}
+            <div class="profile-image">
+                {{#if image}}
+                    <img src="{{image}}" alt="{{name}}'s picture" class="avatar rounded" />
+                {{else}}
+                    <img src="/ghost/img/user-image.png" class="avatar rounded" />
+                {{/if}}
+            </div>
+        {{/author}}
+        <div class="post-card animated">
+            <div class="post-container">
+                {{#author}}
+                    <div class="author-header">
+                        <h1>
+                            {{name}}
+                            <a rel="me" target="_blank" href="{{twitter_url}}" class="hvr-grow-rotate" title="{{name}}'s twitter">
+                                <i class='fa fa-twitter'></i>
+                            </a>
+                        </h1>
+
+                        <p>{{#if bio}}{{bio}}{{/if}}</p>
+                    </div>
+                {{/author}}
+                <ol class="author-posts-list">
+                {{#foreach posts}}
+                    <li>
+                        <a href="{{url}}" title="link to {{{title}}}">
+                            <h2>{{{title}}}</h2>
+                            <p class="description">{{excerpt}}&hellip;</p>
+                        </a>
+                    </li>
+                {{/foreach}}
+                </ol>
+            </div>
+        </div>
+    </div>
+    {{pagination}}
+</article>
+

partials/post-author-credit.hbs

@@ -0,0 +1,25 @@
+{{#author}}
+    <div class='author-credit'>
+        <figure class="author-image">
+            <a class="img" href="{{url}}">
+                {{#if image}}
+                    <img src="{{image}}" alt="{{name}}'s picture" class="avatar rounded" />
+                {{else}}
+                    <img src="/ghost/img/user-image.png" class="avatar rounded" />
+                {{/if}}
+            </a>
+        </figure>
+
+        <div class="author-info">
+            <h4><a href="{{url}}" class='author-name'>{{name}}</a></h4>
+            {{#if bio}}
+                <p>{{bio}}</p>
+            {{else}}
+                <p>Read <a href="{{url}}">more posts</a> by this author.</p>
+            {{/if}}
+            <div class="author-meta">
+                {{#if twitter}}<a href="{{twitter_url}}">{{twitter}}</a>{{/if}}
+            </div>
+        </div>
+    </div>
+{{/author}}

post.hbs

@@ -27,6 +27,7 @@
              <div class="post-content">
                 {{content}}
             </div>
+            {{> post-author-credit}}
             {{> comments}}
         </div>
     </div>