Archive templates

assets/css/screen.css

@@ -15,6 +15,11 @@
     --content-font-size: 1.9rem;
 }
 
+.tag-template .gh-main,
+.author-template .gh-main {
+    padding-top: 8vmin;
+}
+
 .gh-head-logo {
     font-weight: 800;
 }
@@ -372,84 +377,68 @@
 }
 
 .gh-pagehead {
-    display: flex;
-    margin: 8vmin 0 max(8vmin, 4.8rem);
-}
-
-.author-template .gh-pagehead {
-    position: relative;
-    padding: 8rem 3.2rem 4rem;
-    margin-top: calc(8vmin + 32px);
-    margin-right: -3.2rem;
-    margin-left: -3.2rem;
-    background: linear-gradient(135deg, #efefef, #fafafa);
-    border-radius: 8px;
+    position: sticky;
+    top: 4vmin;
+    grid-column: wide-start/main-start;
+    max-width: 200px;
+    height: max-content;
+    padding-top: 0.4rem;
+    font-size: 1.5rem;
+    line-height: 1;
 }
 
 .gh-pagehead-title {
-    font-size: var(--h1-size);
+    font-size: 2.1rem;
     font-weight: 800;
 }
 
 .gh-pagehead-description {
-    margin-top: 1.2rem;
-    font-size: 1.8rem;
-    line-height: 1.5;
+    margin-top: 0.8rem;
+    line-height: 1.3;
     color: var(--color-secondary-text);
 }
 
-.gh-tag-name {
+.gh-tag-label {
+    margin-bottom: 0.8rem;
+    font-size: 1.3rem;
+    font-weight: 700;
     color: var(--ghost-accent-color);
+    text-transform: uppercase;
+}
+
+.gh-tag-description {
+    margin-top: 1.6rem;
 }
 
 .gh-author-image {
-    position: absolute;
-    top: -64px;
-    width: 120px;
-    height: 120px;
-    margin-right: 3.2rem;
-    background-color: var(--color-white);
-    border: 4px solid var(--color-white);
+    width: 80px;
+    height: 80px;
+    margin-bottom: 2.4rem;
     border-radius: 50%;
 }
 
 .gh-author-meta {
     display: flex;
-    align-items: center;
-    margin-top: 2.4rem;
+    flex-direction: column;
+    margin-top: 2rem;
 }
 
-.gh-author-meta > * + * {
-    margin-left: 2rem;
+.gh-author-location {
+    margin-left: -4px;
+    color: var(--color-darker-gray);
 }
 
-.gh-author-twitter,
-.gh-author-facebook {
-    line-height: 0;
+.gh-author-website {
+    margin-top: 0.8rem;
+}
+
+.gh-author-social {
+    display: flex;
+    margin-top: 1.6rem;
 }
 
 .gh-author-facebook {
-    margin-left: 1.2rem;
-}
-
-@media (max-width: 767px) {
-    .gh-article-navigation-all span {
-        display: none;
-    }
-
-    .author-template .gh-pagehead {
-        grid-column: full-start / full-end;
-        padding: 7.2rem 4vmin 3.2rem;
-        margin-right: 0;
-        margin-left: 0;
-        border-radius: 0;
-    }
-
-    .gh-author-image {
-        top: -44px;
-        width: 88px;
-        height: 88px;
-    }
+    margin-left: 0.8rem;
 }
 
 @media (min-width: 992px) {

author.hbs

@@ -23,12 +23,14 @@
                     {{#if website}}
                         <a class="gh-author-website" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
                     {{/if}}
-                    {{#if twitter}}
-                        <a class="gh-author-twitter" href="{{twitter_url}}" target="_blank" rel="noopener">{{> icons/twitter}}</a>
-                    {{/if}}
-                    {{#if facebook}}
-                        <a class="gh-author-facebook" href="{{facebook_url}}" target="_blank" rel="noopener">{{> icons/facebook}}</a>
-                    {{/if}}
+                    <div class="gh-author-social">
+                        {{#if twitter}}
+                            <a class="gh-author-twitter" href="{{twitter_url}}" target="_blank" rel="noopener">{{> icons/twitter}}</a>
+                        {{/if}}
+                        {{#if facebook}}
+                            <a class="gh-author-facebook" href="{{facebook_url}}" target="_blank" rel="noopener">{{> icons/facebook}}</a>
+                        {{/if}}
+                    </div>
                 </div>
             </header>
         </section>

tag.hbs

@@ -4,6 +4,8 @@
     {{#tag}}
         <section class="gh-pagehead">
             <header class="gh-pagehead-content">
+                <div class="gh-tag-label">Tagged</div>
+
                 <h1 class="gh-tag-name gh-pagehead-title">{{name}}</h1>
 
                 <div class="gh-tag-description gh-pagehead-description">
@@ -15,13 +17,11 @@
                 </div>
             </header>
         </section>
-
-        <div class="gh-feed">
-            {{#get "posts" filter="primary_tag:{{slug}}" limit="all"}}
-                {{#foreach posts}}
-                    {{> loop}}
-                {{/foreach}}
-            {{/get}}
-        </div>
     {{/tag}}
+
+    <div class="gh-feed">
+        {{#foreach posts}}
+            {{> loop}}
+        {{/foreach}}
+    </div>
 </main>