From 36c6049ff313461f3fdb8d80f8c78321e43068a0 Mon Sep 17 00:00:00 2001
From: James Mills <prologic@shortcircuit.net.au>
Date: Sat, 30 Jan 2021 17:26:18 +1000
Subject: [PATCH] Fix base template

---
 internal/static/css/03-icons.css | 1288 ++----------------------------
 internal/templates/base.html     |   36 +-
 2 files changed, 116 insertions(+), 1208 deletions(-)

diff --git a/internal/static/css/03-icons.css b/internal/static/css/03-icons.css
index 11014a6..5dcaf44 100644
--- a/internal/static/css/03-icons.css
+++ b/internal/static/css/03-icons.css
@@ -1,1217 +1,105 @@
-i.icss-github-c {
-  width: 1em;
-  height: .8em;
-  border-radius: 45% 45% 35% 35% / 50%;
-  background-color: #f5f5f5;
-  box-shadow: inset 0 0.1em 0 0.14em #333, inset 0 0.05em 0 0.12em #333;
-  background-image:
-    radial-gradient(ellipse 15% 25% at 34% 62%, #333 0%, #333 50%, transparent 50%),
-    radial-gradient(ellipse 15% 25% at 66% 62%, #333 0%, #333 50%, transparent 50%);
-  margin: .15em 0 .05em;
-}
-
-i.icss-github-c:before {
-  border-width: .17em .17em;
-  border-style: solid;
-  border-radius: 0.02em 60% 100% 80%;
-  border-color: #333;
-  left: .1em;
-  top: -.06em;
-  transform: rotate(20deg);
-}
-
-i.icss-github-c:after {
-  border-width: .17em .17em;
-  border-style: solid;
-  border-radius: 0.02em 80% 100% 60%;
-  border-color: #333;
-  left: .6em;
-  top: -.06em;
-  transform: rotate(65deg);
-}
-
-i.icss-home {
-  width: .36em;
-  height: .43em;
-  margin: .57em .71em 0 .13em;
-  border-width: 0;
-  border-style: solid;
-  border-radius: 0 0 .05em .05em;
-  box-shadow: 0.575em 0, 0.285em -0.28em 0 -0.06em,
-    0.55em -0.62em 0 -0.14em,
-    0.6em -0.54em 0 -0.14em,
-    0.6em -0.62em 0 -0.14em;
-}
-
-i.icss-home:before {
-  border-width: 0 .47em .45em;
-  border-style: solid;
-  bottom: .425em;
-  left: 0em;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-i.icss-home:after {
-  width: .85em;
-  height: .85em;
-  border-width: 0.065em 0 0 0.065em;
-  border-style: solid;
-  transform: rotate(45deg);
-  top: -0.43em;
-  left: 0.045em;
-}
-
-i.icss-users {
-  width: .8em;
-  height: .5em;
-  border-width: .065em;
-  border-style: solid;
-  border-radius: .8em .8em .2em .2em;
-  margin-top: .4em;
-  background-color: transparent;
-  box-shadow: .45em .05em 0 -.05em;
-  margin: .5em .35em 0 0;
-}
-
-.icss-stack i.icss-users {
-  transform: translate(-.6em, -.5em);
-}
-
-i.icss-users:before {
-  border-style: solid;
-  border-width: .065em;
-  border-radius: 100%;
-  top: -.46em;
-  left: 50%;
-  transform: translateX(-50%);
-  width: .45em;
-  height: .45em;
-  box-shadow: .45em .1em 0 -.05em;
-  background-image:
-    radial-gradient(circle at -.1em -.1em,
-      currentcolor 0, currentcolor .28em, transparent .28em),
-    radial-gradient(circle at .35em -.2em,
-      currentcolor 0, currentcolor .35em, transparent .35em);
-}
-
-i.icss-users:after {
-  border-style: solid;
-  border-width: .15em .1em .3em;
-  border-radius: 100%;
-  width: .2em;
-  height: .2em;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  left: .23em;
-  top: -.05em
-}
-
-i.icss-smiley {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  box-shadow: inset 0 0 0 .07em;
-  border-radius: 50%;
-}
-
-i.icss-smiley:before {
-  width: .5em;
-  height: .5em;
-  border-radius: 100%;
-  top: .3em;
-  left: 50%;
-  transform: translateX(-50%);
-  box-shadow: inset 0 -.1em 0 -0.02em, 0 .08em 0 -.05em;
-}
-
-i.icss-smiley:after {
-  width: .16em;
-  height: .16em;
-  border-radius: 100%;
-  box-shadow: inset .5em 0, .39em 0;
-  top: 30%;
-  left: .235em;
-}
-
-i.icss-rss {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  border: 0.065em solid currentColor;
-  border-radius: 0.05em;
-  background-image:
-    radial-gradient(circle at 0.2em 0.685em,
-      currentcolor 0, currentcolor 0.1em, transparent 0.1em);
-}
-
-i.icss-rss:before {
-  width: 0.6em;
-  height: 0.6em;
-  background-color: transparent;
-  top: 0.12em;
-  left: 0.18em;
-  background-image:
-    radial-gradient(circle at 0 100%,
-      transparent 0,
-      transparent 28%, currentcolor 28%,
-      currentcolor 42%, transparent 42%,
-      transparent 55%, currentcolor 55%,
-      currentcolor 70%, transparent 70%);
-}
-
 i.icss-plus {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  margin: 0;
+    width: 1em;
+    height: 1em;
+    background-color: transparent;
+    margin: 0;
 }
-
 i.icss-plus:before,
 i.icss-plus:after {
-  width: 1em;
-  height: .18em;
-  top: 50%;
-  left: 50%;
-  border-radius: .06em;
-  background-color: currentColor;
+    width: 1em;
+    height: .18em;
+    top: 50%;
+    left: 50%;
+    border-radius: .06em;
+    background-color: currentColor;
 }
 
 i.icss-plus:before {
-  transform: translate(-50%, -50%) rotate(-180deg)
+    transform: translate(-50%, -50%) rotate(-180deg)
 }
-
-i.icss-plus:after {
-  transform: translate(-50%, -50%) rotate(90deg)
+i.icss-plus:after{
+    transform: translate(-50%, -50%) rotate(90deg)
 }
+i.icss-search {
+    width: .73em;
+    height: .73em;
+    background-color: transparent;
+    border-width: .12em;
+    border-style: solid;
+    border-radius: 100%;
+    margin: 0 .27em .27em 0;
+}
+i.icss-search:before {
+    top: .635em;
+    left: .485em;
+    border-width: .08em .23em;
+    border-style: solid;
+    border-radius: .03em;
+    transform: rotate(45deg);
+    box-shadow: -.18em 0 0 -.03em
+}
+i.icss-search:after {
 
+}
+i.icss-key {
+    height: .55em;
+    width: .5em;
+    background: transparent;
+    border-radius: 50% / 47%;
+    box-shadow: inset -.05em 0 0 .18em;
+    margin: .225em .45em .225em .05em;
+    transform: rotate(45deg);
+    transform-origin: .5em 50%;
+}
+.icss-stack i.icss-key {
+   transform: translate(-.5em, -.5em) rotate(45deg);
+}
+i.icss-key:before {
+    width: .14em;
+    height: .14em;
+    box-shadow: inset .5em .5em, 
+        -.09em .09em,
+        -.18em .18em,
+        -.27em .27em
+        ;
+    top: 50%;
+    left: .84em;
+    transform: translateY(-50%) scaleX(.95) rotate(45deg);
+}
+i.icss-key:after {
+    width: .61em;
+    height: .2em;
+    box-shadow: inset .27em -.13em;
+    top: 50%;
+    left: .3em;
+    transform: translateY(-50%);
+}
 i.icss-gear {
-  width: .5em;
-  height: .5em;
-  position: relative;
-  border-radius: 100%;
-  background-color: transparent;
-  border-width: .07em;
-  border-style: solid;
-  border-color: transparent;
-  margin: .25em;
-  box-shadow: 0 0 0 .1em, inset 0 0 0 .3em;
+    width: .5em;
+    height: .5em;
+    position: relative;
+    border-radius: 100%;
+    background-color: transparent;
+    border-width: .07em;
+    border-style: solid;
+    border-color: transparent;
+    margin: .25em;
+    box-shadow: 0 0 0 .1em, inset 0 0 0 .3em;
 }
-
 i.icss-gear:before {
-  width: .18em;
-  height: .18em;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: .41em 0, -.41em 0, 0 .41em, 0 -.41em;
+    width: .18em;
+    height: .18em;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: .41em 0, -.41em 0, 0 .41em, 0 -.41em;
 }
 
 i.icss-gear:after {
-  width: .18em;
-  height: .18em;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  box-shadow: .42em 0, -.42em 0, 0 .42em, 0 -.42em;
-}
-
-i.icss-exit {
-  width: .6em;
-  height: .8em;
-  background-color: transparent;
-  box-shadow: inset 0 0 0 .065em;
-  border-radius: .05em;
-  margin: .1em .3em .1em .1em;
-}
-
-i.icss-exit:before {
-  width: .4em;
-  height: .8em;
-  transform: perspective(1em) rotateY(-30deg);
-  transform-origin: 0 50%;
-  box-shadow:
-    inset -.06em .37em,
-    inset .24em .37em,
-    inset -.06em -.36em,
-    inset .24em -.36em;
-  border-radius: .03em;
-  top: 0;
-  left: 0;
-}
-
-i.icss-exit:after {
-  width: .36em;
-  height: .36em;
-  border: .18em solid transparent;
-  border-right-color: currentColor;
-  transform: translateY(-50%);
-  box-shadow: .16em 0 0 -.08em;
-  top: 50%;
-  left: .45em;
-}
-
-i.icss-text-bold {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  margin: 0;
-}
-
-i.icss-text-bold:before {
-  top: 50%;
-  left: 50%;
-  content: "B";
-  font-size: 1em;
-  font-weight: bold;
-  transform: translate(-50%, -50%);
-  font-family: serif;
-}
-
-i.icss-text-italic {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  margin: 0;
-}
-
-i.icss-text-italic:before {
-  top: 50%;
-  left: 50%;
-  content: "I";
-  font-size: 1em;
-  font-weight: bold;
-  font-style: italic;
-  transform: translate(-50%, -50%);
-  font-family: serif;
-}
-
-i.icss-text-width {
-  background-color: transparent;
-  border: .15em solid currentColor;
-  border-width: .15em .15em .15em 0;
-  border-color: transparent currentColor transparent transparent;
-  margin: .7em .75em 0 .1em;
-}
-
-i.icss-text-width:before {
-  width: .7em;
-  text-align: center;
-  content: "T";
-  font-size: .9em;
-  font-family: serif;
-  line-height: .85em;
-  border-bottom: .07em solid currentColor;
-  top: -.88em;
-  left: .125em;
-}
-
-i.icss-text-width:after {
-  border: .15em solid currentColor;
-  border-color: transparent transparent transparent currentColor;
-  left: .7em;
-  top: -.15em
-}
-
-i.icss-x {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  margin: 0;
-}
-
-i.icss-x:before,
-i.icss-x:after {
-  width: 1em;
-  height: .18em;
-  top: 50%;
-  left: 50%;
-  border-radius: .06em;
-  background-color: currentColor;
-}
-
-i.icss-x:before {
-  transform: translate(-50%, -50%) rotate(-225deg)
-}
-
-i.icss-x:after {
-  transform: translate(-50%, -50%) rotate(225deg)
-}
-
-i.icss-user-circle {
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  background-color: transparent;
-  border: 0.068em solid currentColor;
-  overflow: hidden;
-  margin: 0;
-}
-
-i.icss-user-circle:before {
-  width: .55em;
-  height: .55em;
-  border-style: solid;
-  border: .065em solid transparent;
-  border-radius: 100%;
-  top: 0.05em;
-  left: 50%;
-  transform: translateX(-50%);
-  box-shadow: inset 0 0 0 .5em, 0em .67em 0 .2em;
-}
-
-i.icss-user:after {}
-
-i.icss-link {
-  width: .09em;
-  height: .4em;
-  border-radius: .1em;
-  margin: .3em .455em .3em;
-}
-
-.icss-stack i.icss-link {
-  transform: translate(-.5em, -.5em) rotate(30deg);
-}
-
-i.icss-link:before {
-  width: .33em;
-  height: .42em;
-  background-color: transparent;
-  border-radius: .16em .16em .1em .1em;
-  border: .09em solid currentColor;
-  border-bottom: 0 solid transparent;
-  top: -.25em;
-  left: -.12em;
-}
-
-i.icss-link:after {
-  width: .33em;
-  height: .42em;
-  background-color: transparent;
-  border-radius: .1em .1em .16em .16em;
-  border: .09em solid currentColor;
-  border-top: 0 solid transparent;
-  top: .24em;
-  left: -.12em;
-}
-
-i.icss-image {
-  width: 1em;
-  height: .75em;
-  background-color: transparent;
-  border-width: .065em;
-  border-style: solid;
-  overflow: hidden;
-  border-radius: .05em;
-  margin: .125em 0;
-}
-
-i.icss-image:before {
-  border-style: solid;
-  border-width: .3em;
-  transform: rotate(45deg);
-  box-shadow: .25em -.45em;
-  top: .4em;
-  left: -.1em;
-}
-
-i.icss-image:after {
-  border-width: .08em;
-  border-style: solid;
-  left: .2em;
-  top: .05em;
-  border-radius: 100%;
-}
-
-i.icss-camera {
-  width: .5em;
-  height: .5em;
-  border-radius: 100%;
-  background-color: transparent;
-  box-shadow:
-    inset -.026em -.026em 0 0.08em,
-    0 -.03em 0 0.14em,
-    -.03em -.17em 0 0.04em;
-  border: 0.07em solid transparent;
-  margin: .3em .25em .2em;
-}
-
-i.icss-camera:before {
-  width: 1em;
-  height: 0.7em;
-  border-radius: .08em;
-  box-shadow:
-    inset .15em -.01em 0 .09em,
-    inset 0 0 0 .05em;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-i.icss-camera:after {
-  width: .09em;
-  height: .51em;
-  box-shadow:
-    inset 0 -.42em,
-    -.02em 0 0 .08em,
-    -.05em -.1em 0 .02em;
-  border-radius: .04em;
-  top: -.09em;
-  left: .53em
-}
-
-i.icss-minus {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  margin: 0;
-}
-
-i.icss-minus:before,
-i.icss-minus:after {
-  width: 1em;
-  height: .18em;
-  top: 50%;
-  left: 50%;
-  border-radius: .06em;
-  background-color: currentColor;
-}
-
-i.icss-minus:before {
-  transform: translate(-50%, -50%) rotate(-180deg)
-}
-
-i.icss-minus:after {
-  transform: translate(-50%, -50%) rotate(0deg)
-}
-
-i.icss-bars {
-  margin: .41em 0;
-}
-
-i.icss-bars,
-i.icss-bars:before,
-i.icss-bars:after {
-  width: 1em;
-  height: .18em;
-  border-radius: .06em;
-  background-color: currentColor;
-}
-
-i.icss-bars:before {
-  top: -0.36em;
-  left: 0;
-}
-
-i.icss-bars:after {
-  top: 0.36em;
-  left: 0;
-}
-
-i.icss-key {
-  height: .55em;
-  width: .5em;
-  background: transparent;
-  border-radius: 50% / 47%;
-  box-shadow: inset -.05em 0 0 .18em;
-  margin: .225em .45em .225em .05em;
-  transform: rotate(45deg);
-  transform-origin: .5em 50%;
-}
-
-.icss-stack i.icss-key {
-  transform: translate(-.5em, -.5em) rotate(45deg);
-}
-
-i.icss-key:before {
-  width: .14em;
-  height: .14em;
-  box-shadow: inset .5em .5em,
-    -.09em .09em,
-    -.18em .18em,
-    -.27em .27em;
-  top: 50%;
-  left: .84em;
-  transform: translateY(-50%) scaleX(.95) rotate(45deg);
-}
-
-i.icss-key:after {
-  width: .61em;
-  height: .2em;
-  box-shadow: inset .27em -.13em;
-  top: 50%;
-  left: .3em;
-  transform: translateY(-50%);
-}
-
-i.icss-spinner {
-  width: .25em;
-  height: .25em;
-  background-color: transparent;
-  border-radius: 50%;
-  box-shadow:
-    0 -.4em,
-    -.28em -.28em 0 -.01em,
-    -.4em 0 0 -.02em,
-    -.28em .28em 0 -.03em,
-    0 .4em 0 -.04em,
-    .28em .28em 0 -.05em,
-    .4em 0 0 -.06em,
-    .28em -.28em 0 -.07em;
-  margin: .375em;
-}
-
-i.icss-paper-plane {
-  width: .25em;
-  height: .25em;
-  background-color: transparent;
-  border-style: solid;
-  border-color: currentColor transparent;
-  border-width: .25em .23em 0 0;
-  margin: .62em .37em .13em .38em;
-}
-
-i.icss-paper-plane:before {
-  width: .2em;
-  height: .67em;
-  border-style: solid;
-  border-color: currentColor transparent;
-  border-width: 0 .38em .68em 0;
-  transform: rotate(30deg) skewX(-25deg);
-  transform-origin: 0 0;
-  top: -.68em;
-  left: .61em;
-}
-
-i.icss-paper-plane:after {
-  width: .2em;
-  height: .67em;
-  border-style: solid;
-  border-color: currentColor transparent;
-  border-width: 0 0 .68em .25em;
-  transform: rotate(30deg) skewX(-35deg);
-  transform-origin: .25em 0;
-  top: -.68em;
-  left: .36em;
-}
-
-i.icss-magic-wand {
-  width: .07em;
-  height: .35em;
-  background-color: transparent;
-  border-radius: 50%;
-  box-shadow: .4em .05em;
-  margin: .325em .465em;
-}
-
-i.icss-magic-wand:before {
-  width: .2em;
-  height: 1em;
-  background-color: transparent;
-  border-radius: .05em;
-  box-shadow: inset 0 0 0 .065em,
-    inset 0 -.35em, inset 0 .2em, .5em 0 0 -.36em;
-  transform: rotate(45deg);
-  top: -.23em;
-  left: -.15em;
-}
-
-i.icss-magic-wand:after {
-  width: .35em;
-  height: .35em;
-  background-color: transparent;
-  border: 0 solid transparent;
-  border-width: .145em 0;
-  box-shadow: inset .5em .5em,
-    -.3em -.5em 0 -.11em,
-    .05em -.45em 0 -.11em,
-    -.55em -.35em 0 -.1em;
-  border-radius: 50%;
-  top: .05em;
-  left: .25em;
-}
-
-i.icss-composite-darker {
-  width: .7em;
-  height: .7em;
-  box-shadow: inset 0 0 0 .065em;
-  background-color: transparent;
-  margin: 0 .3em .3em 0;
-}
-
-i.icss-composite-darker:before {
-  width: .7em;
-  height: .7em;
-  background-color: currentColor;
-  border-radius: 50%;
-  clip: rect(0 .4em .4em 0);
-  top: .3em;
-  left: .3em;
-}
-
-i.icss-composite-darker:after {
-  width: .7em;
-  height: .7em;
-  background: currentColor;
-  border-radius: 50%;
-  opacity: .5;
-  top: .3em;
-  left: .3em;
-}
-
-i.icss-composite-lighter {
-  width: .7em;
-  height: .7em;
-  box-shadow: inset 0 0 0 .065em;
-  background-color: transparent;
-  margin: 0 .3em .3em 0;
-}
-
-i.icss-composite-lighter:before {
-  width: .7em;
-  height: .7em;
-  background-color: currentColor;
-  border-radius: 50%;
-  opacity: 50%;
-  top: .3em;
-  left: .3em;
-}
-
-i.icss-composite-lighter:after {
-  width: .7em;
-  height: .7em;
-  border-radius: 50%;
-  background-image:
-    linear-gradient(transparent 50%, currentColor 50%),
-    linear-gradient(90deg, transparent 50%, currentColor 50%);
-  top: .3em;
-  left: .3em;
-}
-
-i.icss-quill-pen {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  margin: 0;
-}
-
-i.icss-quill-pen:before {
-  width: .78em;
-  height: .78em;
-  border-radius: 85% 15% 100% 0 / 85% 15%;
-  box-shadow:
-    inset -.5em .12em 0 -.2em,
-    inset .52em -.68em 0 -.2em;
-  transform: rotate(-7deg) skewX(-15deg);
-  top: .05em;
-  left: .17em;
-}
-
-i.icss-quill-pen:after {
-  width: .2em;
-  height: .09em;
-  background: currentColor;
-  transform: skewY(-45deg);
-  left: .05em;
-  top: .8em;
-}
-
-i.icss-print {
-  width: .68em;
-  height: 1em;
-  border-style: solid;
-  border-color: currentcolor;
-  background-color: transparent;
-  border-width: .07em;
-  border-radius: .05em;
-  background-color: transparent;
-  margin: 0 .16em;
-}
-
-i.icss-print:before {
-  width: 1em;
-  height: .4em;
-  border-width: .07em .21em 0;
-  border-style: solid;
-  border-color: currentColor currentcolor transparent;
-  border-radius: .05em .05em 0 0;
-  top: .25em;
-  left: 50%;
-  transform: translateX(-50%);
-  background-image: linear-gradient(transparent 20%, currentcolor 20%, currentcolor 60%, transparent 60%);
-}
-
-i.icss-print:after {
-  width: .45em;
-  height: 0.065em;
-  background-color: currentColor;
-  left: 50%;
-  transform: translateX(-50%);
-  top: .6em;
-  box-shadow: 0 .12em, -.1em -.28em 0 .05em;
-}
-
-
-i.icss-edit {
-  width: 1em;
-  height: 1em;
-  background-color: transparent;
-  border-radius: 50% 45% 50% 35%;
-  overflow: hidden;
-  margin: 0;
-}
-
-i.icss-edit:before {
-  width: .3em;
-  height: .8em;
-  border: .15em solid transparent;
-  border-top: .24em solid currentColor;
-  transform: rotate(45deg) translate(-50%);
-  transform-origin: 0 0;
-  box-shadow:
-    0 -.05em,
-    .24em -.8em,
-    -.24em -.8em,
-    0 -1.5em;
-  clip: rect(-.9em .3em 1em 0);
-  left: .25em;
-  top: .75em;
-}
-
-i.icss-edit:after {
-  width: .1em;
-  height: 0;
-  background-color: transparent;
-  transform: translate(-50%, -50%);
-  top: 50%;
-  left: 50%;
-}
-
-i.icss-arrow-left {
-  width: 1em;
-  height: .18em;
-  border-radius: .1em;
-  background-color: currentColor;
-  margin: .41em 0;
-}
-
-i.icss-arrow-left:before {
-  width: .6em;
-  height: .18em;
-  border-radius: 1em;
-  background-color: currentColor;
-  top: -.15em;
-  left: -.06em;
-  transform: rotate(-45deg);
-}
-
-i.icss-arrow-left:after {
-  width: .6em;
-  height: .18em;
-  border-radius: .1em;
-  background-color: currentColor;
-  top: .15em;
-  left: -0.06em;
-  transform: rotate(45deg);
-}
-
-i.icss-comment {
-  width: .9em;
-  height: .65em;
-  border-radius: 50%;
-  margin: .1em .05em .2em;
-}
-
-i.icss-comment:before {
-  width: .3em;
-  height: .22em;
-  border-radius: 0 0 100% 0;
-  border: 0 solid transparent;
-  border-right: .15em solid currentColor;
-  transform: rotate(15deg);
-  top: 0.55em;
-  left: .08em;
-}
-
-i.icss-comment:after {}
-
-i.icss-chat {
-  width: .7em;
-  height: .55em;
-  border-radius: 50%;
-  border: .065em solid transparent;
-  background: transparent;
-  box-shadow: inset 1em 0, -.35em -.23em;
-  margin: .35em -.05em .05em .35em;
-}
-
-i.icss-chat:before {
-  width: .25em;
-  height: .2em;
-  border-radius: 0 0 100% 0;
-  border: 0 solid transparent;
-  border-right: .13em solid currentColor;
-  transform: rotate(18deg);
-  top: 0.15em;
-  left: -.38em;
-}
-
-i.icss-chat:after {
-  width: .2em;
-  height: .15em;
-  border-radius: 0 0 0 100%;
-  border: 0 solid transparent;
-  border-left: .12em solid currentColor;
-  transform: rotate(-10deg);
-  top: 0.37em;
-  left: .3em;
-}
-
-i.icss-video-camera {
-  width: .7em;
-  height: .5em;
-  border-radius: .1em;
-  margin: .4em .23em .1em .07em;
-}
-
-i.icss-video-camera:before {
-  height: 0.4em;
-  border: .2em solid currentColor;
-  border-width: .1em .18em .1em 0;
-  border-color: transparent currentColor;
-  border-radius: .03em;
-  top: .05em;
-  left: .7em;
-}
-
-i.icss-video-camera:after {
-  width: .28em;
-  height: .28em;
-  border: .08em solid currentColor;
-  box-shadow: -.3em -.03em 0 .04em;
-  border-radius: 50%;
-  top: -.26em;
-  left: .37em
-}
-
-i.icss-sound-0 {
-  width: .45em;
-  height: .7em;
-  background-color: transparent;
-  border: .2em solid transparent;
-  border-right: .24em solid currentColor;
-  border-left: 0;
-  box-shadow: inset .15em 0;
-  margin: .15em .5em .15em .05em;
-}
-
-i.icss-sound-0:before {
-  width: .4em;
-  height: .1em;
-  background-color: currentColor;
-  top: 50%;
-  left: .5em;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-i.icss-sound-0:after {
-  width: .4em;
-  height: .1em;
-  background-color: currentColor;
-  top: 50%;
-  left: .5em;
-  transform: translateY(-50%) rotate(-45deg);
-}
-
-i.icss-sound-3 {
-  width: .45em;
-  height: .7em;
-  background-color: transparent;
-  border: .2em solid transparent;
-  border-right: .24em solid currentColor;
-  border-left: 0;
-  box-shadow: inset .15em 0;
-  margin: .15em .5em .15em .05em;
-}
-
-i.icss-sound-3:before {
-  width: .7em;
-  height: .7em;
-  border: .1em solid transparent;
-  box-shadow: inset 0 0 0 .1em, 0 0 0 .09em;
-  border-radius: 50%;
-  clip: rect(-.4em .8em .35em .35em);
-  top: 50%;
-  left: .1em;
-  transform: scaleX(.8) translateY(-50%) rotate(45deg);
-}
-
-i.icss-sound-3:after {
-  width: .9em;
-  height: .9em;
-  border: .1em solid transparent;
-  box-shadow: 0 0 0 .09em;
-  border-radius: 50%;
-  clip: rect(-.5em 1em .52em .38em);
-  top: 50%;
-  left: .1em;
-  transform: scaleX(.8) translateY(-50%) rotate(45deg);
-}
-
-i.icss-exclamation-circle {
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  border: .1em solid currentColor;
-  background-color: transparent;
-  margin: 0;
-}
-
-i.icss-exclamation-circle:before {
-  width: .15em;
-  border: .015em solid transparent;
-  border-top: .38em solid currentColor;
-  border-bottom: .09em solid transparent;
-  box-shadow: 0 .13em 0 -.012em;
-  top: .1em;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-i.icss-microphone {
-  width: .5em;
-  height: .3em;
-  border-radius: 0 0 .25em .25em / 0 0 .25em .25em;
-  background-color: transparent;
-  border: .065em solid currentColor;
-  border-top: 0;
-  margin: .5em .25em .2em;
-}
-
-i.icss-microphone:before {
-  width: .3em;
-  height: .6em;
-  border-radius: .2em;
-  background-color: transparent;
-  top: -.4em;
-  left: 50%;
-  transform: translateX(-50%);
-  box-shadow: inset 0 -.25em 0 .063em,
-    inset 0 0em 0 .063em,
-    0 .55em 0 -.11em,
-    0 .91em 0 .1em;
-  clip: rect(0 .3em .9em 0);
-}
-
-i.icss-microphone:after {}
-
-i.icss-exchange {
-  background-color: transparent;
-  border: 0.2em solid transparent;
-  border-left-color: currentColor;
-  border-right-width: 0.8em;
-  box-shadow: -0.7em 0 0 -0.13em;
-  margin: .5em -.8em .05em 0.8em;
-}
-
-i.icss-exchange:before {
-  border: 0.2em solid transparent;
-  border-right-color: currentColor;
-  border-left-width: 0.8em;
-  box-shadow: 0.7em 0 0 -0.13em;
-  top: -.5em;
-  left: -1.8em
-}
-
-i.icss-mail-box {
-  width: .1em;
-  height: .2em;
-  background-color: currentColor;
-  margin: .8em .4em 0 .5em;
-}
-
-i.icss-mail-box:before {
-  width: .45em;
-  height: .6em;
-  border-radius: .3em .3em 0 0 / .4em .4em 0 0;
-  border: .05em solid transparent;
-  box-shadow:
-    inset 0 0 0 .1em,
-    inset 0 1.32em 0 -1em,
-    .3em 0 0 .05em,
-    .5em 0 0 -.05em;
-  clip: rect(.05em 1em .55em 0);
-  top: -.55em;
-  left: -.45em;
-}
-
-i.icss-mail-box:after {
-  border: .15em solid transparent;
-  border-top: .25em solid currentColor;
-  border-bottom: 0;
-  box-shadow: 0 -.05em;
-  transform: rotate(-0deg);
-  transform-origin: -.06em 0;
-  top: -.43em;
-  left: 0;
-}
-
-i.icss-mail-box-in {
-  width: .1em;
-  height: .2em;
-  background-color: currentColor;
-  margin: .8em .4em 0 .5em;
-}
-
-i.icss-mail-box-in:before {
-  width: .45em;
-  height: .6em;
-  border-radius: .3em .3em 0 0 / .4em .4em 0 0;
-  border: .05em solid transparent;
-  box-shadow:
-    inset 0 0 0 .1em,
-    inset 0 1.32em 0 -1em,
-    .3em 0 0 .05em,
-    .5em 0 0 -.05em;
-  clip: rect(.05em 1em .55em 0);
-  top: -.55em;
-  left: -.45em;
-}
-
-i.icss-mail-box-in:after {
-  border: .15em solid transparent;
-  border-top: .25em solid currentColor;
-  border-bottom: 0;
-  box-shadow: 0 -.05em;
-  transform: rotate(-90deg);
-  transform-origin: -.06em 0;
-  top: -.43em;
-  left: 0;
-}
-
-i.icss-floppy {
-  width: .9em;
-  height: .6em;
-  background-color: transparent;
-  border-radius: .05em;
-  box-shadow:
-    inset .1em .1em,
-    inset .1em -.1em,
-    inset -.1em .1em,
-    inset -.1em -.1em;
-  margin: .4em .05em 0;
-}
-
-i.icss-floppy:before {
-  width: 0;
-  height: 0;
-  background-color: transparent;
-  border: .1em solid transparent;
-  border-bottom: .1em solid currentColor;
-  border-width: .1em .2em .2em 0;
-  box-shadow: 0 .25em;
-  top: -.5em;
-  left: .7em
-}
-
-i.icss-floppy:after {
-  width: .5em;
-  height: .3em;
-  border-radius: 0 0 .03em .03em;
-  border: 0 solid transparent;
-  border-width: .05em .1em .1em;
-  box-shadow: inset .12em 0,
-    -.15em .05em 0 .05em,
-    -.2em .2em,
-    .2em .2em,
-    .1em .5em 0 -.12em,
-    .1em .65em 0 -.12em,
-    -.1em .5em 0 -.12em,
-    -.1em .65em 0 -.12em;
-  top: -.4em;
-  left: .2em;
-}
-
-i.icss-heart {
-  width: .5em;
-  height: .5em;
-  background: currentColor;
-  border: .065em solid currentColor;
-  border-top: 0;
-  border-right: 0;
-  transform: rotate(-45deg);
-  margin: .3em .25em .2em;
-}
-
-.icss-stack i.icss-heart {
-  transform: translate(-.5em, -.5em) rotate(-45deg);
-}
-
-i.icss-heart:before {
-  width: .5em;
-  height: .28em;
-  top: -.22em;
-  left: -.063em;
-  background: currentColor;
-  border-radius: .5em .5em 0 0;
-}
-
-i.icss-heart:after {
-  width: .28em;
-  height: .5em;
-  top: 0em;
-  left: .37em;
-  border-radius: 0 .5em .5em 0;
-  background: currentColor;
-}
-
-i.icss-heart-o {
-  width: .5em;
-  height: .5em;
-  background: transparent;
-  border-left: solid .065em currentColor;
-  border-bottom: solid .065em currentColor;
-  transform: rotate(-45deg);
-  margin: .3em .25em .2em;
-}
-
-.icss-stack i.icss-heart-o {
-  transform: translate(-.5em, -.5em) rotate(-45deg);
-}
-
-i.icss-heart-o:before {
-  width: .5em;
-  height: .28em;
-  top: -.22em;
-  left: -.063em;
-  border-radius: .5em .5em 0 0;
-  border: .065em solid currentColor;
-  border-bottom: 0;
-}
-
-i.icss-heart-o:after {
-  width: .28em;
-  height: .5em;
-  top: 0em;
-  left: .37em;
-  border-radius: 0 .5em .5em 0;
-  border: .065em solid currentColor;
-  border-left: 0;
-}
-
-i.icss-circle {
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  margin: 0;
-}
-
-
-i.icss-circle-o {
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  background-color: transparent;
-  border: .1em solid currentColor;
-  margin: 0;
+    width: .18em;
+    height: .18em;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    box-shadow: .42em 0, -.42em 0, 0 .42em, 0 -.42em;
 }
diff --git a/internal/templates/base.html b/internal/templates/base.html
index 26d69c1..6c7243c 100644
--- a/internal/templates/base.html
+++ b/internal/templates/base.html
@@ -33,6 +33,19 @@
 <body>
   <nav id="mainNav" class="container-fluid">
     <ul>
+      <li class="mobile-menu">
+        {{ if .Authenticated }}
+          <a id="messagesMenu" href="/messages">
+            <i class="icss-mail-box"></i>
+            {{ if gt $.NewMessages  0 }}
+              <span class="badge">{{ $.NewMessages }}</span>
+            {{ end }}
+          </a>
+        {{ end }}
+        <a id="burgerMenu" href="javascript:void(0);">
+          <i class="icss-bars"></i>
+        </a>
+      </li>
       <li class="logo">
         <a href="/" class="contrast">
           <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 249.1" style="enable-background:new 0 0 449 249.1;" height="3.5rem">
@@ -49,10 +62,16 @@
           </svg>
         </a>
       </li>
+      <li>
+        <a href="/">
+          <i class="icss-search"></i>
+          Search
+        </a>
+      </li>
       <li>
         <a href="/add">
           <i class="icss-plus"></i>
-          Add site
+          Add site...
         </a>
       </li>
     </ul>
@@ -84,11 +103,10 @@
     {{template "content" . }}
   </main>
   <footer class="container">
-    <div class="footer-copyright"><a href="https://git.mills.io/prologic/spyda" target="_blank">spyda v{{ .SoftwareVersion }}</a>
-        ·
-        Created with 💚 by <a href="https://github.com/prologic" target="_blank">James Mills</a>
-        ·
-        &copy; 2021 <a href="https://github.com/prologic" target="_blank">James Mills</a>. All rights reserved.
+    <div class="footer-copyright">
+      <a href="https://git.mills.io/prologic/spyda" target="_blank">spyda v{{ .SoftwareVersion }}</a>
+      ·
+      &copy; 2020 <a href="https://github.com/prologic" target="_blank">James Mills</a>. All rights reserved.
     </div>
     <div class="footer-menu">
       <a href="/about" target="_blank" class="menu-item">About</a>
@@ -96,15 +114,17 @@
       <a href="/abuse" target="_blank" class="menu-item">Abuse</a>
       <a href="/help" target="_blank" class="menu-item">Help</a>
       <a href="/support" target="_blank" class="menu-item">Support</a>
+      <a href="/atom.xml" target="_blank">Atom&nbsp;<i class="icss-rss"></i></a>
     </div>
   </footer>
   {{ if $.Debug }}
     <script type="application/javascript" src="/js/01-umbrella.js"></script>
     <script type="application/javascript" src="/js/02-polyfill.js"></script>
     <script type="application/javascript" src="/js/03-twix.js"></script>
-    <script type="application/javascript" src="/js/99-spyda.js"></script>
+    <script type="application/javascript" src="/js/99-twtxt.js"></script>
+    <script type="application/javascript" src="/js/ie11CustomProperties.min.js"></script>
   {{ else }}
-    <script type="application/javascript" src="/js/{{ .Commit }}/spyda.min.js"></script>
+    <script type="application/javascript" src="/js/{{ .Commit }}/twtxt.min.js"></script>
   {{ end }}
 </body>
 </html>