the end is never

TODO

@@ -1,11 +1,17 @@
 get RSS feed up and running
 
-emphasis category viewer is in via different header color
+emphasize category viewer is in via different header color
 
 specify ul styling to be specific to posts list
 
 experiment with ul margin vs padding in posts list for accessibility without focus border looking ridiculous
 
+Fix typography on mobile (mostly just anchors at this point)
+    https://stackoverflow.com/questions/16387400/getting-the-right-font-size-on-every-mobile-device#35155083
+    https://css-tricks.com/viewport-sized-typography/
+
+make tapping and holding or hovering changes header nav-link bg
+
 maybe make it so #content or a parent class which has everything but header scrolls intead of the normal page, needs and overflow css attr and height 100% for body/html and maybe flex-box and/or grid (this is to make scroll not appear on header)
 
 Fix articles with inline html in them and/or links
@@ -13,6 +19,8 @@ Fix articles with inline html in them and/or links
 ico?
 
 analytics
+    https://github.com/electerious/Ackee
+    https://umami.is/ (https://github.com/umami-software/umami)
 
 Webmention analytics https://www.w3.org/TR/webmention/#receiving-webmentions
 

static/css/colors.css

@@ -14,6 +14,7 @@
     --link-unclicked: #d80;
     --header-bg: #333;
     --nav-link-color: #6B0;
+    --nav-link-bg-color: #444;
     --content-border-color: #5ac;
     /*stolen from code theme*/
     --blockquote-bg: rgb(29, 31, 33);
@@ -47,6 +48,7 @@
     /*#841163
      * #115e84*/
     --nav-link-color: #118411;
+    --nav-link-bg-color: #bbb;
     --content-border-color: #026;
     --blockquote-bg: #fff;
 }
@@ -65,6 +67,7 @@ body {
 }
 .nav-link {
     color: var(--nav-link-color) !important;
+    background-color: var(--nav-link-bg-color);
 }
 
 a {

static/css/layout.css

@@ -1,6 +1,7 @@
 @layer pre-load, baseline, print;
 
 @layer baseline {
+
 body {
     padding: 0px;
     margin: 0px;
@@ -17,21 +18,45 @@ a:hover {
     text-decoration: underline;
 }
 
+.nav-link{
+    font-size: 3vh;
+    padding: 0em 0.25em;
+    border-radius: 0.5rem;
+}
+
+h1 {
+  font-size:3vh;
+}
+h2 {
+  font-size: 2.4vh;
+}
+p{
+  font-size: 1.75vh;
+}
+a {
+    font-size: 1.75vh;
+}
+.info {
+    font-size: 1.75vh;
+}
+
+
 #header {
     box-sizing: border-box;
     display: flex;
     flex-flow: row nowrap;
-    gap: 1em;
+    gap: 0.5em;
     align-items: center;
     width: 100%;
     font-size: 24px;
     padding: 0.5em 1em;
-    position: fixed;
+    /*was a fun experiment but this just causes issues*/
+    /*position: fixed;*/
 }
 #content {
     box-sizing: border-box;
     display: block flex;
-    margin: calc(24px + 3rem) 1rem 1rem 1rem;
+    margin: 1rem;/*calc(24px + 3rem) 1rem 1rem 1rem;*/
     padding: 1rem;
     /* needed due to flex parent*/
     width: 100%;

templates/default.html

@@ -21,8 +21,7 @@
     </div>
     <div id="content-outer">
         <div id="content">
-            <h1
+            <h1 style="font-variant: small-caps;">
-                style="font-variant: small-caps;text-align: justify; -moz-text-align-last: center; text-align-last: center;">
                 {{{title}}}</h1>
             {{{content}}}
         </div>