Added/improved multi-author support

assets/css/screen.css

@@ -597,20 +597,55 @@ hr {
     flex-direction: column;
 }
 
+.gh-article-meta .gh-author-image-list {
+    display: flex;
+    margin-bottom: 12px;
+    margin-left: -2px;
+}
+
 .gh-article-meta .gh-author-image {
+    display: block;
     width: 72px;
     height: 72px;
-    margin-bottom: 16px;
+    margin-bottom: 0;
+    border: 2px solid var(--color-white);
 }
 
-.gh-article-meta .gh-author-name {
+.gh-article-meta .gh-author-icon {
+    background-color: var(--color-light-gray);
+}
+
+.gh-article-meta .gh-author-image:hover {
+    opacity: 1;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image + .gh-author-image {
+    margin-left: -20px;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(1) {
+    z-index: 30;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(2) {
+    z-index: 20;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(3) {
+    z-index: 10;
+}
+
+.gh-article-meta .gh-author-name-list {
+    margin-bottom: -2px;
+    line-height: 1.35;
+}
+
+.gh-article-meta .gh-author-name-list a {
     font-size: 1.9rem;
+    font-weight: 700;
     letter-spacing: -0.01em;
-}
-
-.gh-article-meta .gh-author-name a {
-    color: var(--color-darker-gray);
     text-decoration: none;
+    color: var(--color-darker-gray);
 }
 
 .gh-article-date {
@@ -621,6 +656,7 @@ hr {
 }
 
 .gh-article-tag {
+    display: inline-block;
     width: fit-content;
     padding: 2px 12px;
     margin-top: 20px;
@@ -742,11 +778,6 @@ hr {
         grid-row-start: 2;
     }
 
-    .gh-article-meta-inner {
-        flex-direction: row;
-        align-items: center;
-    }
-
     .gh-article-meta .gh-author-image {
         width: 64px;
         height: 64px;
@@ -757,10 +788,6 @@ hr {
     .gh-article-meta-wrapper {
         flex-grow: 1;
     }
-
-    .gh-article-tag {
-        margin-top: 0;
-    }
 }
 
 @media (max-width: 767px) {

partials/icons/avatar.hbs

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="68" height="68"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>

post.hbs

@@ -26,18 +26,23 @@
                     {{/unless}}
                     <aside class="gh-article-meta">
                         <div class="gh-article-meta-inner">
-                            {{#primary_author}}
+                            <div class="gh-author-image-list instapaper_ignore">
+                                {{#foreach authors}}
+                                    <a class="gh-author-image" href="{{url}}">
                                         {{#if profile_image}}
-                                    <figure class="gh-author-image">
                                             <img src="{{profile_image}}" alt="{{name}}">
-                                    </figure>
+                                        {{else}}
+                                            <div class="gh-author-icon">{{> icons/avatar}}</div>
                                         {{/if}}
+                                    </a>
+                                {{/foreach}}
+                            </div>
                             <div class="gh-article-meta-wrapper">
-                                <h4 class="gh-author-name">
+                                <div class="gh-author-name-list">
-                                    <a href="{{url}}">{{name}}</a>
+                                    {{authors}}
-                                </h4>
+                                </div>
-                            {{/primary_author}}
+                                <time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-                            <time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></div>
+                            </div>
                             {{#if primary_tag}}
                                 <a class="gh-article-tag" href="{{primary_tag.url}}" style="--tag-color: {{primary_tag.accent_color}}">{{primary_tag.name}}</a>
                             {{/if}}