Add a favicon and rework the Design page

Blogs had no icon at all, and browsers probing /favicon.ico ended up
rendering the 404 page. Ship a default paper & ink icon (svg + png) and
let each blog replace it from the Design page; /favicon.ico now serves
the default or redirects to the blog's own image. ICO uploads accepted.

The Design page gains colour schemes, reset to defaults, thumbnail
image pickers, jump links and a sticky save bar, plus new options:
heading font, link underline/hover, content box style and padding,
header image height, post dates and format, footer RSS toggle, menu
alignment/style/hover and sidebar width. The Menu card picks the
position with illustrated tiles and shows only the options that apply
to it, using CSS :checked rules rather than JavaScript.

All new defaults reproduce the previous look, so existing blogs are
unchanged until edited. Theme is jsonb, so no migration.

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

1 files changed, 124 insertions, 14 deletions

diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html
index 09ea1fe..af482fe 100644
--- a/internal/web/templates/dashboard/design.html
+++ b/internal/web/templates/dashboard/design.html
@@ -1,12 +1,29 @@
 {{define "title"}}Design · {{.Blog.Title}}{{end}}
 {{define "content"}}
 {{$t := .Data.theme}}
-<h1>Design</h1>
-<p class="muted">Save, then refresh <a href="{{.BlogURL}}" target="_blank">your blog &#8599;</a> to see the result. Colours are hex values like <code>#336699</code>.</p>
+<div class="pagehead">
+  <h1>Design</h1>
+  <p class="lead muted">Changes are live as soon as you save; refresh <a href="{{.BlogURL}}" target="_blank">your blog &#8599;</a> to see them.</p>
+</div>
+<p class="jumps"><a href="#schemes">Schemes</a><a href="#background">Background</a><a href="#text">Text</a><a href="#header">Header</a><a href="#menu">Menu</a><a href="#posts">Posts</a><a href="#footer">Footer</a><a href="#icon">Icon</a></p>
+
+<div class="card" id="schemes">
+  <h2>Colour schemes</h2>
+  <p class="muted small">A quick start: applying a scheme sets every colour below and saves immediately. Images, fonts and layout are kept.</p>
+  <form method="post" action="/b/{{.Blog.Subdomain}}/design/preset" class="presets">
+    <input type="hidden" name="_csrf" value="{{.CSRF}}">
+    {{range .Data.presets}}<button type="submit" name="preset" value="{{.Key}}" class="preset" title="Apply {{.Name}}">
+      <span class="sw" style="background:{{.HeaderBg}}"></span><span class="sw" style="background:{{.Bg}}"></span><span class="sw" style="background:{{.ContentBg}}"></span><span class="sw" style="background:{{.Link}}"></span>
+      <span class="pname">{{.Name}}</span>
+    </button>
+    {{end}}
+  </form>
+</div>
+
 <form method="post" action="/b/{{.Blog.Subdomain}}/design" enctype="multipart/form-data">
 <input type="hidden" name="_csrf" value="{{.CSRF}}">
 
-<div class="card">
+<div class="card" id="background">
   <h2>Background</h2>
   <div class="row">
     <label>Colour<br><input type="color" name="bg_color" value="{{$t.BgColor}}"></label>
@@ -19,33 +36,60 @@
   {{template "imagepick" (dict "name" "bg_image" "current" $t.BgImage "images" .Data.images "label" "Background image")}}
 </div>
 
-<div class="card">
+<div class="card" id="text">
   <h2>Text &amp; content area</h2>
   <div class="row">
     <label>Content background<br><input type="color" name="content_bg" value="{{$t.ContentBg}}"></label>
     <label>Text colour<br><input type="color" name="text_color" value="{{$t.TextColor}}"></label>
     <label>Link colour<br><input type="color" name="link_color" value="{{$t.LinkColor}}"></label>
   </div>
