From 06ba05a264b3627fcf4b9faab2c1b8ed3b09fe6c Mon Sep 17 00:00:00 2001
From: Tom <thomas.hodson@ecmwf.int>
Date: Mon, 9 Sep 2024 18:12:02 +0200
Subject: [PATCH] Add a "byline"

---
 _layouts/post.html    | 12 ++++++++++--
 _sass/base.scss       | 23 +++++++++++++++++++++--
 _sass/highlights.scss |  4 ----
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index 2241e4f..442d07e 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -14,8 +14,16 @@
     {% include header.html %}
     <main>
         <article class="h-entry">
-            <h1 class = "p-name">{{ page.title }}</h1>
-            <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
+            <section class="header">
+                <section class="title-date-container">
+                    <h1 class = "p-name highlights">{{ page.title }}</h1>
+                    <time class="dt-label dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
+                </section>
+                <hr class="byline">
+                <section class="byline">
+                {{page.excerpt}}
+                </section>
+            </section>
             <summary style="display:none" class="p-summary">{{ page.excerpt }}</summary>
             <div class="e-content">
             {{ content }}
diff --git a/_sass/base.scss b/_sass/base.scss
index 4fb8664..bcfeb77 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -13,8 +13,7 @@
 @import "mastodon_timeline";
 @import "night_mode_toggle";
 @import "highlights";
-
-// The syntax highlighting css
+@import "tables"; // The syntax highlighting css
 // generated with rougify style bw > code_style_bw.scss
 // @import "code_style_bw";
 @import "code_style_github";
@@ -147,6 +146,15 @@ section.title-date-container {
   }
 }
 
+hr.byline {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
+section.byline {
+  font-style: italic;
+  margin-bottom: 2em;
+}
+
 :is(h1, h2, h3, h4, .text-balance) {
   text-wrap: balance;
 }
@@ -219,6 +227,17 @@ figure.centered {
   justify-content: center;
 }
 
+figure.two-wide {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1em;
+  margin-bottom: 1em;
+  img {
+    width: calc(50% - 0.5em);
+  }
+}
+
 section.image-grid-4x4 {
   aspect-ratio: 1 / 1;
   display: grid;
diff --git a/_sass/highlights.scss b/_sass/highlights.scss
index b993e9b..ebb6fd0 100644
--- a/_sass/highlights.scss
+++ b/_sass/highlights.scss
@@ -10,10 +10,6 @@ h1.highlights {
 section.highlights {
   margin-bottom: 2rem;
 
-  h1 {
-    margin-bottom: 1rem;
-  }
-
   a.highlights-more {
     margin-left: $left_pad;
   }