From d0601f06c080a8eb8d781fdd0e3338cd7ed42690 Mon Sep 17 00:00:00 2001 From: grm Date: Thu, 17 Sep 2026 16:42:15 +0300 Subject: Add post summaries, featured images and a page outro MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Recreating gizmolab.net as a blog showed three things the design system could not express, all of them ordinary blog features: - Listings can show a summary and a "Read more" link instead of the whole post (theme.list_style). The summary is the source up to ; without the marker a Markdown post is cut at a block boundary after 70 words (never inside a code fence) and an HTML post is shown whole, since cutting hand-written markup blind would leave tags open. Computed at render time (Post.Excerpt/HasMore), nothing new is stored. - A post can carry a featured image (posts.image, a library file that is unset when the file is deleted): a thumbnail floated beside the entry on listings, and on the post page above or below the text, or not at all, as theme.post_image says. The picker is the design page's imagepick; its library panel moves out of design.html into partials/imagelib.html so both forms share it — which also removes a stale pickAction call the design form's click handler would have hit. - A page can have a closing text after its posts (pages.outro_md/html), in the intro's format: the per-page counterpart of the blog-wide "after the posts" module, for a home page that ends in a site map or a widget. The editor partial takes formatof to share another editor's Format row, and its upload field is now _file so two editors fit in one form. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- internal/web/static/blog.css | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'internal/web/static/blog.css') diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css index 4fd7b76..ace5e5a 100644 --- a/internal/web/static/blog.css +++ b/internal/web/static/blog.css @@ -18,11 +18,21 @@ img { max-width: 100%; height: auto; } .content { padding: 1.5em 2em; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .page-title { margin-top: 0; } .intro { padding-bottom: 1em; margin-bottom: 1.5em; border-bottom: 1px solid rgba(0,0,0,0.1); } +.outro { padding-top: 1em; margin-top: 1.5em; border-top: 1px solid rgba(0,0,0,0.1); } .post { margin-bottom: 2.5em; } .post-title { margin: 0 0 0.1em; font-size: 1.5em; line-height: 1.25; } .post-title a { text-decoration: none; } .post-title a:hover { text-decoration: underline; } .post-date { margin: 0 0 0.8em; font-size: 0.85em; opacity: 0.7; } +/* featured image: a thumbnail floated beside the listing entry, full width on the post page */ +.post-thumb { float: right; width: 30%; max-width: 250px; margin: 0.3em 0 0.5em 1.5em; } +.post-thumb img { display: block; width: 100%; } +.post.has-thumb { overflow: hidden; } +.post-image { margin: 0 0 1em; } +.post-image img { display: block; max-width: 100%; margin: 0 auto; } +.read-more { margin: 0.3em 0 0; font-weight: bold; } +.read-more a { text-decoration: none; } +.read-more a:hover { text-decoration: underline; } .post.single .post-title { font-size: 2em; } .post-body blockquote { margin: 1em 0; padding: 0.2em 1em; border-left: 4px solid rgba(0,0,0,0.15); opacity: 0.9; } .post-body pre { overflow-x: auto; padding: 0.8em 1em; background: rgba(0,0,0,0.06); border-radius: 4px; } @@ -102,6 +112,7 @@ img { max-width: 100%; height: auto; } .col .notice { font-size: 0.9em; padding: 0.6em 0.8em; } @media (max-width: 700px) { .content { padding: 1em; } + .post-thumb { width: 40%; margin-left: 1em; } .site-title { font-size: 1.5em; } .cols { display: block; } .col-left, .col-right { padding: 0; margin-top: 1.5em; } -- cgit v1.2.3