themeswitcher made to be strictly js only; css cleanups according to that; theme made a bit more airy

templates/style-alt.css

@@ -61,4 +61,18 @@ input {
 body > footer a:hover {
   color: #fff;
   border-bottom: 1px solid #fff;
-}                
+}      
+
+.h-feed aside a,
+.h-feed article a,
+body > nav > ul > li a {
+  border-bottom: 1px solid #3173b4;
+}
+
+.comments .u-url:hover,
+.footnotes a:hover,
+.h-feed aside a:hover,
+.h-feed article a:hover,
+body > nav > ul > li a:hover {
+  border-bottom: 1px solid #014384;
+}

templates/style-print.css

@@ -1,4 +1,3 @@
-
 * {
   background-color: #fff !important;
   color: #222;
@@ -87,4 +86,4 @@ pre {
 
 .h-feed .h-entry {
   page-break-after: always;
-}
+}    

templates/style.css

@@ -2,7 +2,7 @@
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  font-family: "Courier", monospace;
+  font-family: "Courier New", monospace;
   margin: 0;
   padding: 0;
   line-height: 1.5em;
@@ -20,11 +20,14 @@ body > footer {
   padding: 0.6em 0;
 }
 
-body > main,
 body > nav,
+body > main,
+body > main > article,
+body > main > aside,
+body > main > section,
 body > header > section,
 body > footer > section {
-  max-width: 88ch;
+  max-width: 56em;
   margin: 0 auto;
   padding: 0 1em;
 }
@@ -46,7 +49,7 @@ main p {
   margin: 1em 0;
 }
 
-h1 {  
+h1 {
   text-transform:uppercase;
   text-align: center;
   padding-bottom: 1em;
@@ -64,6 +67,7 @@ svg {
 
 body > svg {
   display: none;
+  visibility: hidden;
 }
 
 a {
@@ -281,18 +285,6 @@ article > header {
   margin: 0;
 }
 
-.h-feed aside a,
-.h-feed article a,
-body > nav > ul > li a {
-  border-bottom: 1px solid rgba(255, 153, 0, 0.5);
-}
-
-.h-feed aside a:hover,
-.h-feed article a:hover,
-body > nav > ul > li a:hover {
-  border-bottom: 1px solid #eee;
-}
-
 main ul {
   margin-left: 2em;
 }
@@ -319,6 +311,7 @@ li p {
   text-overflow: ellipsis;
   vertical-align: top;
   max-width: 96%;
+  border-bottom: 1px solid rgba(255, 153, 0, 0);
 }
 
 .footnote-back {
@@ -338,6 +331,21 @@ body > nav > ul > li {
   margin: 0 0.6em;
 }
 
+.h-feed aside a,
+.h-feed article a,
+body > nav > ul > li a {
+  border-bottom: 1px solid rgba(255, 153, 0, 0.5);
+}
+
+.comments .u-url:hover,
+.footnotes a:hover,
+.h-feed aside a:hover,
+.h-feed article a:hover,
+body > nav > ul > li a:hover {
+  border-bottom: 1px solid #eee;
+}
+
+
 @media all and (min-width: 58em) {
   body > header > section {
     text-align: left;
@@ -360,4 +368,4 @@ body > img {
   right: 0;
   width: 10em;
   height: auto;
-}                    
+}

templates/themeswitcher.js

@@ -1,6 +1,8 @@
 var DEFAULT_THEME = 'dark';
 var ALT_THEME = 'light';
 var STORAGE_KEY = 'theme';
+var theme_container = document.getElementById("header-forms");
+var theme_insbefore = document.getElementById("search");
 var colorscheme = [];
 var mql = window.matchMedia('(prefers-color-scheme: ' + ALT_THEME + ')');
 
@@ -58,7 +60,7 @@ function doTheme() {
     var themeform = document.createElement('form');
     themeform.className = "theme";
     themeform.innerHTML='<svg width="16" height="16"><use xlink:href="#icon-contrast"></use></svg>';
-    document.getElementById("header-forms").insertBefore(themeform, document.getElementById("search"));
+    theme_container.insertBefore(themeform, theme_insbefore);
     var schemes = ["dark", "light"];
     for (var i = 0; i < schemes.length; i++) {
         var span = document.createElement('span');