Add tag & author archives

assets/css/screen.css

@@ -111,11 +111,12 @@ html,
     max-width: 720px;
     margin: 0 auto;
     text-align: center;
+    font-size: 1.6rem;
 }
 
 .gh-card-content p {
     margin: 1.2rem 0;
-    padding: 0 4vw;
+    padding: 0 6vmin;
 }
 
 .gh-card-content > strong {
@@ -127,6 +128,35 @@ html,
 }
 
 
+/* Page
+/* ---------------------------------------------------------- */
+
+.gh-page-head {
+    margin: 0 auto;
+    padding: 8vmin 0 4vmin;
+    text-align: center;
+}
+
+.gh-page-image {
+    margin: 4vmin 0 0 0;
+}
+
+.gh-page-head > p {
+    max-width: 720px;
+    margin: 0.3em auto 0;
+    padding: 0 6vmin;
+    font-size: 1.3em;
+    line-height: 1.4em;
+    opacity: 0.5;
+}
+
+@media (max-width: 700px) {
+    .gh-page-head > p {
+        font-size: 1.6rem;
+    }
+}
+
+
 /* Post
 /* ---------------------------------------------------------- */
 
@@ -157,3 +187,50 @@ html,
 .gh-post-footer {
     margin: 2rem 0;
 }
+
+
+/* Author Archive
+/* ---------------------------------------------------------- */
+
+.gh-author-image {
+    height: 12vmin;
+    width: 12vmin;
+    margin: 0 auto 1.5em;
+    border-radius: 100%;
+    overflow: hidden;
+    object-fit: cover;
+}
+
+.gh-author-meta {
+    margin: 2vmin 0 0 0;
+    font-size: 1.2em;
+}
+
+.gh-author-links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.gh-author-links a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin: 0 0.75vmin;
+}
+
+.gh-author-links a + a:before {
+    display: block;
+    content: "";
+    margin: 0 1.25vmin 0 0;
+    height: 1em;
+    width: 1px;
+    background: rgba(0,0,0,0.3);
+    transform: rotate(20deg);
+}
+
+@media (max-width: 700px) {
+    .gh-author-meta {
+        font-size: 1.6rem;
+    }
+}

author.hbs

@@ -4,32 +4,37 @@
     <div class="gh-container">
 
         {{#author}}
-        {{!-- Everything inside the #author tags pulls data from the author --}}
+        <header class="gh-page-head">
+            {{#if profile_image}}
+                <img class="gh-author-image" src="{{profile_image}}" alt="{{name}}" />
+            {{/if}}
 
-        <header class="page-head">
+            <h1>{{name}}</h1>
-            <h1 class="page-head-title">{{name}}</h1>
+            {{#if bio}}
-            {{#if bio}}<p class="page-head-description">{{bio}}</p>{{/if}}
+                <p>{{bio}}</p>
+            {{/if}}
 
-            <div class="author-meta">
+            <div class="gh-author-meta">
-                <div class="author-links">
+                <div class="gh-author-links">
                     {{#if website}}
-                    <a href="{{website}}" target="_blank" rel="noopener">Website</a> <span class="divider">/</span>
+                        <a href="{{website}}" target="_blank" rel="noopener">Website</a>
                     {{/if}}
                     {{#if twitter}}
-                    <a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a> <span class="divider">/</span>
+                        <a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a>
                     {{/if}}
                     {{#if facebook}}
-                    <a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a> <span class="divider">/</span>
+                        <a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a>
                     {{/if}}
-                    <a href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" target="_blank" rel="noopener">RSS</a>
                 </div>
             </div>
-        </header>
 
+            {{#if cover_image}}
+                <img class="gh-page-image" src="{{cover_image}}" alt="{{name}}" />
+            {{/if}}
+        </header>
         {{/author}}
 
-
+        <div class="gh-postfeed">
-        <div class="post-feed">
         {{#foreach posts}}
 
             {{> "card"}} {{!-- partials/card.hbs --}}

tag.hbs

@@ -4,19 +4,26 @@
     <div class="gh-container">
 
         {{#tag}}
-        <header class="page-head">
+        <header class="gh-page-head">
-            <h1 class="page-head-title">{{name}}</h1>
+
-            <p class="page-head-description">
+            <h1>{{name}}</h1>
+
+            <p>
                 {{#if description}}
                     {{description}}
                 {{else}}
                     A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
                 {{/if}}
             </p>
+
+            {{#if feature_image}}
+                <img class="gh-page-image" src="{{feature_image}}" alt="{{name}}" />
+            {{/if}}
+
         </header>
         {{/tag}}
 
-        <div class="post-feed">
+        <div class="gh-postfeed">
         {{#foreach posts}}
 
             {{> "card"}} {{!-- partials/card.hbs --}}