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

7 files changed, 17 insertions, 19 deletions

diff --git a/blog/index.php b/blog/index.php
index afc020b..faf0326 100644
--- a/blog/index.php
+++ b/blog/index.php
@@ -12,7 +12,6 @@ error_reporting(E_ALL);
     ?>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/boilerplate.php'); ?>
     <title><?php if(!$nostag) { echo("#$stag | ");} ?> isoblog | <?php echo($_SERVER['HTTP_HOST']);?></title>
-    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
   </head>
   <body>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/header.php'); ?>
diff --git a/blog/post.php b/blog/post.php
index ff7abf0..8a0f6c3 100644
--- a/blog/post.php
+++ b/blog/post.php
@@ -50,7 +50,6 @@ if($pdate != $udate) { $udates = " Updated&nbsp;on $udate"; }
 <html lang="en">
   <head>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/boilerplate.php'); ?>
-    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
     <?php
       echo("<title>$title | ".$_SERVER['HTTP_HOST']."</title><meta name='description' content='$descr'>");
       //$bgfile = glob('bg.*')[0];
diff --git a/blog/posts/100webmaster/index.md b/blog/posts/100webmaster/index.md
index 9d3380e..b597bac 100644
--- a/blog/posts/100webmaster/index.md
+++ b/blog/posts/100webmaster/index.md
@@ -64,7 +64,7 @@ This website is more PHP than HTML in some places.
 
 <div class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/yay.png" alt="hiiiiiii :3">
+    <img src="/images/reactions/ada/yay.webp" alt="hiiiiiii :3">
   </div>
   <div class="aside-content">
     <p>You're lookin' at her!</p>
diff --git a/blog/posts/building_a_cooler_body/index.md b/blog/posts/building_a_cooler_body/index.md
index 8341338..0f03b88 100644
--- a/blog/posts/building_a_cooler_body/index.md
+++ b/blog/posts/building_a_cooler_body/index.md
@@ -12,7 +12,7 @@ I'm gonna be intentionally vague about some more personal details, such as anyth
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/thumbsup.png" alt="me giving an enthusiastic thumbs up">
+    <img src="/images/reactions/ada/thumbsup.webp" alt="me giving an enthusiastic thumbs up">
   </div>
   <div class="aside-content">
     <p>I'll <span class="askme">highlight</span> any details that this especially applies to.</p>
@@ -21,7 +21,7 @@ I'm gonna be intentionally vague about some more personal details, such as anyth
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/looksaway.png" alt="me looking off to the side, nervous">
+    <img src="/images/reactions/ada/looksaway.webp" alt="me looking off to the side, nervous">
   </div>
   <div class="aside-content">
     <p>Hey, by the way, do you like this new feature I added with the little portraits and extra commentary? Is it good? Do you hate me? Am I ugly as fuck + smelly + gross? lmk in the comments. But only if you like it</p>
@@ -48,7 +48,7 @@ So that's what I want: Injection monotherapy. There's a couple different varieti
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/nerd.png" alt="me looking like some kinda fuckin nerd">
+    <img src="/images/reactions/ada/nerd.webp" alt="me looking like some kinda fuckin nerd">
   </div>
   <div class="aside-content">
     <p>If it's an option for you, estradiol enanthate is the ideal choice because it lasts a bit longer in the body and provides more stable levels, but it's really not a huge deal.</p>
@@ -75,7 +75,7 @@ So, I like to draft these project logs as they happen to get everything down whi
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/angy.png" alt="me, angry">
+    <img src="/images/reactions/ada/angy.webp" alt="me, angry">
   </div>
   <div class="aside-content">
     <p>HRT should be over the counter, change my mind.</p>
@@ -112,7 +112,7 @@ Unfortunately, this level of competence is pretty much par for the course for do
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/notamused.png" alt="me looking decidedly unamused">
+    <img src="/images/reactions/ada/notamused.webp" alt="me looking decidedly unamused">
   </div>
   <div class="aside-content">
     <p>It occurs to me that I called this woman "knowledgable" towards the beginning there. That is something that we in the business like to call a "relative term".</p>
@@ -133,7 +133,7 @@ On the way out, the nurse told me to leave the bandage on for at least 5 minutes
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/frozen.png" alt="me encased in a photorealistic ice cube">
+    <img src="/images/reactions/ada/frozen.webp" alt="me encased in a photorealistic ice cube">
   </div>
   <div class="aside-content">
     <p>Kids, get a jump pack if winter routinely gets below -20&deg;C where you're at, especially if your car's battery kinda sucks. Here's a <a href="https://www.youtube.com/watch?v=AXXuWL3l5qo">video</a> on some good ones if you're so inclined.</p>
@@ -172,7 +172,7 @@ Two days after the appointment, I got a call from the pharmacy saying my prescri
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/fear.png" alt="me, afraid">
+    <img src="/images/reactions/ada/fear.webp" alt="me, afraid">
   </div>
   <div class="aside-content">
     <p>Now all I have to do is... go to a pharmacy. In person. And interact face to face with a stranger who knows <em>exactly</em> what I'm up to. Oh god.</p>
