Author and tag templates

assets/css/screen.css

@@ -262,7 +262,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 24px;
+    gap: 32px;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -282,10 +282,6 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
     color: #fff;
 }
 
-.gh-head-menu .nav a:hover {
-    opacity: 1;
-}
-
 
 /* Secondary Navigation
 /* ---------------------------------------------------------- */
@@ -298,47 +294,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
     text-align: right;
 }
 
-.gh-head-actions-list {
+.gh-head-button {
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-}
-
-.gh-head-actions-list a:not([class]) {
-    display: inline-block;
-    margin: 0 0 0 1.5vmin;
-    padding: 5px 0;
-}
-
-.gh-social {
-    margin: 0 1.5vmin 0 0;
-}
-
-.gh-social a {
-    opacity: 0.8
-}
-
-.gh-social a + a {
-    margin-left: 0.8rem;
-}
-
-.gh-social a:hover {
-    opacity: 1;
-}
-
-.gh-social svg {
-    height: 22px;
-    width: 22px;
-    fill: #fff;
-}
-
-.gh-social-facebook svg {
-    height: 20px;
-    width: 20px;
-}
-
-a.gh-head-button {
     display: inline-flex;
     align-items: center;
     padding: 8px 16px;
@@ -351,7 +307,7 @@ a.gh-head-button {
     background: var(--ghost-accent-color);
 }
 
-.has-cover-image a.gh-head-button {
+.has-cover-image .gh-head-button {
     color: var(--color-darkgrey);
     background: #fff;
 }
@@ -562,6 +518,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
         grid-template-columns: 1fr 1fr;
     }
 }
+
 @media (max-width: 700px) {
     .post-feed {
         grid-template-columns: 1fr;
@@ -572,20 +529,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 .post-card {
     position: relative;
     grid-column: span 2;
-    flex: 1 1 301px;
     display: flex;
     flex-direction: column;
-    min-height: 220px;
     background-size: cover;
     word-break: break-word;
 }
 
-@media (max-width: 700px) {
-    .post-card {
-        min-height: auto;
-    }
-}
-
 .post-card-image-link {
     position: relative;
     display: block;
@@ -629,7 +578,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     margin: 0 0 10px;
     color: var(--color-secondary-text);
     font-size: 1.4rem;
-    font-weight: 500;
+    font-weight: 600;
     line-height: 1;
 }
 
@@ -682,8 +631,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     margin: 0 4px;
 }
 
-.author-profile-image,
+.author-profile-image {
-.avatar-wrapper {
     display: block;
     width: 100%;
     height: 100%;
@@ -693,11 +641,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     object-fit: cover;
 }
 
-.post-card-meta .profile-image-wrapper,
-.post-card-meta .avatar-wrapper {
-    position: relative;
-}
-
 .author-list {
     display: flex;
     flex-wrap: wrap;
@@ -713,69 +656,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding: 0;
 }
 
-.static-avatar {
-    display: block;
-    overflow: hidden;
-    margin: 0 0 0 -6px;
-    width: 36px;
-    height: 36px;
-    border-radius: 100%;
-    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
-}
-
-.post-card-byline-content {
-    flex: 1 1 50%;
-    display: flex;
-    flex-direction: column;
-    margin: 0 0 0 8px;
-    color: color-mod(var(--color-midgrey) l(+10%));
-    font-size: 1.4rem;
-    line-height: 1.2em;
-    font-weight: 400;
-}
-
-.post-card-byline-content span {
-    margin: 0;
-}
-
-.post-card-byline-content a {
-    color: color-mod(var(--color-darkgrey) l(+15%));
-    font-weight: 600;
-}
-
-.post-card-byline-date {
-    font-size: 1.3rem;
-    line-height: 1.5em;
-}
-
-.post-card-byline-date .bull {
-    display: inline-block;
-    margin: 0 2px;
-    opacity: 0.6;
-}
-
-.single-author-byline {
-    display: flex;
-    flex-direction: column;
-    margin-left: 5px;
-    color: color-mod(var(--color-midgrey) l(-10%));
-    font-size: 1.3rem;
-    line-height: 1.4em;
-    font-weight: 500;
-}
-
-.single-author {
-    display: flex;
-    align-items: center;
-}
-
-.single-author .static-avatar {
-    margin-left: -2px;
-}
-
-.single-author-name {
-    display: inline-block;
-}
 
 /* Special Styling for home page grid (below):
 
@@ -791,7 +671,6 @@ make sure this only happens on large viewports / desktop-ish devices.
         display: grid;
         grid-gap: 4vmin;
         grid-template-columns: 3fr 5fr;
-        min-height: auto;
         border-top: 0;
     }
 
@@ -815,7 +694,6 @@ make sure this only happens on large viewports / desktop-ish devices.
         display: grid;
         grid-gap: 4vmin;
         grid-template-columns: repeat(3, 1fr);
-        min-height: 280px;
         border-top: 0;
     }
 
@@ -827,7 +705,6 @@ make sure this only happens on large viewports / desktop-ish devices.
         position: relative;
         grid-column: span 2;
         margin-bottom: 0;
-        min-height: 380px;
     }
 
     .post-card-large .post-card-content {
@@ -857,7 +734,6 @@ make sure this only happens on large viewports / desktop-ish devices.
     .post-feed.list .post-card-large .post-card-image-link {
         grid-column: 1 / span 1;
         height: max-content;
-        min-height: auto;
     }
 
     .post-feed.list .post-card-large .post-card-image-link::after {
@@ -1560,94 +1436,41 @@ iframe.instagram-media + script + :not([id]) {
 /* 8. Author Template
 /* ---------------------------------------------------------- */
 
-.author-template .posts {
-    position: relative;
-    height: 100%;
-    display: grid;
-    grid-template-columns: 200px 1fr 1fr;
-    grid-gap: 4vmin;
-}
-
-.author-template .posts .post-feed {
-    grid-column: 2 / 4;
-    grid-template-columns: 1fr 1fr;
-}
-
-.author-profile {
-    padding: 4vmin 0;
-}
-
-.author-profile-content {
-    height: auto;
-    position: sticky;
-    top: 4vmin;
-    font-size: 1.4rem;
-    line-height:  1.4em;
-}
-
 .author-profile-pic {
     display: block;
-    width: 150px;
+    width: 80px;
-    height: 150px;
+    height: 80px;
     object-fit: cover;
     margin: 0 0 2rem;
     background: color-mod(var(--color-lightgrey) l(+10%));
     border-radius: 50%;
 }
 
-.author-profile h1 {
+.author-profile-footer {
-    margin: 0 0 0.3em;
+    margin-top: 16px;
-    font-size: 2rem;
-}
-
-.author-profile p {
-    margin: 0 0 1.5em;
-    color: color-mod(var(--color-midgrey) l(-8%));
 }
 
 .author-profile-location {
-    margin: 0 0 1.5em;
     font-weight: 700;
 }
 
+.author-profile-meta {
+    display: flex;
+    gap: 10px;
+}
+
 .author-profile-social-link {
-    display: block;
-    padding: 0 0 5px;
     font-size: 1.3rem;
-    color: color-mod(var(--color-midgrey) l(-8%));
+    color: var(--color-secondary-text);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-    white-space: nowrap;
 }
 
 .author-profile-social-link:hover {
     color: var(--color-darkgrey);
 }
 
-@media (max-width: 900px) {
+.author-profile-social-link svg {
-    .author-template .posts .post-feed {
+    width: 16px;
-        grid-template-columns: 1fr;
+    height: 16px;
-    }
-}
-
-@media (max-width: 650px) {
-    .author-template .posts {
-        grid-template-columns: 1fr;
-        grid-gap: 0;
-    }
-    .author-template .posts .post-feed {
-        grid-column: 1 / auto;
-    }
-    .author-profile {
-        padding-right: 0;
-    }
-    .author-profile-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-    }
 }
 
 

author.hbs

@@ -1,57 +1,70 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
+<main id="site-main" class="site-main outer">
+<div class="post-feed inner">
 
-<section class="outer">
-    <div class="inner posts">
-
-        <header class="author-profile">
     {{#author}}
-            {{!-- Everything inside the #author tags pulls data from the author --}}
+    <section class="post-card post-card-large">
 
-            <div class="author-profile-content">
+        {{#if feature_image}}
+        <div class="post-card-image-link">
+            {{!-- This is a responsive image, it loads different sizes depending on device
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+            <img class="post-card-image"
+                srcset="{{img_url feature_image size="s"}} 300w,
+                        {{img_url feature_image size="m"}} 600w,
+                        {{img_url feature_image size="l"}} 1000w,
+                        {{img_url feature_image size="xl"}} 2000w"
+                sizes="(max-width: 1000px) 400px, 800px"
+                src="{{img_url feature_image size="m"}}"
+                alt="{{title}}"
+            />
+        </div>
+        {{/if}}
+
+        <div class="post-card-content">
+        <div class="post-card-content-link">
 
             {{#if profile_image}}
                 <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
-                {{else}}
-                <span class="author-profile-pic">{{> "icons/avatar"}}</span>
             {{/if}}
 
-                <h1>{{name}}</h1>
+            <header class="post-card-header">
-                <p>
+                <h2 class="post-card-title">{{name}}</h2>
-                    {{#if bio}}
-                        {{bio}}
-                    {{else}}
-                        {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} published
-                    {{/if}}
-                </p>
-
-                <div class="author-profile-meta">
-                    {{#if location}}
-                    <div class="author-profile-location">📍 {{location}}</div>
-                    {{/if}}
-                    {{#if website}}
-                    <span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
-                    {{/if}}
-                    {{#if twitter}}
-                    <span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
-                    {{/if}}
-                    {{#if facebook}}
-                    <span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
-                    {{/if}}
-                </div>
-
-            </div>
-
-            {{/author}}
             </header>
 
-        <div class="post-feed">
+            {{#if bio}}
+                <div class="post-card-excerpt">{{bio}}</div>
+            {{/if}}
+
+            <footer class="author-profile-footer">
+                {{#if location}}
+                    <div class="author-profile-location">{{location}}</div>
+                {{/if}}
+                <div class="author-profile-meta">
+                    {{#if website}}
+                        <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
+                    {{/if}}
+                    {{#if twitter}}
+                        <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                    {{/if}}
+                    {{#if facebook}}
+                        <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                    {{/if}}
+                </div>
+            </footer>
+
+        </div>
+        </div>
+
+    </section>
+    {{/author}}
+
     {{#foreach posts}}
         {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
         {{> "post-card"}}
     {{/foreach}}
-        </div>
 
 </div>
-</section>
+</main>

partials/icons/facebook.hbs

@@ -1 +1 @@
-<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg>
+<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>

partials/icons/twitter.hbs

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
+<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

partials/post-card.hbs

@@ -1,7 +1,7 @@
 {{!-- This is a partial file used to generate a post "card"
 which templates loop over to generate a list of posts. --}}
 
-<article class="post-card {{post_class}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{/is}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}">
+<article class="post-card {{post_class}}{{#is "home"}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{/is}}{{/is}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}">
 
     {{#if feature_image}}
     <a class="post-card-image-link" href="{{url}}">
@@ -24,11 +24,9 @@ which templates loop over to generate a list of posts. --}}
 
         <a class="post-card-content-link" href="{{url}}">
             <header class="post-card-header">
-                {{#if primary_tag}}
                 {{#primary_tag}}
                     <div class="post-card-primary-tag">{{name}}</div>
                 {{/primary_tag}}
-                {{/if}}
                 <h2 class="post-card-title">{{title}}</h2>
             </header>
             {{#if excerpt}}

tag.hbs

@@ -1,13 +1,13 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-
 <main id="site-main" class="site-main outer">
 <div class="inner posts">
     <div class="post-feed">
 
         {{#tag}}
         <section class="post-card post-card-large">
+
             {{#if feature_image}}
             <div class="post-card-image-link">
                 {{!-- This is a responsive image, it loads different sizes depending on device
@@ -20,36 +20,31 @@
                     sizes="(max-width: 1000px) 400px, 800px"
                     src="{{img_url feature_image size="m"}}"
                     alt="{{title}}"
-                        loading="lazy"
                 />
             </div>
             {{/if}}
+
             <div class="post-card-content">
             <div class="post-card-content-link">
                 <header class="post-card-header">
-                            <div class="post-card-primary-tag">Tagged</div>
                     <h2 class="post-card-title">{{name}}</h2>
                 </header>
                 <div class="post-card-excerpt">
-                            <p>
                     {{#if description}}
                         {{description}}
                     {{else}}
                         A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
                     {{/if}}
-                            </p>
                 </div>
             </div>
-                </div>{{!--/.post-card-content--}}
+            </div>
 
         </section>
         {{/tag}}
 
         {{#foreach posts}}
-
             {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
             {{> "post-card"}}
-
         {{/foreach}}
 
     </div>