themeswitcher actually seems to be working + styling cleanup for themeswitcher

templates/base.j2.html

@@ -58,6 +58,12 @@
                     notes
                 </a>
             </li>
+            <li>
+                <a title="follow petermolnar.net" href="{{ site.url }}/follow/">
+                    <svg width="16" height="16"><use xlink:href="#icon-feed" /></svg>
+                    follow
+                </a>
+            </li>
         </ul>
     </nav>
 
@@ -85,15 +91,6 @@
             <input type="submit" value="➡" />
         </form>
 
-        <p class="follow">
-            <a title="follow petermolnar.net" href="{{ site.url }}/follow/">
-                <svg width="16" height="16">
-                    <use xlink:href="#icon-feed" />
-                </svg>
-                follow
-            </a>
-        </p>
-
     </div>
 </header>
 

templates/style.css

@@ -15,15 +15,11 @@ body {
   font-family: sans-serif;
   color: #ccc;
   background-color: #222;
-  font-size: 100%;
   line-height: 1.3em;
-  transition: all 0.2s;
 }
 
 svg {
   transform: rotate(0deg);
-  width: 16px;
-  height: 16px;
   fill: currentColor;
   vertical-align: middle;
 }
@@ -92,6 +88,7 @@ figcaption {
   text-align: center;
 }
 
+video,
 figure img {
   display: block;
   max-height: 98vh;
@@ -102,16 +99,16 @@ figure img {
   border: 1px solid #000;
 }
 
-figcaption dt {
-  display: none;
-}
-
-figcaption dd {
+figcaption dd, label {
   font-size: 0.8em;
   display: inline-block;
   margin:0.3em 0.3em;
 }
 
+label {
+  cursor: pointer;
+}
+
 ul {
   padding-left: 1.3em;
 }
@@ -131,33 +128,6 @@ input, button, label {
   vertical-align: middle;
 }
 
-label {
-  font-weight: bold;
-  font-size: 0.8em;
-  cursor: pointer;
-  margin: 0 0.3em;
-}
-
-.theme {
-  margin: 0 0.3em;
-  display: none;
-  color: #ccc;
-}
-
-.theme input {
-  display: none;
-}
-
-.theme input + label::before {
-  content: '\2718';
-  display: inline-block;
-  padding: 0 0.1em;
-}
-
-.theme input:checked + label::before {
-  content: '\2714';
-}
-
 input {
   border-bottom: 3px solid #ccc;
 }
@@ -175,7 +145,7 @@ nav li {
 
 code, pre, q, figcaption {
   font-family: monospace;
-  font-size: 0.94em;
+  font-size: 1em;
 }
 
 code, pre {
@@ -238,20 +208,10 @@ body > footer {
   background-color: #111;
 }
 
-body > header form {
-  padding: 0.2em 0 0 0;
-  display: inline-block;
-}
-
 body > header p {
   font-size: 0.8em;
 }
 
-body > svg,
-body > script {
-  display: none;
-}
-
 body > header {
   position: relative;
 }
@@ -260,12 +220,19 @@ body > header nav {
   margin: 0.3em 0;
 }
 
+body > header form {
+  padding: 0.6em;
+  color: #ccc;
+  display: inline-block;
+}
+
 body > header a {
   font-weight: bold;
   color: #ccc;
   border-bottom: 3px solid transparent;
   text-decoration: none;
   padding-bottom: 0.3em;
+  font-size: 0.9em;
 }
 
 body > header a:hover,
@@ -281,6 +248,14 @@ body > header a svg {
   margin: 0.1em auto;
 }
 
+.theme input + label {
+  border-bottom: 3px solid transparent;
+}
+
+.theme input:checked + label {
+  border-bottom: 3px solid #ccc;
+}
+
 body > main,
 body > nav,
 body > footer > div {
@@ -315,10 +290,6 @@ body > footer img {
   width: 1em;
 }
 
-body > footer h2 {
-  display: none;
-}
-
 body > footer > ul >li > a > span {
   display: block;
   font-size: 0.8em;
@@ -337,11 +308,17 @@ body > footer > ul >li > a > span {
   margin: 0 0 0 0.1em;
 }
 
-.h-feed h1 {
+figcaption dt,
+body > svg,
+body > script,
+body > footer h2,
+.h-feed h1,
+.theme,
+.theme input {
   display: none;
 }
 
-@media all and (min-width: 56em) {
+@media all and (min-width: 58em) {
   body > header {
     text-align: unset;
     display: flex;
@@ -356,4 +333,10 @@ body > footer > ul >li > a > span {
   body > header a svg {
     display: inline-block;
   }
-}    
+  
+ 
+  body > header form {
+    padding: 0.3em;
+  }
+
+}                    

templates/themeswitcher.js

@@ -3,15 +3,12 @@ var ALT_THEME = 'light';
 var STORAGE_KEY = 'theme';
 var colorscheme = document.getElementsByName('colorscheme');
 
-function setTheme(e) {
-    var mode = e.target.value;
-    if (mode == 'auto') {
-        localStorage.removeItem(STORAGE_KEY);
+function indicateTheme(mode) {
+    for(var i = colorscheme.length; i--; ) {
+        if(colorscheme[i].value == mode) {
+            colorscheme[i].checked = true;
+        }
     }
-    else {
-        localStorage.setItem(STORAGE_KEY, mode);
-    }
-    applyTheme(mode);
 }
 
 function applyTheme(mode) {
@@ -22,32 +19,38 @@ function applyTheme(mode) {
     else {
         st.setAttribute('media', 'speech');
     }
-
-    for(var i = colorscheme.length; i--; ) {
-        if(colorscheme[i].value == mode) {
-            colorscheme[i].checked = true;
-        }
-    }
 }
 
-function mqlTheme(e) {
-    if (localStorage.getItem(STORAGE_KEY) != null) {
-        return false;
-    }
-    if (e.matches) {
-        applyTheme(ALT_THEME);
+function setTheme(e) {
+    var mode = e.target.value;
+    if (mode == 'auto') {
+        localStorage.removeItem(STORAGE_KEY);
     }
     else {
-        applyTheme(DEFAULT_THEME);
+        localStorage.setItem(STORAGE_KEY, mode);
     }
+    var e = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
+    autoTheme(e);
 }
 
-var current = localStorage.getItem(STORAGE_KEY);
-if (current == null) { current = 'auto'; }
-applyTheme(current);
+function autoTheme(e) {
+    var current = localStorage.getItem(STORAGE_KEY);
+    var mode = 'auto';
+    var indicate = 'auto';
+    if ( current != null) {
+        indicate = mode = current;
+    }
+    else if (e.matches) {
+        mode = ALT_THEME;
+    }
+    applyTheme(mode);
+    indicateTheme(indicate);
+}
 
 var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
-mql.addListener(mqlTheme);
+autoTheme(mql);
+mql.addListener(autoTheme);
+
 for(var i = colorscheme.length; i--; ) {
     colorscheme[i].onclick = setTheme;
 }