Add post summaries, featured images and a page outro

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 <!--more-->;
  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 <name>_file so two editors fit in one form.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

1 files changed, 11 insertions, 0 deletions

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; }