From 0fc470a8d588cac1a51cc4b3e1a2237dc56041c9 Mon Sep 17 00:00:00 2001 From: grm Date: Fri, 18 Sep 2026 14:32:22 +0300 Subject: Special pages: a gallery page of the blog's images MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- internal/web/static/blog.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'internal/web/static/blog.css') 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; } -- cgit v1.2.3