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; }