Article meta

assets/css/screen.css

@@ -1278,6 +1278,7 @@ Search                         LOGO                    Login Subscribe
     margin-bottom: 24px;
     width: 80px;
     height: 80px;
+    border-radius: 50%;
 }
 
 .gh-about-title {
@@ -1296,9 +1297,11 @@ Search                         LOGO                    Login Subscribe
     margin-top: 24px;
 }
 
-/* 13. Article
+/* 13. Post/page
 /* ---------------------------------------------------------- */
 
+/* 13.1. Article */
+
 .gh-article {
     --container-width: 1120px;
 
@@ -1333,6 +1336,68 @@ Search                         LOGO                    Login Subscribe
     letter-spacing: -0.01em;
 }
 
+.gh-article-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 20px;
+    margin-left: 6px;
+}
+
+.gh-article-author-image {
+    display: flex;
+    margin-right: 8px;
+}
+
+.gh-article-author-image a {
+    position: relative;
+    margin: 0 -8px;
+    width: 56px;
+    height: 56px;
+    overflow: hidden;
+    background-color: var(--color-light-gray);
+    border-radius: 50%;
+    border: 3px solid var(--background-color);
+}
+
+.gh-article-author-image a:first-child {
+    z-index: 10;
+}
+
+.gh-article-author-image a:nth-child(2) {
+    z-index: 9;
+}
+
+.gh-article-author-image a:nth-child(3) {
+    z-index: 8;
+}
+
+.gh-article-author-image :is(img, svg) {
+    position: absolute;
+    inset: 0;
+    object-fit: cover;
+}
+
+.gh-article-meta-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.gh-article-author-name {
+    font-size: 1.7rem;
+    font-weight: 650;
+    letter-spacing: -0.013em;
+}
+
+.gh-article-meta-content {
+    font-size: 1.4rem;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: -0.006em;
+    color: var(--color-secondary-text);
+}
+
 .gh-article-image {
     grid-column: wide;
     margin-top: 48px;
@@ -1342,6 +1407,20 @@ Search                         LOGO                    Login Subscribe
     width: 100%;
 }
 
+/* 13.2. Page without header */
+
+.page-template .gh-content:only-child > *:first-child:not(.kg-width-full) {
+    margin-top: 48px;
+}
+
+.page-template .gh-content > *:last-child:not(.kg-width-full) {
+    margin-bottom: 64px;
+}
+
+.page-template .gh-footer {
+    margin-top: 0;
+}
+
 /* 14. Content
 /* ---------------------------------------------------------- */
 
@@ -1360,10 +1439,6 @@ headings, text, images and lists. We deal with cards lower down. */
     margin-bottom: 0;
 }
 
-.gh-content > *:first-child {
-    margin-top: 0 !important;
-}
-
 /* Add back a top margin to all headings,
 unless a heading is the very first element in the post content */
 .gh-content > [id]:not(:first-child) {
@@ -1679,7 +1754,7 @@ figcaption a {
 /* ---------------------------------------------------------- */
 
 .post-template .gh-container {
-    padding-top: 64px;
+    padding-block: 64px 80px;
     background-color: var(--color-lighter-gray);
 }
 
@@ -1840,7 +1915,7 @@ figcaption a {
 /* ---------------------------------------------------------- */
 
 .gh-footer {
-    margin-top: 80px;
+    margin-top: 64px;
     font-size: 1.5rem;
     color: var(--color-darker-gray);
 }
@@ -1868,7 +1943,6 @@ figcaption a {
 
 .post-template .gh-container + .gh-footer {
     margin-top: 0;
-    padding-top: 120px;
 }
 
 .post-template .gh-container + .gh-footer:not(.has-accent-color) {

post.hbs

@@ -8,6 +8,7 @@
     <article class="gh-article {{post_class}}">
 
         <header class="gh-article-header gh-canvas">
+
             {{#if primary_tag}}
                 <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
             {{/if}}
@@ -15,7 +16,32 @@
             {{#if custom_excerpt}}
                 <p class="gh-article-excerpt is-body">{{custom_excerpt}}</p>
             {{/if}}
+
+            <div class="gh-article-meta">
+                <div class="gh-article-author-image">
+                    {{#foreach authors}}
+                        {{#if profile_image}}
+                            <a href="{{url}}">
+                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                            </a>
+                        {{else}}
+                            <a href="{{url}}">{{> "icons/avatar"}}</a>
+                        {{/if}}
+                    {{/foreach}}
+                </div>
+                <div class="gh-article-meta-wrapper">
+                    <h4 class="gh-article-author-name">{{authors}}</h4>
+                    <div class="gh-article-meta-content">
+                        <time class="gh-article-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                        {{#if reading_time}}
+                            <span class="gh-article-meta-length"><span class="bull">—</span> {{reading_time}}</span>
+                        {{/if}}
+                    </div>
+                </div>
+            </div>
+
             {{> "feature-image"}}
+
         </header>
 
         <section class="gh-content gh-canvas is-body">