{{define "title"}}Design · {{.Blog.Title}}{{end}}
{{define "content"}}
{{$t := .Data.theme}}
<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" id="background">
  <h2>Background</h2>
  <div class="row">
    <label>Colour<br><input type="color" name="bg_color" value="{{$t.BgColor}}"></label>
    <label>Image style<br><select name="bg_mode">
      <option value="cover"{{if eq $t.BgMode "cover"}} selected{{end}}>Stretch to fill</option>
      <option value="fixed"{{if eq $t.BgMode "fixed"}} selected{{end}}>Fill, fixed while scrolling</option>
      <option value="tile"{{if eq $t.BgMode "tile"}} selected{{end}}>Repeat (tile)</option>
    </select></label>
  </div>
  {{template "imagepick" (dict "name" "bg_image" "current" $t.BgImage "images" .Data.images "label" "Background image")}}
</div>

<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" id="header">
  <h2>Header</h2>
  <div class="row">
    <label>Background<br><input type="color" name="header_bg" value="{{$t.HeaderBg}}"></label>
    <label>Text colour<br><input type="color" name="header_text" value="{{$t.HeaderText}}"></label>
    <label>Alignment<br><select name="header_align">
      <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" 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>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>
  </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" 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>

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