@@ -187,7 +187,7 @@ Interestingly, the info sheet that came with the spiro said it was a "potassium-
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/yay.png" alt="me, joyful">
+    <img src="/images/reactions/ada/yay.webp" alt="me, joyful">
   </div>
   <div class="aside-content">
     <p><em>holy fuck I have estrogen now. holy shit. oh my god</em></p>
@@ -210,7 +210,7 @@ I got the injection supplies from Skipping Stone, and I have some thoughts. Firs
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/notamused.png" alt="me looking decidedly unamused">
+    <img src="/images/reactions/ada/notamused.webp" alt="me looking decidedly unamused">
   </div>
   <div class="aside-content">
     <p>Also worth noting is that when I ordered my second vial immediately after finishing the first, the pharmacy called me back to tell me they would only refill it every 28 days, so if you core a vial you may be SOL until whenever it would normally have run out.</p>
@@ -237,7 +237,7 @@ As for the spiro, well, it's a pill. You've probably taken a pill before. The pi
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/yay.png" alt="me, joyful">
+    <img src="/images/reactions/ada/yay.webp" alt="me, joyful">
   </div>
   <div class="aside-content">
     <p><strong><em>holy shit holy shit holy shit holy shit</em></strong></p>
@@ -405,7 +405,7 @@ For your convenience, I've included complete breakdowns of all the up-front cost
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/fear.png" alt="me, afraid">
+    <img src="/images/reactions/ada/fear.webp" alt="me, afraid">
   </div>
   <div class="aside-content">
     <p>Running the numbers on that "yearly" column really puts into perspective how expensive this can be.</p>
diff --git a/blog/posts/customcans_4pin_pinout/index.md b/blog/posts/customcans_4pin_pinout/index.md
index 95b0e02..9ee8fad 100644
--- a/blog/posts/customcans_4pin_pinout/index.md
+++ b/blog/posts/customcans_4pin_pinout/index.md
@@ -4,7 +4,7 @@ For context, I currently use a Beyerdynamic DT 770 Pro as my main set of headpho
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/notamused.png" alt="me looking decidedly unamused">
+    <img src="/images/reactions/ada/notamused.webp" alt="me looking decidedly unamused">
   </div>
   <div class="aside-content">
     <p>I'd be convinced the headphones they sell are just loss leaders for these crazy overpriced cables if that idea didn't fall apart under a modicum of scrutiny.</p>
diff --git a/blog/posts/discord2/index.md b/blog/posts/discord2/index.md
index 8b2f922..a9557ab 100644
--- a/blog/posts/discord2/index.md
+++ b/blog/posts/discord2/index.md
@@ -2,7 +2,7 @@ So [apparently](https://archive.is/PvpAx) Discord will soon force all of its use
 
 <aside class="aside">
   <div class="aside-image" style="width: 11rem; padding-left: calc(var(--stdpadding) / 2);">
-    <img src="/images/reactions/livid.png" alt="me absolutely fucking livid gripping the wall so hard it's breaking">
+    <img src="/images/reactions/ada/livid.webp" alt="me absolutely fucking livid gripping the wall so hard it's breaking">
   </div>
   <div class="aside-content">
     <p><em>I'm just saying. We wouldn't be here if you all had listened to me back in 2023. But this post isn't about that.</em></p>
@@ -164,7 +164,7 @@ And now for some options that suck and aren't really viable in my opinion, but t
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/sob.png" alt="me sobbing">
+    <img src="/images/reactions/ada/sob.webp" alt="me sobbing">
   </div>
   <div class="aside-content">
     <p>You had so much potential! Why did it have to turn out this way?</p>
diff --git a/blog/posts/fuckass_air_conditioner/index.md b/blog/posts/fuckass_air_conditioner/index.md
index 16857f1..1dbd7f0 100644
--- a/blog/posts/fuckass_air_conditioner/index.md
+++ b/blog/posts/fuckass_air_conditioner/index.md
@@ -4,7 +4,7 @@ One day last summer, I got so fed up with the heat in my room that I snapped and
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/notamused.png" alt="Ada looking decidedly unamused">
+    <img src="/images/reactions/ada/notamused.webp" alt="Ada looking decidedly unamused">
   </div>
   <div class="aside-content">
     <p>I would very much have preferred a window unit, but for some idiot reason the room I was in had a hinged window rather than a sliding one.</p>
@@ -22,7 +22,7 @@ After it puked its guts up again for the first time this year (mercifully onto v
 
 <aside class="aside">
   <div class="aside-image">
-    <img src="/images/reactions/fear.png" alt="me, afraid">
+    <img src="/images/reactions/ada/fear.webp" alt="me, afraid">
   </div>
   <div class="aside-content">
     <p>...</p>