Improved author and tag header styles

no refs.

- added default avatar for authors template
- fixed typography inconsistencies, alignment and spacing issues for author and tags headers
- applied CSSComb

assets/css/screen.css

@@ -205,6 +205,7 @@ body {
 .site-home-header .site-description {
     font-size: 2.2rem;
     font-weight: 300;
+    text-align: center;
 }
 
 
@@ -249,7 +250,7 @@ body {
 
 @media (max-width: 500px) {
     .site-home-header .site-title {
-        font-size: 3.2rem;
+        font-size: 4.2rem;
     }
 
     .site-home-header .site-description {
@@ -257,8 +258,19 @@ body {
     }
 
     .site-archive-header .site-header-content {
+        flex-direction: column;
+        align-items: center;
         min-height: unset;
     }
+
+    .site-archive-header .site-title {
+        font-size: 4.2rem;
+        text-align: center;
+    }
+
+    .site-archive-header .no-image .site-header-content {
+        padding: 12vw 0 20px;
+    }
 }
 
 
@@ -454,8 +466,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 .site-nav-right {
     flex: 0 1 auto;
     display: flex;
-    align-items: center;
     justify-content: flex-end;
+    align-items: center;
     padding: 10px 0;
     height: 64px;
 }
@@ -517,8 +529,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 .subscribe-button {
     display: block;
-    padding: 4px 10px;
     margin: 0 0 0 10px;
+    padding: 4px 10px;
     border: #fff 1px solid;
     color: #fff;
     line-height: 1em;
@@ -1408,7 +1420,8 @@ Usage (In Ghost editor):
 
     .post-full-title {
         margin-top: 0.2em;
-        font-size: 3.3rem;
+        font-size: 4.2rem;
+        line-height: 1.05em;
     }
 
     .post-full-image {
@@ -1652,8 +1665,12 @@ Usage (In Ghost editor):
 
 @media (max-width: 500px) {
     .author-avatar {
-        width: 32px;
-        height: 32px;
+        width: 36px;
+        height: 36px;
+    }
+
+    .post-full-byline {
+        margin-top: 20px;
     }
 
     .post-full-byline-meta {
@@ -2338,6 +2355,10 @@ Usage (In Ghost editor):
     padding: 10vw 0 10px;
 }
 
+.site-archive-header .author-header {
+    align-items: center;
+}
+
 .site-archive-header .no-image .author-header {
     padding-bottom: 20px;
 }
@@ -2352,7 +2373,7 @@ Usage (In Ghost editor):
 .site-header-content .author-profile-image {
     z-index: 10;
     flex-shrink: 0;
-    margin: 5px 0 0;
+    margin: -4px 0 0;
     width: 110px;
     height: 110px;
     box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
@@ -2361,10 +2382,10 @@ Usage (In Ghost editor):
 .author-header-content .author-bio {
     z-index: 10;
     flex-shrink: 0;
-    margin: 6px 0 -6px;
+    margin: 6px 0 0;
     max-width: 46em;
     font-size: 2.0rem;
-    line-height: 1.4em;
+    line-height: 1.3em;
     font-weight: 400;
     opacity: 0.8;
 }
@@ -2379,6 +2400,7 @@ Usage (In Ghost editor):
     font-weight: 400;
     letter-spacing: 0.2px;
     text-transform: uppercase;
+    white-space: nowrap;
 }
 
 .author-header-content .social-link:first-of-type {
@@ -2408,14 +2430,10 @@ Usage (In Ghost editor):
     opacity: 1;
 }
 
-.author-social-link {
-    padding: 10px 0;
-}
-
 .author-social-link {
     display: inline-block;
     margin: 0;
-    padding: 10px 0;
+    padding: 6px 0;
 }
 
 .author-location + .author-stats:before,
@@ -2434,6 +2452,14 @@ Usage (In Ghost editor):
     color: var(--midgrey);
 }
 
+@media (max-width: 700px) {
+    .author-location,
+    .author-stats,
+    .author-stats + .author-social-link:first-of-type:before {
+        display: none;
+    }
+}
+
 @media (max-width: 500px) {
     .author-header {
         padding: 10px 0 0;
@@ -2444,23 +2470,31 @@ Usage (In Ghost editor):
     }
 
     .author-header-content {
-        margin-left: 20px;
+        align-items: center;
+        margin: 16px 0 0 0;
     }
 
     .site-header-content .author-profile-image {
-        width: 80px;
-        height: 80px;
+        width: 96px;
+        height: 96px;
     }
 
     .author-header-content .author-bio {
         font-size: 1.8rem;
         line-height: 1.3em;
         letter-spacing: 0;
+        text-align: center;
     }
 
-    .author-location,
-    .author-stats {
-        display: none;
+    .author-header-content .author-meta {
+        margin-top: 8px;
+    }
+
+    .author-location + .author-stats:before,
+    .author-stats + .author-social-link:before,
+    .author-social-link + .author-social-link:before {
+        display: inline;
+        margin: 0 6px;
     }
 }
 
@@ -2587,10 +2621,10 @@ Usage (In Ghost editor):
     position: absolute;
     top: 16px;
     right: 20px;
+    z-index: 2000;
+    display: block;
     width: 40px;
     height: 40px;
-    display: block;
-    z-index: 2000;
 }
 
 .subscribe-close-button:before {
@@ -2641,9 +2675,9 @@ Usage (In Ghost editor):
 }
 
 .subscribe-overlay:target {
+    z-index: 2001;
     opacity: 1;
     pointer-events: auto;
-    z-index: 2001;
 }
 
 .subscribe-overlay-content {

author.hbs

@@ -12,6 +12,8 @@
             <div class="site-header-content author-header">
                 {{#if profile_image}}
                     <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+                {{else}}
+                    <span class="author-profile-image">{{> "icons/avatar"}}</span>
                 {{/if}}
                 <div class="author-header-content">
                     <h1 class="site-title">{{name}}</h1>