diff options
| author | grm <grm@eyesin.space> | 2026-09-12 12:33:57 +0300 |
|---|---|---|
| committer | grm <grm@eyesin.space> | 2026-09-12 12:33:57 +0300 |
| commit | dd13e4b73a105ee416b6cfd8eb19b217622c0031 (patch) | |
| tree | 93ce503a09b99115efeeee6cd1a85781c1674b02 /internal/web/static | |
| parent | 2b450b66fee4906e746f6e04a6d07a72ff2faf64 (diff) | |
| download | blogspace-dd13e4b73a105ee416b6cfd8eb19b217622c0031.tar.gz blogspace-dd13e4b73a105ee416b6cfd8eb19b217622c0031.tar.bz2 blogspace-dd13e4b73a105ee416b6cfd8eb19b217622c0031.zip | |
Add announcements: blog-wide notices on every page and post
A blog can have any number of announcements ("sections" in the schema):
a book club's next meeting, this month's pick, a holiday closure. Each
has a placement (above or below the posts, or under the menu when the
menu is a left sidebar), a look (highlighted, warning, plain), an order,
and an on/off switch so recurring notices can be kept around while hidden.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A
Diffstat (limited to 'internal/web/static')
| -rw-r--r-- | internal/web/static/blog.css | 11 |
1 files changed, 11 insertions, 0 deletions
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index b09689b..a3695ae 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -29,6 +29,14 @@ img { max-width: 100%; height: auto; } .post-body table { border-collapse: collapse; } .post-body th, .post-body td { border: 1px solid rgba(0,0,0,0.15); padding: 0.3em 0.6em; } .post-body hr { border: 0; border-top: 1px solid rgba(0,0,0,0.15); } +/* announcements: translucent tints so they sit on any theme colour */ +.notice { margin: 0 0 1.5em; padding: 0.8em 1em; border: 1px solid rgba(0,0,0,0.15); } +.notice-note { background: rgba(255, 200, 60, 0.18); border-left: 5px solid rgba(210, 150, 0, 0.85); } +.notice-warning { background: rgba(220, 60, 40, 0.10); border-left: 5px solid rgba(190, 40, 30, 0.85); } +.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; } .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; } @@ -41,10 +49,13 @@ img { max-width: 100%; height: auto; } .nav-left-sidebar .body-wrap .site-nav a { display: block; padding: 0.4em 1em; } .nav-left-sidebar .body-wrap .site-nav .nav-inner { padding: 0; } .nav-left-sidebar .body-wrap .content { margin-left: 200px; } +.nav-left-sidebar .body-wrap .sidebar-notices { float: left; clear: left; width: 180px; margin-top: 1em; } +.nav-left-sidebar .body-wrap .sidebar-notices .notice { font-size: 0.9em; padding: 0.6em 0.8em; } @media (max-width: 700px) { .content { padding: 1em; } .site-title { font-size: 1.5em; } .nav-left-sidebar .body-wrap .site-nav { float: none; width: auto; margin-bottom: 1em; } .nav-left-sidebar .body-wrap .site-nav a { display: inline-block; } .nav-left-sidebar .body-wrap .content { margin-left: 0; } + .nav-left-sidebar .body-wrap .sidebar-notices { float: none; width: auto; margin: 0 0 1em; } } |