Add the Layout tab: five areas with modules, columns and a menu editor

A blog page is now header, left column, main content, right column and
footer, each holding an ordered list of modules (blog title, logo, menu,
archive by year/month, recent posts, custom HTML, footer text, RSS link,
site map). Side columns have percentage widths, can be hidden, and can
keep their space when empty; on phones they stack under the posts. The
menu becomes its own ordered list mixing pages and outside links.
Announcements are placed per column at its top or bottom.

Modules and menu items get tables; the migration derives them from each
blog's old theme (nav position, footer text, show-in-nav pages) so
existing blogs look the same. Custom HTML is deliberately stored and
served as-is (owner's decision; see AGENTS.md for why the blast radius
is the blogger's own origin).

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

1 files changed, 38 insertions, 12 deletions

diff --git a/internal/web/static/blog.css b/internal/web/static/blog.css
index 778c169..c785ca6 100644
--- a/internal/web/static/blog.css
+++ b/internal/web/static/blog.css
@@ -5,6 +5,8 @@ img { max-width: 100%; height: auto; }
 .site-header { padding: 0; }
 .header-image img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
 .header-text { padding: 1.4em 1em; }
+.header-logo { padding: 1em; }
+.header-logo img.logo { display: inline-block; width: auto; }
 .site-title { margin: 0; font-size: 2em; line-height: 1.2; }
 .site-title a { text-decoration: none; }
 .tagline { margin: 0.3em 0 0; opacity: 0.85; }
@@ -12,7 +14,7 @@ img { max-width: 100%; height: auto; }
 .nav-inner { padding: 0.3em 1em; }
 .site-nav a { display: inline-block; padding: 0.5em 0.8em; text-decoration: none; font-weight: bold; }
 .site-nav a.active, .site-nav a:hover { text-decoration: underline; }
-.body-wrap { padding: 1.5em 1em; overflow: hidden; }
+.body-wrap { padding: 1.5em 1em; }
 .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); }
@@ -43,19 +45,43 @@ img { max-width: 100%; height: auto; }
 .site-footer { margin-top: 1em; padding: 1.5em 0; text-align: center; }
 .site-footer p { margin: 0.3em 0; }
 .site-footer .small { font-size: 0.85em; opacity: 0.8; }
+.site-footer .mod { background: none; box-shadow: none; padding: 0; margin: 0 0 0.8em; }
+.site-footer .mod-title { font-size: 0.95em; margin: 0 0 0.3em; }
+.site-footer ul { list-style: none; margin: 0; padding: 0; }
+.site-footer .mod-sitemap li { display: inline-block; margin: 0 0.6em; }
+.custom-html { margin: 0 0 1.5em; }
+.custom-html-below { margin: 1.5em 0 0; }
 
-/* left sidebar layout: float the menu beside the content */
-.nav-left-sidebar .body-wrap .site-nav { float: left; width: 180px; border: 0; border-radius: 6px; padding: 0.5em 0; }
-.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; text-align: left; } /* alignment is a horizontal-menu option */
-.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; }
+/* columns: main first in the HTML so it comes first on phones; on wide screens
+   flexbox puts the left column before it. Widths come from the theme CSS.
+   Browsers without flexbox see the columns stacked, which still reads fine. */
+.cols { display: flex; flex-wrap: wrap; align-items: flex-start; }
+body.has-left .wrap, body.has-right .wrap { max-width: none; } /* side columns: use the whole page */
+.col { width: 100%; }
+.col-left { order: -1; padding-right: 1.5em; }
+.col-right { padding-left: 1.5em; }
+/* side-column and footer modules */
+.mod { margin: 0 0 1.5em; padding: 1em 1.2em; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); font-size: 0.95em; }
+.mod > :last-child { margin-bottom: 0; }
+.mod-title { margin: 0 0 0.6em; font-size: 1em; text-transform: uppercase; letter-spacing: 0.05em; }
+.mod ul { margin: 0; padding-left: 1.2em; }
+.mod li { margin: 0.25em 0; }
+.mod-logo { text-align: center; }
+.mod-logo img.logo { width: auto; }
+.col .site-nav { border: 0; padding: 0.5em 0; }
+.col .site-nav .mod-title { padding: 0 1em; }
+.col .site-nav .nav-inner { padding: 0; }
+.col .site-nav a { display: block; padding: 0.4em 1em; }
+.mod-archive details { margin: 0.2em 0; }
+.mod-archive details details { margin-left: 1em; }
+.mod-archive summary { cursor: pointer; padding: 0.15em 0; }
+.mod-archive ul { margin: 0.2em 0 0.4em; }
+.col .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; }
+  .cols { display: block; }
+  .col-left, .col-right { padding: 0; margin-top: 1.5em; }
+  .col-left { order: 0; }
+  .col-empty { display: none; } /* a reserved-but-empty column has nothing to stack */
 }