From 2c5dd677b035bc471759d353701d45569dec3eca Mon Sep 17 00:00:00 2001 From: James Jiang Date: Tue, 28 Jul 2026 13:12:05 +1000 Subject: [PATCH 1/6] fix: mobile footer flow, 6-post pages, flipped post-nav, Node 24 CI - footer flows to page bottom below 82rem so it stops covering the content column; stays fixed bottom-left on wider viewports - pagerSize 12 -> 6 - post-nav arrows flipped: left = newer post, right = older - exampleSite: languageCode -> locale (Hugo 0.158 deprecation) - CI: actions/checkout@v4 -> v5 (off the deprecated Node 20 runtime) Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01RbMGFzZfHUfbhid95FjBKb --- .github/workflows/ci.yml | 2 +- .github/workflows/pages.yml | 2 +- assets/css/main.css | 8 ++++++++ exampleSite/hugo.toml | 4 ++-- layouts/partials/post-nav.html | 6 ++++-- 5 files changed, 16 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4b0e03a..9d80bcb 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -11,7 +11,7 @@ jobs: env: HUGO_VERSION: 0.164.0 steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 with: submodules: recursive - name: Install Hugo (extended) diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index d173bc3..332d807 100644 --- a/.github/workflows/pages.yml +++ b/.github/workflows/pages.yml @@ -21,7 +21,7 @@ jobs: env: HUGO_VERSION: 0.164.0 steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 with: submodules: recursive - name: Install Hugo (extended) diff --git a/assets/css/main.css b/assets/css/main.css index 14fd251..c44fed2 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -522,6 +522,14 @@ main { padding-bottom: 6rem; } .empty { color: var(--muted); } +/* Below ~82rem the centred content column eats its left gutter, so the fixed + footer would sit on top of the text. Unfix it and let it flow at the page + bottom; drop the space main reserved for the fixed footer. */ +@media (max-width: 82rem) { + .site-footer { position: static; margin: 2rem 1rem 1rem; } + main { padding-bottom: 1.5rem; } +} + @media (max-width: 34rem) { body { font-size: 17px; } .post__title { font-size: 1.6rem; } diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml index fd3074e..673b502 100644 --- a/exampleSite/hugo.toml +++ b/exampleSite/hugo.toml @@ -1,11 +1,11 @@ baseURL = "https://example.org/" -languageCode = "en" +locale = "en" title = "basic" theme = "basic" themesDir = "../.." [pagination] - pagerSize = 12 + pagerSize = 6 [params] description = "A minimal theme for text-first blogs." diff --git a/layouts/partials/post-nav.html b/layouts/partials/post-nav.html index 9551151..1b063e2 100644 --- a/layouts/partials/post-nav.html +++ b/layouts/partials/post-nav.html @@ -1,4 +1,6 @@ From 2729cc7e56f21175b85dbf97bb3dbf6d5f814309 Mon Sep 17 00:00:00 2001 From: James Jiang Date: Tue, 28 Jul 2026 13:12:51 +1000 Subject: [PATCH 2/6] style(console): shrink the floating terminal 10%, keep aspect ratio Font 0.82rem -> 0.738rem and height cap 36rem -> 32.4rem. Width is ch-based so it tracks the font down, preserving the 80x24 grid. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01RbMGFzZfHUfbhid95FjBKb --- assets/css/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index c44fed2..5936793 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -255,10 +255,10 @@ main { padding-bottom: 6rem; } box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2); overflow: hidden; font-family: var(--mono); - font-size: 0.82rem; + font-size: 0.738rem; /* 10% smaller; ch-based width tracks it, keeping 80 cols */ display: flex; flex-direction: column; - height: min(90vh, 36rem); + height: min(90vh, 32.4rem); } /* the display:flex above beats the UA [hidden] rule, so hide explicitly */ .console[hidden] { display: none; } From 59475e823a353e76f7097b3e984a80744669016b Mon Sep 17 00:00:00 2001 From: James Jiang Date: Tue, 28 Jul 2026 13:13:57 +1000 Subject: [PATCH 3/6] fix(footer): pin flowed footer to viewport bottom on short pages Below 82rem the footer is position:static, so on short pages (about, now) it floated just under the content mid-viewport. Make body a min-height:100vh flex column and give the footer margin-top:auto so it sits at the viewport bottom on short pages and the content end on long ones. The fixed footer (>82rem) is out of flow and unaffected. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01RbMGFzZfHUfbhid95FjBKb --- assets/css/main.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/css/main.css b/assets/css/main.css index 5936793..c70b8c3 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -107,6 +107,11 @@ body { font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; + /* sticky-footer column: lets a flowed (non-fixed) footer sit at the viewport + bottom on short pages and at the content end on long ones */ + min-height: 100vh; + display: flex; + flex-direction: column; } a { color: inherit; text-decoration: none; } @@ -526,7 +531,8 @@ main { padding-bottom: 6rem; } footer would sit on top of the text. Unfix it and let it flow at the page bottom; drop the space main reserved for the fixed footer. */ @media (max-width: 82rem) { - .site-footer { position: static; margin: 2rem 1rem 1rem; } + /* margin-top:auto shoves the footer to the bottom of the flex column */ + .site-footer { position: static; margin: auto 1rem 1rem; } main { padding-bottom: 1.5rem; } } From 546bf628868ef98304ec3e58fd12aa44b3fcd58f Mon Sep 17 00:00:00 2001 From: James Jiang Date: Tue, 28 Jul 2026 13:14:44 +1000 Subject: [PATCH 4/6] style(console): restore original font size, keep window 10% smaller Font back to 0.82rem; shrink width to 75.6ch (was 84ch) so the window stays 10% smaller by box, not by shrinking the text. Height 32.4rem unchanged, so the aspect ratio holds. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01RbMGFzZfHUfbhid95FjBKb --- assets/css/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index c70b8c3..140124e 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -253,14 +253,14 @@ main { padding-bottom: 6rem; } bottom: 1rem; z-index: 51; /* roughly an 80x24 terminal */ - width: min(84ch, calc(100vw - 2rem)); + width: min(75.6ch, calc(100vw - 2rem)); /* 10% narrower than the 84ch base */ background: var(--bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2); overflow: hidden; font-family: var(--mono); - font-size: 0.738rem; /* 10% smaller; ch-based width tracks it, keeping 80 cols */ + font-size: 0.82rem; display: flex; flex-direction: column; height: min(90vh, 32.4rem); From 6d3af253929482469e4ecbfe30954f956ad8a7e9 Mon Sep 17 00:00:00 2001 From: James Jiang Date: Tue, 28 Jul 2026 13:18:04 +1000 Subject: [PATCH 5/6] fix(layout): keep content column at full width in the body flex column The sticky-footer change made body a flex column. Its flex items (.site-header, main) have margin-inline:auto and no explicit width, so on short pages they shrank to fit-content instead of the 68ch measure, squishing content and the navbar. Add width:100% so max-width caps them at 68ch as before. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01RbMGFzZfHUfbhid95FjBKb --- assets/css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/main.css b/assets/css/main.css index 140124e..7b87434 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -128,6 +128,7 @@ a:focus-visible { color: var(--link); } /* ---- layout ---- */ .site-header, main { + width: 100%; /* body is a flex column; without this they shrink to fit-content */ max-width: var(--measure); margin-inline: auto; padding-inline: var(--pad); From 209361313e726c74a0786987152050651ce7bbf8 Mon Sep 17 00:00:00 2001 From: James Jiang Date: Tue, 28 Jul 2026 13:23:42 +1000 Subject: [PATCH 6/6] fix(a11y): raise light-mode muted contrast to WCAG AA - --muted #8a8a8a (3.45:1) -> #767676 (4.54:1) so small secondary text (dates, meta, footer, eyebrows, pager count) clears AA - add prefers-reduced-motion opt-out (kills transitions/animations) - merge the two duplicate dark prefers-color-scheme @media blocks Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01RbMGFzZfHUfbhid95FjBKb --- assets/css/main.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 7b87434..0d51eb4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -25,7 +25,7 @@ :root { --bg: #ffffff; --fg: #111111; - --muted: #8a8a8a; + --muted: #767676; /* ~4.54:1 on #fff — clears WCAG AA for small text */ --border: #e6e6e6; --accent: #b5451e; /* the pop of colour — change this one line to re-tint */ --accent-fg: #ffffff; /* text/glyph colour on an accent fill */ @@ -60,11 +60,6 @@ --fg: #ededed; --muted: #7d7d7d; --border: #262626; - } -} -/* dark base shares its pops with the media-query block above */ -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { --selection: #33261f; --c-red: #ff6b6b; --c-orange: #ffb86c; --c-yellow: #f1fa8c; --c-green: #50fa7b; --c-cyan: #8be9fd; --c-blue: #7aa2f7; --c-purple: #bd93f9; --c-pink: #ff79c6; @@ -88,6 +83,16 @@ * { box-sizing: border-box; } +/* honour reduced-motion: kill transitions/animations for those who ask */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + } +} + /* visually hidden but readable by screen readers (e.g. the home-page h1) */ .visually-hidden { position: absolute;