Add the Gizmo look for announcements: framed boxes that share a row

gizmolab's "next event" and "next assembly" boxes were hand-written HTML in
the home page's intro; they are announcements by nature, so now they can
be: a fourth style, a box framed in the theme's link colour with an italic
heading. Headed Gizmo boxes in the same spot share a row on wide screens
(the notices wrapper is a flex row, stacking on old browsers like .cols);
one without a heading takes the whole row, which is how a banner line goes
above a pair of boxes.

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

1 files changed, 13 insertions, 6 deletions

diff --git a/AGENTS.md b/AGENTS.md
index 068889b..5753d26 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -70,8 +70,8 @@ internal/web/         server.go (host router, middleware, render helpers)
                       summary.go (what a listing shows of a post)
                       templates/ (embedded; layouts/, partials/, auth/, dashboard/, admin/, blog/)
                       static/ (dashboard.css — lean look; custom properties, flexbox and grid
-                               are fine there. blog.css — floats except the three-column `.cols`,
-                               which is flexbox; it must keep working on old browsers)
+                               are fine there. blog.css — floats except the three-column `.cols`
+                               and the `.notices` row, which are flexbox; it must keep working on old browsers)
 ```
 
 ## Key mechanics
@@ -316,12 +316,19 @@ internal/web/         server.go (host router, middleware, render helpers)
 - **Announcements** (`sections` table, `store/sections.go`,
   `handlers_sections.go`, `/b/{sub}/announcements…`): per-blog notices with
   `placement` (`<column>-<position>`: left|main|right × top|bottom, split by
-  `Section.Column()/Position()`), `style` (plain|note|warning), `enabled`
+  `Section.Column()/Position()`), `style` (plain|note|warning|gizmo — a CHECK
+  constraint, so a new style needs a migration), `enabled`
   and `sort_order`. `blogView` loads the enabled ones and `placeNotices`
   groups them by placement, moving ones for a side column that is not laid
   out into the main column.
-  Rendered by the `notices` template in `layouts/blog.html`; CSS classes
-  `notice notice-<style>` use translucent colours so they fit any theme.
+  Rendered by the `notices` template in `layouts/blog.html` inside a
+  `.notices` wrapper; CSS classes `notice notice-<style>` use translucent
+  colours so they fit any theme, except `gizmo`: a box framed in the theme's
+  link colour (`.notice-gizmo { border-color }` comes from the theme CSS).
+  On wide screens `.notices` is a flex row (the second flexbox in blog.css,
+  stacking on old browsers like `.cols`): headed gizmo boxes (`.headed`)
+  start at 30% and grow, so up to three share a row; every other box takes
+  the whole row.
 - **Dashboard nav**: `dashnav.html` marks the current tab with `hasPrefix
   .Path`; a new management section needs a tab there.
 - **Languages** (`internal/i18n`, `settings.language`): every blog has a
@@ -425,7 +432,7 @@ superadmin password to `admin`. Production refuses both.
   `-- +goose Up/Down` sections; they run automatically at startup. Never
   edit an applied migration. Blog chain so far: `00001_init`, `00002_language`,
   `00003_files`, `00004_tags`, `00005_search`, `00006_format`, `00007_post_image`,
-  `00008_page_outro`; control: `00001_init`, `00002_upload_limit`. Both chains were re-baselined at 00001 after
+  `00008_page_outro`, `00009_gizmo_style`; control: `00001_init`, `00002_upload_limit`. Both chains were re-baselined at 00001 after
   the move to per-blog databases; deployments from before it have
   `goose_db_version` rows 2–7 in the control DB that must be deleted once
   (README "Upgrading from a single database") or the next control migration