diff options
| author | grm <grm@eyesin.space> | 2026-09-18 14:32:22 +0300 |
|---|---|---|
| committer | grm <grm@eyesin.space> | 2026-09-18 14:32:22 +0300 |
| commit | 0fc470a8d588cac1a51cc4b3e1a2237dc56041c9 (patch) | |
| tree | f4cde97479977d46046bc18953a1d0ecc3686165 /internal/web/static/blog.css | |
| parent | a2b2574538c30278f4edd8e6b2704a176a7750a2 (diff) | |
| download | blogspace-0fc470a8d588cac1a51cc4b3e1a2237dc56041c9.tar.gz blogspace-0fc470a8d588cac1a51cc4b3e1a2237dc56041c9.tar.bz2 blogspace-0fc470a8d588cac1a51cc4b3e1a2237dc56041c9.zip | |
Special pages: a gallery page of the blog's images
A page's kind says what it shows between its intro and outro: posts,
as before, or something special. The first special kind is a gallery —
every image in the files library as a masonry wall (CSS columns, no
script), newest first, each linked to its full-size file. The page form
lists the library's images with a Hide tick per picture; exclusions are
stored (page_hidden_files) rather than inclusions so a new upload shows
up without editing the page, and the design's own pictures — logo,
favicon, header and background image — are never shown. Special pages
keep the page chrome (menu, announcements, home, ordering) but hold no
posts: the post forms skip them and a forced page id is refused.
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 | 5 |
1 files changed, 5 insertions, 0 deletions
diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index 8cd969e..aa8357e 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -56,6 +56,10 @@ img { max-width: 100%; height: auto; } .post.has-thumb { overflow: hidden; } .post-image { margin: 0 0 1em; } .post-image img { display: block; max-width: 100%; margin: 0 auto; } +/* gallery page: a masonry wall from CSS columns alone; without them the pictures simply stack */ +.gallery { -webkit-column-width: 220px; -moz-column-width: 220px; column-width: 220px; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; } +.gallery a { display: block; margin: 0 0 1em; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } +.gallery img { display: block; width: 100%; } .read-more { margin: 0.3em 0 0; font-weight: bold; } .read-more a { text-decoration: none; } .read-more a:hover { text-decoration: underline; } @@ -158,6 +162,7 @@ img { max-width: 100%; height: auto; } @media (max-width: 700px) { .content { padding: 1em; } .post-thumb { width: 40%; margin-left: 1em; } + .gallery { -webkit-column-width: 140px; -moz-column-width: 140px; column-width: 140px; } .site-title { font-size: 1.5em; } .ruled > .header-rule { display: none; } .ruled > .brand { white-space: normal; } .cols { display: block; } |