+  <div class="hoverpick">
+    <input type="checkbox" name="link_hover_custom" id="link-hover-custom"{{if $t.LinkHover}} checked{{end}}>
+    <label for="link-hover-custom" class="check">Change colour when the mouse is over a link</label>
+    <label class="hover-color">Hover colour<br><input type="color" name="link_hover" value="{{if $t.LinkHover}}{{$t.LinkHover}}{{else}}{{$t.LinkColor}}{{end}}"></label>
+  </div>
   <div class="row">
     <label>Font<br><select name="font">
       <option value="sans"{{if eq $t.Font "sans"}} selected{{end}}>Sans-serif (Helvetica/Arial)</option>
       <option value="serif"{{if eq $t.Font "serif"}} selected{{end}}>Serif (Georgia/Times)</option>
       <option value="mono"{{if eq $t.Font "mono"}} selected{{end}}>Monospace (Courier)</option>
     </select></label>
+    <label>Heading font<br><select name="heading_font">
+      <option value="same"{{if eq $t.HeadingFont "same"}} selected{{end}}>Same as text</option>
+      <option value="sans"{{if eq $t.HeadingFont "sans"}} selected{{end}}>Sans-serif</option>
+      <option value="serif"{{if eq $t.HeadingFont "serif"}} selected{{end}}>Serif</option>
+      <option value="mono"{{if eq $t.HeadingFont "mono"}} selected{{end}}>Monospace</option>
+    </select></label>
     <label>Text size<br><select name="font_size">
       <option value="small"{{if eq $t.FontSize "small"}} selected{{end}}>Small</option>
       <option value="normal"{{if eq $t.FontSize "normal"}} selected{{end}}>Normal</option>
       <option value="large"{{if eq $t.FontSize "large"}} selected{{end}}>Large</option>
     </select></label>
+    <label>Underline links<br><select name="link_underline">
+      <option value="always"{{if eq $t.LinkUnderline "always"}} selected{{end}}>Always</option>
+      <option value="hover"{{if eq $t.LinkUnderline "hover"}} selected{{end}}>Only on hover</option>
+      <option value="never"{{if eq $t.LinkUnderline "never"}} selected{{end}}>Never</option>
+    </select></label>
+  </div>
+  <div class="row">
     <label>Width<br><select name="content_width">
       <option value="narrow"{{if eq $t.ContentWidth "narrow"}} selected{{end}}>Narrow</option>
       <option value="medium"{{if eq $t.ContentWidth "medium"}} selected{{end}}>Medium</option>
       <option value="wide"{{if eq $t.ContentWidth "wide"}} selected{{end}}>Wide</option>
     </select></label>
+    <label>Box style<br><select name="content_style">
+      <option value="card"{{if eq $t.ContentStyle "card"}} selected{{end}}>Card (shadow, rounded corners)</option>
+      <option value="flat"{{if eq $t.ContentStyle "flat"}} selected{{end}}>Flat</option>
+    </select></label>
+    <label>Padding<br><select name="content_padding">
+      <option value="compact"{{if eq $t.ContentPadding "compact"}} selected{{end}}>Compact</option>
+      <option value="normal"{{if eq $t.ContentPadding "normal"}} selected{{end}}>Normal</option>
+      <option value="roomy"{{if eq $t.ContentPadding "roomy"}} selected{{end}}>Roomy</option>
+    </select></label>
   </div>
 </div>
 
-<div class="card">
+<div class="card" id="header">
   <h2>Header</h2>
   <div class="row">
     <label>Background<br><input type="color" name="header_bg" value="{{$t.HeaderBg}}"></label>
@@ -54,34 +98,100 @@
       <option value="left"{{if eq $t.HeaderAlign "left"}} selected{{end}}>Left</option>
       <option value="center"{{if eq $t.HeaderAlign "center"}} selected{{end}}>Centred</option>
     </select></label>
