From 19353a51c869f4b24ef2253d856084b6e6728048 Mon Sep 17 00:00:00 2001 From: grm Date: Fri, 18 Sep 2026 12:10:26 +0300 Subject: Pair headed gizmo announcements two to a row, split by text length MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- internal/web/static/blog.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'internal/web/static') 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-, 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; } -- cgit v1.2.3