Merge 74daa21fdd into b62d73dbd3

public/lp.svg

@@ -1,4 +1,4 @@
-<svg class="lp" viewBox="0 0 40.6 52.3">
+<svg class="lp" viewBox="0 0 40.6 52.3" role="image" aria-label="Liberapay">
   <g transform="matrix(0.83,0,0,0.83,-158,-261)">
     <path d="m202.5,366c-3.1 0-5.5-0.4-7.3-1.2-1.8-0.8-3-1.9-3.8-3.3-0.8-1.4-1.1-3-1.1-4.8 0-1.8 0.3-3.7 0.8-5.8l8.3-34.8 10.2-1.6-9.1 37.8c-0.2 0.8-0.3 1.5-0.3 2.2 0 0.7 0.1 1.2 0.4 1.7 0.3 0.5 0.7 0.9 1.3 1.2 0.6 0.3 1.5 0.5 2.7 0.6l-2 8.1"/>
     <path d="m239.2 344.3c0 3.2-0.5 6.1-1.6 8.8-1 2.6-2.5 4.9-4.4 6.9-1.9 1.9-4.1 3.4-6.7 4.5-2.6 1.1-5.4 1.6-8.5 1.6-1.5 0-3-0.1-4.5-0.4l-3 11.9h-9.7l10.9-45.4c1.7-0.5 3.7-1 6-1.4 2.3-0.4 4.7-0.6 7.3-0.6 2.4 0 4.6 0.4 6.3 1.1 1.8 0.7 3.2 1.8 4.4 3 1.1 1.3 2 2.8 2.5 4.5 0.5 1.7 0.8 3.6 0.8 5.5m-23.8 13.4c0.7 0.2 1.7 0.3 2.8 0.3 1.7 0 3.3-0.3 4.7-1 1.4-0.6 2.6-1.5 3.6-2.7 1-1.1 1.7-2.5 2.3-4.1 0.5-1.6 0.8-3.4 0.8-5.3 0-1.9-0.4-3.5-1.2-4.8-0.8-1.3-2.3-2-4.3-2-1.4 0-2.7 0.1-3.9 0.4l-4.6 19.1"/>

src/nitter.nim

@@ -63,7 +63,7 @@ routes:
     resp renderMain(renderSearch(), request, cfg, themePrefs())
 
   get "/about":
-    resp renderMain(renderAbout(), request, cfg, themePrefs())
+    resp renderMain(renderAbout(), request, cfg, themePrefs(), "About")
 
   get "/explore":
     redirect("/about")

src/sass/index.scss