+    <label>Image height<br><select name="header_image_height">
+      <option value="short"{{if eq $t.HeaderImageHeight "short"}} selected{{end}}>Short</option>
+      <option value="medium"{{if eq $t.HeaderImageHeight "medium"}} selected{{end}}>Medium</option>
+      <option value="tall"{{if eq $t.HeaderImageHeight "tall"}} selected{{end}}>Tall</option>
+    </select></label>
   </div>
   <label class="check"><input type="checkbox" name="header_show_title"{{if $t.HeaderShowTitle}} checked{{end}}> Show blog title and tagline in the header</label>
   {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "images" .Data.images "label" "Header image (banner)")}}
 </div>
 
-<div class="card">
+<div class="card" id="menu">
   <h2>Menu</h2>
+  <p class="muted small">The menu lists the pages you marked "show in menu". Pick where it goes; the options underneath follow your choice.</p>
+  <div class="navpos">
+    <input type="radio" name="nav_position" value="below-header" id="np-below"{{if eq $t.NavPosition "below-header"}} checked{{end}}>
+    <label for="np-below" class="tile"><svg viewBox="0 0 80 56" width="80" height="56" aria-hidden="true"><rect x="0" y="0" width="80" height="56" fill="#f4efe4"/><rect x="0" y="0" width="80" height="14" fill="#1d1a17"/><rect x="0" y="16" width="80" height="6" fill="#c8541a"/><rect x="10" y="28" width="60" height="24" fill="#fffdf8" stroke="#1d1a17"/></svg><span>Below the header</span></label>
+    <input type="radio" name="nav_position" value="top-bar" id="np-top"{{if eq $t.NavPosition "top-bar"}} checked{{end}}>
+    <label for="np-top" class="tile"><svg viewBox="0 0 80 56" width="80" height="56" aria-hidden="true"><rect x="0" y="0" width="80" height="56" fill="#f4efe4"/><rect x="0" y="0" width="80" height="6" fill="#c8541a"/><rect x="0" y="8" width="80" height="14" fill="#1d1a17"/><rect x="10" y="28" width="60" height="24" fill="#fffdf8" stroke="#1d1a17"/></svg><span>Bar at the very top</span></label>
+    <input type="radio" name="nav_position" value="left-sidebar" id="np-side"{{if eq $t.NavPosition "left-sidebar"}} checked{{end}}>
+    <label for="np-side" class="tile"><svg viewBox="0 0 80 56" width="80" height="56" aria-hidden="true"><rect x="0" y="0" width="80" height="56" fill="#f4efe4"/><rect x="0" y="0" width="80" height="14" fill="#1d1a17"/><rect x="8" y="20" width="18" height="32" fill="#c8541a"/><rect x="30" y="20" width="42" height="32" fill="#fffdf8" stroke="#1d1a17"/></svg><span>Sidebar on the left</span></label>
+    <div class="row only-horizontal">
+      <label>Alignment<br><select name="nav_align">
+        <option value="left"{{if eq $t.NavAlign "left"}} selected{{end}}>Left</option>
+        <option value="center"{{if eq $t.NavAlign "center"}} selected{{end}}>Centred</option>
+        <option value="right"{{if eq $t.NavAlign "right"}} selected{{end}}>Right</option>
+      </select></label>
+    </div>
+    <div class="row only-sidebar">
+      <label>Sidebar width<br><select name="nav_sidebar_width">
+        <option value="narrow"{{if eq $t.NavSidebarWidth "narrow"}} selected{{end}}>Narrow</option>
+        <option value="normal"{{if eq $t.NavSidebarWidth "normal"}} selected{{end}}>Normal</option>
+        <option value="wide"{{if eq $t.NavSidebarWidth "wide"}} selected{{end}}>Wide</option>
+      </select></label>
+    </div>
+    <p class="muted small only-sidebar">Links stack under each other; announcements placed "in the sidebar" appear beneath them. On phones the sidebar turns into a row of links above the content.</p>
+  </div>
   <div class="row">
