diff options
| author | grm <grm@eyesin.space> | 2026-09-17 17:09:01 +0300 |
|---|---|---|
| committer | grm <grm@eyesin.space> | 2026-09-17 17:09:28 +0300 |
| commit | f16bd0f79c624665580615321b5d13b4be27cdad (patch) | |
| tree | 3f7c47fdd8c8ff2e928b04891dfa65ed3ffe8c75 /internal/web/static/blog.css | |
| parent | f79f97800f7f9ba1ef2b3e2e56040a952a9668a5 (diff) | |
| download | blogspace-f16bd0f79c624665580615321b5d13b4be27cdad.tar.gz blogspace-f16bd0f79c624665580615321b5d13b4be27cdad.tar.bz2 blogspace-f16bd0f79c624665580615321b5d13b4be27cdad.zip | |
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
Diffstat (limited to 'internal/web/static/blog.css')
| -rw-r--r-- | internal/web/static/blog.css | 14 |
1 files changed, 13 insertions, 1 deletions
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index ace5e5a..eabb314 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -48,7 +48,19 @@ img { max-width: 100%; height: auto; } .notice-title { margin: 0 0 0.3em; font-size: 1em; text-transform: uppercase; letter-spacing: 0.05em; } .notice-body > :first-child { margin-top: 0; } .notice-body > :last-child { margin-bottom: 0; } -.content > .notice:last-child { margin: 1.5em 0 0; } +.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 */ +.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%; } +} .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; } .muted { opacity: 0.7; } |