From 40bbd9b5480c69e2c95bd9f20cc428ce992e7b15 Mon Sep 17 00:00:00 2001
From: Ada Isopods <me@bathynomus.xyz>
Date: Wed, 14 Oct 2026 03:38:44 -0600
Subject: Font selector and other little things Added a font selector CSS is
 now inlined server-side because it makes Lighthouse happy A few other little
 accessibility and general housekeeping adjustments

---
 style.css | 106 +++++++++++++++++++++++++-------------------------------------
 1 file changed, 43 insertions(+), 63 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 4f6f76a..5644bd0 100644
--- a/style.css
+++ b/style.css
@@ -1,54 +1,3 @@
-@font-face {
-  font-family: b612;
-  src: url(https://bugwo.men/stuff/fonts/B612/B612-Regular.ttf);
-  font-display: swap;
-}
-@font-face {
-  font-family: b612;
-  src: url(https://bugwo.men/stuff/fonts/B612/B612-Bold.ttf);
-  font-weight: bold;
-  font-display: swap;
-}
-@font-face {
-  font-family: b612;
-  src: url(https://bugwo.men/stuff/fonts/B612/B612-Italic.ttf);
-  font-style: italic;
-  font-display: swap;
-}
-@font-face {
-  font-family: b612;
-  src: url(https://bugwo.men/stuff/fonts/B612/B612-BoldItalic.ttf);
-  font-weight: bold;
-  font-style: italic;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: b612_mono;
-  src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-Regular.ttf);
-  font-display: swap;
-}
-@font-face {
-  font-family: b612_mono;
-  src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-Bold.ttf);
-  font-weight: bold;
-  font-display: swap;
-}
-@font-face {
-  font-family: b612_mono;
-  src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-Italic.ttf);
-  font-style: italic;
-  font-display: swap;
-}
-@font-face {
-  font-family: b612_mono;
-  src: url(https://bugwo.men/stuff/fonts/B612_Mono/B612Mono-BoldItalic.ttf);
-  font-weight: bold;
-  font-style: italic;
-  font-display: swap;
-}
-
-
 :root {
   color-scheme: dark light;
 
@@ -82,7 +31,7 @@
   If there's a color value somewhere else, move it here so it can be responsive */
 
   --stdpadding: 1rem;
-  --idealwidth: calc(80ch + (var(--stdpadding) * 10));
+  --idealwidth: calc(52rem + (var(--stdpadding) * 10));
   --bodywidth: min(calc(90vw - (4 * var(--stdpadding))), var(--idealwidth));
   /*--mobileviewmaxwidth: calc(92ch + 24rem); root variables don't work in media queries, apparently. Keeping this here for reference */
 
@@ -95,7 +44,8 @@
   --stddropshadow: .25rem .25rem .5rem var(--shadow);
   --blockshadow: drop-shadow(0 0 1.5rem var(--shadow));
 
-  --bodyfont: b612_mono, monospace;
+  /* --bodyfont should be declared in the font's stylesheet
+  --bodyfont: b612_mono, monospace; */
 
 }
 html, body {
@@ -121,7 +71,8 @@ body > p:last-child {
 a {
   color: var(--accent1);
 }
-a:hover {
+a:hover,
+a:focus {
   color: var(--accent2);
 }
 .backlink {
@@ -273,6 +224,23 @@ footer {
 footer p {
   margin: 0;
 }
+footer input {
+  padding: .2rem .5rem;
+}
+.footerform {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}
+.footerform > div {
+  display: flex;
+  flex-direction: column;
+  gap: .2rem;
+}
+.footerform label {
+  font-size: 0.8em;
+}
 
 /* Headings */
 
@@ -407,7 +375,9 @@ pre {
   height: fit-content;
 }
 code {
+  font-size: .8em;
   padding: 0.15em .5em;
+  font-family: var(--monofont);
 }
 pre > code {
   display: block;
@@ -473,7 +443,8 @@ p img {
   vertical-align: middle;
   transition: .15s;
 }
-p img:hover {
+p img:hover,
+p img:focus {
   transform: scale(1.3);
 }
 
@@ -566,7 +537,7 @@ dt:empty + dd {
 input, textarea {
   border: none;
   background-color: var(--bg00);
-  font-family: var(--bodyfont);
+  font-family: var(--monofont);
   margin: 0;
 }
 
@@ -591,13 +562,17 @@ textarea {
   border-bottom: .1rem solid var(--accent2);
 }
 
-input[type="submit"] {
+input[type="submit"], select {
   border: var(--stdaccentborder);
   height: min-content;
   background-color: var(--bg1);
+  font-family: var(--bodyfont);
 }
 
-input[type="submit"]:hover {
+input[type="submit"]:hover,
+input[type="submit"]:focus,
+select:hover,
+select:focus {
   border-color: var(--accent2);
   color: var(--accent2);
   background-color: var(--bg2);
@@ -714,13 +689,15 @@ hr {
 .prefers-contrast-less-message {
   display: none;
 }
-summary:hover {
+summary:hover,
+summary:focus {
   cursor: pointer;
 }
 [title] {
   text-decoration: underline;
 }
-[title]:hover {
+[title]:hover,
+[title]:focus {
   cursor: help;
 }
 .webrings {
@@ -814,7 +791,8 @@ p.ada, p.hannah, p.spider, p.astrid {
   transition: .2s;
   box-sizing: border-box;
 }
-.cd:hover {
+.cd:hover,
+.cd:focus {
   transform: scale(1.1);
   box-shadow: 0 0 8rem #0007;
 }
@@ -827,7 +805,8 @@ p.ada, p.hannah, p.spider, p.astrid {
   animation-timing-function: linear;
   width: 100%;
 }
-.cd:hover img {
+.cd:hover img,
+.cd:focus img {
   animation-duration: 300ms;
 }
 section:nth-child(2n+1) .cd {
@@ -1261,7 +1240,8 @@ time.entrydate, .entrydate time {
     filter: drop-shadow(.1rem 0 0 var(--fg0))
             drop-shadow(0 -.1rem 0 var(--fg0));
   }
-  a:hover {
+  a:hover,
+  a:focus {
     background-color: AccentColor;
   }
   :is(dt, dd):nth-of-type(2n) {
-- 
cgit v1.2.3