-    <label>Position<br><select name="nav_position">
-      <option value="below-header"{{if eq $t.NavPosition "below-header"}} selected{{end}}>Below the header</option>
-      <option value="top-bar"{{if eq $t.NavPosition "top-bar"}} selected{{end}}>Bar at the very top</option>
-      <option value="left-sidebar"{{if eq $t.NavPosition "left-sidebar"}} selected{{end}}>Sidebar on the left</option>
+    <label>Link style<br><select name="nav_style">
+      <option value="normal"{{if eq $t.NavStyle "normal"}} selected{{end}}>Normal</option>
+      <option value="uppercase"{{if eq $t.NavStyle "uppercase"}} selected{{end}}>Uppercase, spaced</option>
     </select></label>
-    <label>Background<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label>
-    <label>Text colour<br><input type="color" name="nav_text" value="{{$t.NavText}}"></label>
   </div>
   <label class="check"><input type="checkbox" name="nav_show_home"{{if $t.NavShowHome}} checked{{end}}> Include the home page in the menu</label>
+  <h3>Menu colours</h3>
+  <div class="row">
+    <label>Background<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label>
+    <label>Text<br><input type="color" name="nav_text" value="{{$t.NavText}}"></label>
+  </div>
+  <div class="hoverpick">
+    <input type="checkbox" name="nav_hover_custom" id="nav-hover-custom"{{if $t.NavHover}} checked{{end}}>
+    <label for="nav-hover-custom" class="check">Change colour when the mouse is over a link</label>
+    <label class="hover-color">Hover colour<br><input type="color" name="nav_hover" value="{{if $t.NavHover}}{{$t.NavHover}}{{else}}{{$t.NavText}}{{end}}"></label>
+  </div>
 </div>
 
-<div class="card">
+<div class="card" id="posts">
+  <h2>Posts &amp; dates</h2>
+  <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> Show the date on posts</label>
+  <div class="row">
+    <label>Date format<br><select name="date_format">
+      <option value="long"{{if eq $t.DateFormat "long"}} selected{{end}}>12 September 2026</option>
+      <option value="short"{{if eq $t.DateFormat "short"}} selected{{end}}>12 Sep 2026</option>
+      <option value="iso"{{if eq $t.DateFormat "iso"}} selected{{end}}>2026-09-12</option>
+    </select></label>
+  </div>
+</div>
+
+<div class="card" id="footer">
   <h2>Footer</h2>
   <label>Footer text<br><input name="footer_text" value="{{$t.FooterText}}" maxlength="2000" placeholder="© 2026 Me"></label>
   <div class="row">
     <label>Background<br><input type="color" name="footer_bg" value="{{$t.FooterBg}}"></label>
     <label>Text colour<br><input type="color" name="footer_color" value="{{$t.FooterColor}}"></label>
   </div>
+  <label class="check"><input type="checkbox" name="footer_show_rss"{{if $t.FooterShowRSS}} checked{{end}}> Show the RSS link in the footer</label>
+</div>
+
+<div class="card" id="icon">
+  <h2>Site icon</h2>
+  {{template "imagepick" (dict "name" "favicon" "current" $t.Favicon "images" .Data.images "label" "Favicon" "hint" "The small icon browsers show in the tab. A square PNG or ICO of 32–64 px works best; pick None for the Blogspace icon." "accept" "image/png,image/x-icon,image/gif,image/webp,image/jpeg,.ico")}}
 </div>
 
-<p class="actionrow"><button type="submit">Save design</button></p>
+<div class="savebar">
+  <button type="submit">Save design</button>
+  <a class="btn secondary" href="{{.BlogURL}}" target="_blank">View blog &#8599;</a>
+</div>
 </form>
+
+<details class="help reset">
+  <summary>Reset to defaults</summary>
+  <p>Puts every colour, font and layout option back to how a new blog starts and forgets the chosen images (they stay in your library).</p>
+  <form method="post" action="/b/{{.Blog.Subdomain}}/design/reset">
+    <input type="hidden" name="_csrf" value="{{.CSRF}}">
+    <button type="submit" class="danger">Reset everything</button>
+  </form>
+</details>
 {{end}}