diff options
Diffstat (limited to 'internal/web/templates/dashboard/design.html')
| -rw-r--r-- | internal/web/templates/dashboard/design.html | 178 |
1 files changed, 89 insertions, 89 deletions
diff --git a/internal/web/templates/dashboard/design.html b/internal/web/templates/dashboard/design.html index 9c2a12f..e961388 100644 --- a/internal/web/templates/dashboard/design.html +++ b/internal/web/templates/dashboard/design.html @@ -1,21 +1,21 @@ -{{define "title"}}Design · {{.Blog.Title}}{{end}} +{{define "title"}}{{t "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 ↗</a> to see them.</p> + <h1>{{t "Design"}}</h1> + <p class="lead muted">{{t "Changes are live as soon as you save; refresh"}} <a href="{{.BlogURL}}" target="_blank">{{t "your blog"}} ↗</a> {{t "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="#logo">Logo & icon</a></p> -<p class="muted small">What appears where — header, columns, footer and their modules — is arranged on the <a href="/b/{{.Blog.Subdomain}}/layout">Layout</a> tab.</p> +<p class="jumps"><a href="#schemes">{{t "Schemes"}}</a><a href="#background">{{t "Background"}}</a><a href="#text">{{t "Text"}}</a><a href="#header">{{t "Header"}}</a><a href="#menu">{{t "Menu"}}</a><a href="#posts">{{t "Posts"}}</a><a href="#footer">{{t "Footer"}}</a><a href="#logo">{{t "Logo & icon"}}</a></p> +<p class="muted small">{{t "What appears where — header, columns, footer and their modules — is arranged on the"}} <a href="/b/{{.Blog.Subdomain}}/layout">{{t "Layout"}}</a> {{t "tab."}}</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> + <h2>{{t "Colour schemes"}}</h2> + <p class="muted small">{{t "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}}"> + {{range .Data.presets}}<button type="submit" name="preset" value="{{.Key}}" class="preset" title="{{tf "Apply %s" (t .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> + <span class="pname">{{t .Name}}</span> </button> {{end}} </form> @@ -25,158 +25,158 @@ <input type="hidden" name="_csrf" value="{{.CSRF}}"> <div class="card" id="background"> - <h2>Background</h2> + <h2>{{t "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> + <label>{{t "Colour"}}<br><input type="color" name="bg_color" value="{{$t.BgColor}}"></label> + <label>{{t "Image style"}}<br><select name="bg_mode"> + <option value="cover"{{if eq $t.BgMode "cover"}} selected{{end}}>{{t "Stretch to fill"}}</option> + <option value="fixed"{{if eq $t.BgMode "fixed"}} selected{{end}}>{{t "Fill, fixed while scrolling"}}</option> + <option value="tile"{{if eq $t.BgMode "tile"}} selected{{end}}>{{t "Repeat (tile)"}}</option> </select></label> </div> - {{template "imagepick" (dict "name" "bg_image" "current" $t.BgImage "sub" .Blog.Subdomain "images" .Data.images "label" "Background image")}} + {{template "imagepick" (dict "name" "bg_image" "current" $t.BgImage "sub" .Blog.Subdomain "images" .Data.images "label" (t "Background image"))}} </div> <div class="card" id="text"> - <h2>Text & content area</h2> + <h2>{{t "Text & 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> + <label>{{t "Content background"}}<br><input type="color" name="content_bg" value="{{$t.ContentBg}}"></label> + <label>{{t "Text colour"}}<br><input type="color" name="text_color" value="{{$t.TextColor}}"></label> + <label>{{t "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> + <label for="link-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label> + <label class="hover-color">{{t "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"> + <label>{{t "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> + <label>{{t "Heading font"}}<br><select name="heading_font"> + <option value="same"{{if eq $t.HeadingFont "same"}} selected{{end}}>{{t "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> + <label>{{t "Text size"}}<br><select name="font_size"> + <option value="small"{{if eq $t.FontSize "small"}} selected{{end}}>{{t "Small"}}</option> + <option value="normal"{{if eq $t.FontSize "normal"}} selected{{end}}>{{t "Normal"}}</option> + <option value="large"{{if eq $t.FontSize "large"}} selected{{end}}>{{t "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> + <label>{{t "Underline links"}}<br><select name="link_underline"> + <option value="always"{{if eq $t.LinkUnderline "always"}} selected{{end}}>{{t "Always"}}</option> + <option value="hover"{{if eq $t.LinkUnderline "hover"}} selected{{end}}>{{t "Only on hover"}}</option> + <option value="never"{{if eq $t.LinkUnderline "never"}} selected{{end}}>{{t "Never"}}</option> </select></label> </div> <div class="row"> - <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> + <label>{{t "Box style"}}<br><select name="content_style"> + <option value="card"{{if eq $t.ContentStyle "card"}} selected{{end}}>{{t "Card (shadow, rounded corners)"}}</option> + <option value="flat"{{if eq $t.ContentStyle "flat"}} selected{{end}}>{{t "Flat"}}</option> </select></label> - <label>Padding <span class="muted">(inside the box)</span><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> + <label>{{t "Padding"}} <span class="muted">({{t "inside the box"}})</span><br><select name="content_padding"> + <option value="compact"{{if eq $t.ContentPadding "compact"}} selected{{end}}>{{t "Compact"}}</option> + <option value="normal"{{if eq $t.ContentPadding "normal"}} selected{{end}}>{{t "Normal"}}</option> + <option value="roomy"{{if eq $t.ContentPadding "roomy"}} selected{{end}}>{{t "Roomy"}}</option> </select></label> </div> - <p class="muted small">The content spans the whole page; how much of it the posts get is set by the column widths on the <a href="/b/{{.Blog.Subdomain}}/layout#columns">Layout</a> tab.</p> + <p class="muted small">{{t "The content spans the whole page; how much of it the posts get is set by the column widths on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#columns">{{t "Layout"}}</a> {{t "tab."}}</p> </div> <div class="card" id="header"> - <h2>Header</h2> + <h2>{{t "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> + <label>{{t "Background"}}<br><input type="color" name="header_bg" value="{{$t.HeaderBg}}"></label> + <label>{{t "Text colour"}}<br><input type="color" name="header_text" value="{{$t.HeaderText}}"></label> + <label>{{t "Alignment"}}<br><select name="header_align"> + <option value="left"{{if eq $t.HeaderAlign "left"}} selected{{end}}>{{t "Left"}}</option> + <option value="center"{{if eq $t.HeaderAlign "center"}} selected{{end}}>{{t "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> + <label>{{t "Image height"}}<br><select name="header_image_height"> + <option value="short"{{if eq $t.HeaderImageHeight "short"}} selected{{end}}>{{t "Short"}}</option> + <option value="medium"{{if eq $t.HeaderImageHeight "medium"}} selected{{end}}>{{t "Medium"}}</option> + <option value="tall"{{if eq $t.HeaderImageHeight "tall"}} selected{{end}}>{{t "Tall"}}</option> </select></label> </div> - <p class="muted small">The title, logo and menu are header modules — add, remove and order them on the <a href="/b/{{.Blog.Subdomain}}/layout#header">Layout</a> tab. The banner below is shown across the top of the header whenever one is chosen.</p> - {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "sub" .Blog.Subdomain "images" .Data.images "label" "Header image (banner)")}} + <p class="muted small">{{t "The title, logo and menu are header modules — add, remove and order them on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#header">{{t "Layout"}}</a> {{t "tab."}} {{t "The banner below is shown across the top of the header whenever one is chosen."}}</p> + {{template "imagepick" (dict "name" "header_image" "current" $t.HeaderImage "sub" .Blog.Subdomain "images" .Data.images "label" (t "Header image (banner)"))}} </div> <div class="card" id="menu"> - <h2>Menu</h2> - <p class="muted small">Which links the menu shows, and where it sits, is set on the <a href="/b/{{.Blog.Subdomain}}/layout#menu">Layout</a> tab. Here you choose how it looks.</p> + <h2>{{t "Menu"}}</h2> + <p class="muted small">{{t "Which links the menu shows, and where it sits, is set on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#menu">{{t "Layout"}}</a> {{t "tab."}} {{t "Here you choose how it looks."}}</p> <div class="row"> - <label>Alignment <span class="muted">(menu in the header)</span><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> + <label>{{t "Alignment"}} <span class="muted">({{t "menu in the header"}})</span><br><select name="nav_align"> + <option value="left"{{if eq $t.NavAlign "left"}} selected{{end}}>{{t "Left"}}</option> + <option value="center"{{if eq $t.NavAlign "center"}} selected{{end}}>{{t "Centred"}}</option> + <option value="right"{{if eq $t.NavAlign "right"}} selected{{end}}>{{t "Right"}}</option> </select></label> - <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> + <label>{{t "Link style"}}<br><select name="nav_style"> + <option value="normal"{{if eq $t.NavStyle "normal"}} selected{{end}}>{{t "Normal"}}</option> + <option value="uppercase"{{if eq $t.NavStyle "uppercase"}} selected{{end}}>{{t "Uppercase, spaced"}}</option> </select></label> </div> - <h3>Menu colours</h3> + <h3>{{t "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> + <label>{{t "Background"}}<br><input type="color" name="nav_bg" value="{{$t.NavBg}}"></label> + <label>{{t "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> + <label for="nav-hover-custom" class="check">{{t "Change colour when the mouse is over a link"}}</label> + <label class="hover-color">{{t "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 & dates</h2> - <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> Show the date on posts</label> + <h2>{{t "Posts & dates"}}</h2> + <label class="check"><input type="checkbox" name="show_dates"{{if $t.ShowDates}} checked{{end}}> {{t "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> + <label>{{t "Date format"}}<br><select name="date_format"> + <option value="long"{{if eq $t.DateFormat "long"}} selected{{end}}>{{postdate "long" .Data.today}}</option> + <option value="short"{{if eq $t.DateFormat "short"}} selected{{end}}>{{postdate "short" .Data.today}}</option> + <option value="iso"{{if eq $t.DateFormat "iso"}} selected{{end}}>{{postdate "iso" .Data.today}}</option> </select></label> </div> </div> <div class="card" id="footer"> - <h2>Footer</h2> - <p class="muted small">The footer text, RSS link and other footer modules live on the <a href="/b/{{.Blog.Subdomain}}/layout#footer">Layout</a> tab.</p> + <h2>{{t "Footer"}}</h2> + <p class="muted small">{{t "The footer text, RSS link and other footer modules live on the"}} <a href="/b/{{.Blog.Subdomain}}/layout#footer">{{t "Layout"}}</a> {{t "tab."}}</p> <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> + <label>{{t "Background"}}<br><input type="color" name="footer_bg" value="{{$t.FooterBg}}"></label> + <label>{{t "Text colour"}}<br><input type="color" name="footer_color" value="{{$t.FooterColor}}"></label> </div> </div> <div class="card" id="logo"> - <h2>Logo & site icon</h2> + <h2>{{t "Logo & site icon"}}</h2> <div class="row"> - <label>Logo size<br><select name="logo_size"> - <option value="small"{{if eq $t.LogoSize "small"}} selected{{end}}>Small (48 px tall)</option> - <option value="medium"{{if eq $t.LogoSize "medium"}} selected{{end}}>Medium (80 px)</option> - <option value="large"{{if eq $t.LogoSize "large"}} selected{{end}}>Large (140 px)</option> + <label>{{t "Logo size"}}<br><select name="logo_size"> + <option value="small"{{if eq $t.LogoSize "small"}} selected{{end}}>{{t "Small (48 px tall)"}}</option> + <option value="medium"{{if eq $t.LogoSize "medium"}} selected{{end}}>{{t "Medium (80 px)"}}</option> + <option value="large"{{if eq $t.LogoSize "large"}} selected{{end}}>{{t "Large (140 px)"}}</option> </select></label> </div> - {{template "imagepick" (dict "name" "logo" "current" $t.Logo "sub" .Blog.Subdomain "images" .Data.images "label" "Logo" "hint" "Shown wherever you place a Logo module (Layout tab); it links to your front page.")}} - {{template "imagepick" (dict "name" "favicon" "current" $t.Favicon "sub" .Blog.Subdomain "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")}} + {{template "imagepick" (dict "name" "logo" "current" $t.Logo "sub" .Blog.Subdomain "images" .Data.images "label" (t "Logo") "hint" (t "Shown wherever you place a Logo module (Layout tab); it links to your front page."))}} + {{template "imagepick" (dict "name" "favicon" "current" $t.Favicon "sub" .Blog.Subdomain "images" .Data.images "label" (t "Favicon") "hint" (t "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 ↗</a> + <button type="submit">{{t "Save design"}}</button> + <a class="btn secondary" href="{{.BlogURL}}" target="_blank">{{t "View blog"}} ↗</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> + <summary>{{t "Reset to defaults"}}</summary> + <p>{{t "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> + <button type="submit" class="danger">{{t "Reset everything"}}</button> </form> </details> {{end}} |