From 8fd5352a3f372bd147fd0d3cdf80c08667f13bdf Mon Sep 17 00:00:00 2001 From: Derek Lewis Date: Fri, 21 Aug 2026 00:00:34 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=E2=99=BB=EF=B8=8F?= =?UTF-8?q?=EF=BC=9Akeep=20the=20navbar's=20height=20in=20one=20place?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 74px was written in three files: the page offsets itself by it, the navbar's links fill it, and the toggler wrapper matches it. Three copies of a number that has to agree, and nothing to notice if one drifted. It lives with the palette now, which every stylesheet here is compiled after. The compiled CSS is unchanged, byte for byte. Signed-off-by: Derek Lewis Assisted-by: Claude-Code:claude-opus-5 --- _assets/styles/_custom.scss | 2 +- _assets/styles/_home.scss | 2 +- _assets/styles/_nav.scss | 4 ---- _assets/styles/_sublime-theme.scss | 4 ++++ 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/_assets/styles/_custom.scss b/_assets/styles/_custom.scss index 7eb01a886..8a086d7d2 100644 --- a/_assets/styles/_custom.scss +++ b/_assets/styles/_custom.scss @@ -9,7 +9,7 @@ main > .container { max-width: 48ch; min-height: 100%; padding: 0 16px 104px; - padding-top: 74px; + padding-top: $navbar-height; } .navbar-brand svg { diff --git a/_assets/styles/_home.scss b/_assets/styles/_home.scss index e8d406f2e..d7ae334e4 100644 --- a/_assets/styles/_home.scss +++ b/_assets/styles/_home.scss @@ -17,7 +17,7 @@ --parchment: #{$body-bg}; --primary-tint: #{tint-color($primary, 30%)}; --primary-deep: #{shade-color($primary, 25%)}; - --nav-h: 74px; + --nav-h: #{$navbar-height}; --sans: #{$font-family-sans-serif}; --mono: #{$font-family-monospace}; --wrap: 1200px; diff --git a/_assets/styles/_nav.scss b/_assets/styles/_nav.scss index a124cc69f..65e63c572 100644 --- a/_assets/styles/_nav.scss +++ b/_assets/styles/_nav.scss @@ -1,7 +1,3 @@ -// The fixed navbar's height: the brand mark plus the padding around it. -// _custom.scss offsets the page by the same number. -$navbar-height: 74px; - .navbar-toggler svg { height: 24px; } diff --git a/_assets/styles/_sublime-theme.scss b/_assets/styles/_sublime-theme.scss index 00082f42a..136bcde2b 100644 --- a/_assets/styles/_sublime-theme.scss +++ b/_assets/styles/_sublime-theme.scss @@ -15,6 +15,10 @@ $body-color: #1d1916; // our warm ink and it reads as a mistake. Our dark is the ink. $dark: $body-color; $body-bg: #e7e7d6; + +// The fixed navbar's height: the brand mark plus the padding around it. The +// page offsets itself by this, and the navbar's own links fill it. +$navbar-height: 74px; $pagination-border-width: 2px; $pagination-border-color: $tertiary; $pagination-active-bg: $tertiary; From 91c49997e0c9f57fc4f976f5d41a73831d6e270d Mon Sep 17 00:00:00 2001 From: Derek Lewis Date: Fri, 21 Aug 2026 00:02:16 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=E2=99=BB=EF=B8=8F?= =?UTF-8?q?=EF=BC=9Agive=20the=20front=20page's=20card=20its=20own=20names?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The card naming the newest post used `.post-title`, `.post-meta` and `.post-date`, which are the news archive's names in _news.scss. Both files styling the same words is a trap: a rule written without the `.home` in front of it lands on the archive, which is how the archive came to be drawing its titles in a colour only the home page defines. It is the Latest card, so it is `.latest-*` now. No selector is shared between the two files any more. Signed-off-by: Derek Lewis Assisted-by: Claude-Code:claude-opus-5 --- _assets/styles/_home.scss | 20 ++++++++++---------- collections/_pages/home.html | 14 +++++++------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/_assets/styles/_home.scss b/_assets/styles/_home.scss index d7ae334e4..492b2ee26 100644 --- a/_assets/styles/_home.scss +++ b/_assets/styles/_home.scss @@ -529,7 +529,7 @@ /* --- Latest ---------------------------------------------------------- */ -.home .post { +.home .latest { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.375rem 1.5rem; @@ -538,18 +538,18 @@ border-bottom: 1px solid rgb(167 151 139 / 55%); } -.home .post:hover .post-title { +.home .latest:hover .latest-title { text-decoration: underline; } -.home .post-meta { +.home .latest-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; } -.home .post-cat { +.home .latest-cat { padding: 0.0625rem 0.4375rem; font-family: var(--mono); font-size: 0.6875rem; @@ -559,17 +559,17 @@ background-color: var(--tertiary); } -.home .post-date { +.home .latest-date { font-family: var(--mono); font-size: 0.75rem; color: #6b6259; } -// Both are spans, kept for the grid's sake (see `.post`), but not blockified -// by it: only `.post-body`, the direct grid item, is. Left as spans they run +// Both are spans, kept for the grid's sake (see `.latest`), but not blockified +// by it: only `.latest-body`, the direct grid item, is. Left as spans they run // on as one paragraph, title-text-then-excerpt, and `margin-top` below does // nothing — inline boxes do not take vertical margin. -.home .post-title { +.home .latest-title { display: block; font-size: 1.25rem; font-weight: 700; @@ -577,7 +577,7 @@ color: var(--primary-deep); } -.home .post-excerpt { +.home .latest-excerpt { display: block; max-width: 62ch; margin-top: 0.5rem; @@ -657,7 +657,7 @@ opacity: 0.2; } - .post { + .latest { grid-template-columns: minmax(0, 1fr); } diff --git a/collections/_pages/home.html b/collections/_pages/home.html index 2c79d709c..f8c0cfee5 100644 --- a/collections/_pages/home.html +++ b/collections/_pages/home.html @@ -192,18 +192,18 @@

Latest

{%- assign latest = collections.posts | first -%} {%- if latest %} - - - {{ latest.data.category }} - + + + {{ latest.data.category }} + - - {{ latest.data.title }} - + + {{ latest.data.title }} + {%- if latest.data.excerpt -%} {{- latest.data.excerpt -}} {%- else -%}