Pair headed gizmo announcements two to a row, split by text length

Headed gizmo boxes used to share a row equally, up to three of them.
Now placeNotices pairs consecutive ones in the main column and gives the
pair one of the fixed splits — 25/75, 33/67, 50/50, 67/33, 75/25 —
nearest the ratio of the text each shows, so the wordier box gets the
room. The bases add up to 90% so a third box never joins the row, and a
side column, too narrow for two, stacks them.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

1 files changed, 10 insertions, 4 deletions

diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 81a5940..352f841 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -77,15 +77,21 @@ img { max-width: 100%; height: auto; }
 .content > .notices:last-child { margin-top: 1.5em; }
 .content > .notices:last-child > .notice:last-child { margin-bottom: 0; }
 /* gizmo: a box framed in the link colour (set by the theme CSS). On wide
-   screens the flex wrapper puts up to three headed gizmo boxes in one row
-   (they start at 30% and grow); a gizmo box without a heading, like every
-   plain/note/warning box, takes the whole row */
+   screens the flex wrapper puts two headed gizmo boxes in one row of the main
+   column, the wider share (.w-<percent>, set by placeNotices from the amount
+   of text) to the longer one: the bases add up to 90% so a third never fits,
+   and the leftover grows into both equally. A gizmo box without a heading,
+   like every plain/note/warning box, takes the whole row */
 .notice-gizmo { padding: 1em 1.2em; border: 1px solid; background: none; }
 .notice-gizmo .notice-title { font-size: 1.15em; font-style: italic; text-transform: none; letter-spacing: 0; margin-bottom: 0.6em; }
 @media (min-width: 701px) {
   .notices { display: flex; flex-wrap: wrap; gap: 0 1em; align-items: stretch; }
   .notices .notice { flex: 1 1 100%; }
-  .notices .notice-gizmo.headed { flex: 1 1 30%; }
+  .col-main .notices .w-25 { flex-basis: 20%; }
+  .col-main .notices .w-33 { flex-basis: 28%; }
+  .col-main .notices .w-50 { flex-basis: 45%; }
+  .col-main .notices .w-67 { flex-basis: 62%; }
+  .col-main .notices .w-75 { flex-basis: 70%; }
 }
 .pager { margin-top: 2em; padding-top: 1em; border-top: 1px solid rgba(0,0,0,0.1); text-align: center; }
 .pager a, .pager span { margin: 0 0.8em; }