custom tab focus, print view is now not terrible and styles are in layers now

static/css/colors.css

@@ -1,3 +1,4 @@
+@layer baseline, print;
 /* https://color.adobe.com/create/color-contrast-analyzer */
 /*dark theme*/
 @media (prefers-color-scheme: dark) {
@@ -7,6 +8,7 @@
      * #5ac
      * */
     --normal-text: #CCC;
+    --focus-outline-color: #f00;
     --link-clicked: #B250D8;
     --link-unclicked: #d80;
     --header-bg: #333;
@@ -31,6 +33,7 @@
 :root {
     --bg-color: #e2e3e5;
     --normal-text: #000;
+    --focus-outline-color: #f00;
     --link-unclicked: #2535B4;
     --link-clicked: #832244;
     /*#E6DDE6
@@ -47,11 +50,17 @@
     --blockquote-bg: #fff;
 }
 }
+@layer baseline{
 body {
     background: var(--bg-color);
     color: var(--normal-text);
 }
 
+/*iffy if this should be here but it doesn't mess with the layout so I'll allow it*/
+:focus-visible {
+  outline: 2px solid var(--focus-outline-color);
+  border-radius: 0.25rem;
+}
 .nav-link {
     color: var(--nav-link-color) !important;
 }
@@ -82,3 +91,4 @@ blockquote {
 pre:has( > code) {
     background: var(--blockquote-bg);
 }
+}

static/css/layout.css

@@ -1,3 +1,6 @@
+@layer pre-load, baseline, print;
+
+@layer baseline {
 body {
     padding: 0px;
     margin: 0px;
@@ -25,7 +28,6 @@ a:hover {
     padding: 0.5em 1em;
     position: fixed;
 }
-
 #content {
     box-sizing: border-box;
     display: block flex;
@@ -38,7 +40,6 @@ a:hover {
     /*https://pearsonified.com/golden-ratio-typography-intro/*/
     /*https://grtcalculator.com/*/
     max-width: 55em;
-    border: 0.5em solid white;
     border-radius: 0.5em;
 
     /* needed due to being flex itself*/
@@ -88,3 +89,24 @@ p {
     /*https://pearsonified.com/golden-ratio-typography-intro/ is where this came from and tbh having a bigger line height does make things more readable although I tune it down a bit*/
     line-height: 1.5;
 }
+}
+/* we really want to make sure this doesn't stick around when colors load in regardless of when/how colors get loaded in*/
+@layer pre-load{
+    #content {
+        border: 0.5em solid white;
+    }
+}
+/* I mean why not? */
+@media print {
+    @layer print{
+        #header {
+            visibility: hidden;
+        }
+        #content {
+            border-style: none;
+        }
+        pre {
+            page-break-inside: avoid;
+        }
+    }
+}