@@ -83,7 +83,6 @@ a {
 fieldset {
     border: 0;
     padding: 0;
-    margin-top: -0.6em;
 }
 
 legend {
@@ -96,6 +95,10 @@ legend {
     margin-bottom: 8px;
 }
 
+.preferences > form:first-of-type {
+    margin-top: -.6em;
+}
+
 .preferences .note {
     border-top: 1px solid var(--border_grey);
     border-bottom: 1px solid var(--border_grey);

src/sass/inputs.scss

@@ -88,22 +88,6 @@ input::-webkit-datetime-edit-year-field:focus {
     }
 }
 
-.checkbox {
-    position: absolute;
-    top: 1px;
-    right: 0;
-    height: 17px;
-    width: 17px;
-    background-color: var(--bg_elements);
-    border: 1px solid var(--accent_border);
-
-    &:after {
-        content: "";
-        position: absolute;
-        display: none;
-    }
-}
-
 .checkbox-container {
     display: block;
     position: relative;
@@ -114,31 +98,38 @@ input::-webkit-datetime-edit-year-field:focus {
 
     input {
         position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
+        right: 0;
+        height: 19px;
+        width: 19px;
+        background-color: var(--bg_elements);
+        border: 1px solid var(--accent_border);
+        appearance: none;
+        box-sizing: border-box;
+        cursor: inherit;
 
-        &:checked ~ .checkbox:after {
+        &:after {
+            left: 2px;
+            bottom: 0;
+            font-size: 13px;
+            font-family: $font_4;
+            content: '\e803';
+            position: absolute;
+            display: none;
+            bottom: 2px;
+        }
+
+        &:checked:after {
             display: block;
         }
     }
 
-    &:hover input ~ .checkbox {
+    &:hover input {
         border-color: var(--accent);
     }
 
-    &:active input ~ .checkbox {
+    &:active input {
         border-color: var(--accent_light);
     }
-
-    .checkbox:after {
-        left: 2px;
-        bottom: 0;
-        font-size: 13px;
-        font-family: $font_4;
-        content: '\e803';
-    }
 }
 
 .pref-group {

src/sass/search.scss

@@ -64,13 +64,14 @@
         margin-left: 23px;
     }
 
-    .checkbox {
+    input[type=checkbox] {
         right: unset;
         left: -22px;
+        top: 1px;
     }
 
-    .checkbox-container .checkbox:after {
-        top: -4px;
+    .checkbox-container input[type=checkbox]:after {
+        top: 1px;
     }
 }
 

src/views/general.nim

@@ -32,7 +32,7 @@ proc renderNavbar(cfg: Config; req: Request; rss, canonical: string): VNode =
         if cfg.enableRss and rss.len > 0:
           icon "rss-feed", title="RSS Feed", href=rss
         icon "bird", title="Open in Twitter", href=canonical
-        a(href="https://liberapay.com/zedeus"): verbatim lp
+        a(href="https://liberapay.com/zedeus", title="Liberapay — zedeus"): verbatim lp
         icon "info", title="About", href="/about"
         icon "cog", title="Preferences", href=("/settings?referer=" & encodeUrl(path))
 
@@ -42,7 +42,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   var theme = prefs.theme.toTheme
   if "theme" in req.params:
     theme = req.params["theme"].toTheme
-    
+
   let ogType =
     if video.len > 0: "video"
     elif rss.len > 0: "object"
@@ -134,7 +134,7 @@ proc renderMain*(body: VNode; req: Request; cfg: Config; prefs=defaultPrefs;
     body:
       renderNavbar(cfg, req, rss, canonical)
 
-      tdiv(class="container"):
+      main(class="container"):
         body
 
   result = doctype & $node

src/views/preferences.nim

@@ -10,7 +10,8 @@ macro renderPrefs*(): untyped =
     ident("buildHtml"), ident("tdiv"), nnkStmtList.newTree())
 
   for header, options in prefList:
-    result[2].add nnkCall.newTree(
+    var prefGroup = nnkCall.newTree(ident("fieldset"), nnkStmtList.newTree())
+    prefGroup[1].add nnkCall.newTree(
       ident("legend"),
       nnkStmtList.newTree(
         nnkCommand.newTree(ident("text"), newLit(header))))
@@ -30,20 +31,21 @@ macro renderPrefs*(): untyped =
         else:
           stmt[0].add newLit(pref.options)
 
-      result[2].add stmt
+      prefGroup[1].add stmt
+
+    result[2].add prefGroup
 
 proc renderPreferences*(prefs: Prefs; path: string; themes: seq[string]): VNode =
-  buildHtml(tdiv(class="overlay-panel")):
-    fieldset(class="preferences"):
-      form(`method`="post", action="/saveprefs", autocomplete="off"):
-        refererField path
+  buildHtml(tdiv(class="overlay-panel preferences")):
+    form(`method`="post", action="/saveprefs", autocomplete="off"):
+      refererField path
 
-        renderPrefs()
+      renderPrefs()
 
-        h4(class="note"):
-          text "Preferences are stored client-side using cookies without any personal information."
+      h4(class="note"):
+        text "Preferences are stored client-side using cookies without any personal information."
 
-        button(`type`="submit", class="pref-submit"):
-          text "Save preferences"
+      button(`type`="submit", class="pref-submit"):
+        text "Save preferences"
 
-      buttonReferer "/resetprefs", "Reset preferences", path, class="pref-reset"
+    buttonReferer "/resetprefs", "Reset preferences", path, class="pref-reset"

src/views/renderutils.nim

@@ -57,22 +57,21 @@ proc buttonReferer*(action, text, path: string; class=""; `method`="post"): VNod
       text text
 
 proc genCheckbox*(pref, label: string; state: bool): VNode =
-  buildHtml(label(class="pref-group checkbox-container")):
-    text label
-    input(name=pref, `type`="checkbox", checked=state)
-    span(class="checkbox")
+  buildHtml(tdiv(class="pref-group checkbox-container")):
+    label(`for`=pref): text label
+    input(id=pref, name=pref, `type`="checkbox", checked=state)
 
 proc genInput*(pref, label, state, placeholder: string; class=""; autofocus=true): VNode =
   let p = placeholder
   buildHtml(tdiv(class=("pref-group pref-input " & class))):
     if label.len > 0:
       label(`for`=pref): text label
-    input(name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0))
+    input(id=pref, name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0))
 
 proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
   buildHtml(tdiv(class="pref-group pref-input")):
     label(`for`=pref): text label
-    select(name=pref):
+    select(id=pref, name=pref):
       for opt in options:
         option(value=opt, selected=(opt == state)):
           text opt