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

1 files changed, 53 insertions, 54 deletions

diff --git a/index.php b/index.php
index e20695b..8d3ea2a 100644
--- a/index.php
+++ b/index.php
@@ -7,7 +7,6 @@ error_reporting(E_ALL); ?-->
   <head>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/boilerplate.php'); ?>
     <title><?php echo($_SERVER['HTTP_HOST']);?></title>
-    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
     <style>
 
       #bucketfish, .bflink {
@@ -103,7 +102,7 @@ error_reporting(E_ALL); ?-->
         <div class="aside">
           <a style='top: -24px; left: -32px; position: relative; height: 0; display: block; width: fit-content;' target="_blank" href="https://kelpeater.neocities.org/collections/isopods"><img alt="An isopod!" src="images/casiopea_isopod.png" height="64"></a>
           <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>Hi! <a href="me/">My</a> name's Ada. I'm an isopod on the internet, and as far as you know I could be one in real life too.</p>
@@ -197,71 +196,71 @@ error_reporting(E_ALL); ?-->
           <details>
             <summary>Show buttons</summary>
             <div class="buttons">
-              <a target="_blank" href="https://easyussr.neocities.org/torrenting.html"><img src="images/buttons/piracy.gif" alt="Piracy Now!"></a>
-              <a target="_blank" href="https://www.videolan.org/"><img src="images/buttons/getvlcnow.png" alt="get VLC now!"></a>
-              <a target="_blank" href="https://isopod.zone/"><img src="images/buttons/neo-fedi.gif" alt="Join the Fediverse!"></a>
-              <a target="_blank" href="https://www.youtube.com/watch?v=nleepK7P978"><img src="images/buttons/35mm.gif" alt="Best heard through a 3.5mm jack"></a>
-              <a target="_blank" href="https://frame.work"><img src="images/buttons/bestviewed.gif" alt="Best viewed with a computer"></a>
-              <img src="images/buttons/tested_on_firefox.gif" alt="Tested on Firefox">
-              <img src="images/buttons/wget.gif" alt="I surf with wget. And you?">
-              <img src="images/buttons/svg.svg" alt="Scalable Vector Graphics Now!" style="width:88px; height:31px;" />
-              <a target="_blank" href="http://web3.14159.annwfn.net/"><img src="images/buttons/web-pi.png" alt="Web Pi Certified"></a>
-              <a target="_blank" href="https://neocities.org"><img src="images/buttons/neocities_stamp.gif" alt="Neocities: The web is yours"></a>
-              <!--a href="https://status.cafe/"><img src="/blog/media/banner-statuscafe.png" alt="Status Cafe"></a-->
-              <a target="_blank" href="http://www.ermel.org/handcoded/"><img src="images/buttons/handcode.png" alt="100% hand coded HTML"></a>
-              <a target="_blank" href="https://12ft.io/"><img src="images/buttons/dontyouhate.gif" alt="Don't you hate it when you're reading a page and then some-- This content is for subscribers only! Paywalls Gatekeep Knowledge."></a>
-              <img src="images/buttons/righttorepair.png" alt="I support right to repair">
-              <img src="images/buttons/google_stand.gif" alt="Stand up to Google! Fight for open web standards! Fight for online privacy! Fight against monopolistic practices!">
-              <a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/"><img src="images/buttons/chrome.gif" alt="Google Chrome is evil!"></a>
-              <img src="images/buttons/i_hate_microsoft.png" alt="I hate Microsoft">
-              <img src="images/buttons/win11no.gif" alt="Windows 11 No!">
-              <img src="images/buttons/antinft.gif" alt="This is an Anti-NFT site">
-              <a target="_blank" href="https://yesterweb.org/no-to-web3/"><img src="images/buttons/notoweb3.gif" alt="Keep the web free, say no to web3"></a>
-              <a target="_blank" href="https://www.qobuz.com/"><img src="images/buttons/spotify.gif" alt="Spotify: When you love music but HATE artists"></a>
-              <img src="images/buttons/fuckyouistillusecds.png" alt="Fuck you, I still use CDs!">
-              <img src="images/buttons/amd_powered.gif" alt="Powered by AMD">
-              <img src="images/buttons/linux_powered.gif" alt="Linux powered">
-              <img src="images/buttons/drpepper.gif" alt="Powered by Dr Pepper">
-              <img src="images/buttons/the_void.gif" alt="Powered by the void">
-              <img src="images/buttons/miku-approved.gif" alt="This site is Miku approved">
-              <img src="images/buttons/krisbtn.png" alt="Kris where tf are we">
-              <a target="_blank" href="https://neofoxfloofexplo.de/"><img src="images/buttons/floof_explode_88x31.gif" alt=":neofox_floof_explode:"></a>
-              <img src="images/buttons/badhtml.png" alt="W3C Bad HTML Markup">
-              <img src="images/buttons/bantimetravel.png" alt="Ban Time Travel &quot;Now&quot;">
-              <img src="images/buttons/css.png" alt="CSS is awesome">
-              <img src="images/buttons/tyg.gif" alt="Trans your gender">
-              <!--a target="_blank" href="https://we-are-jammin.xyz/"><img src="https://damcraft.de/88x31/jammin.webp" alt="We're jammin!"></a-->
-              <iframe src="//incr.easrng.net/badge?key=isopoddotcool" style="background: url(//incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe>
-              <a target="_blank" href="https://crouton.net/"><img src="images/buttons/usatoday.gif" alt="USA Today Hot Site"></a>
-              <a target="_blank" href="https://seaslug.neocities.org/"><img src="images/buttons/shrimp.png" alt="Shrimp Now!"></a>
-              <a target="_blank" href="https://citrons.xyz/a/memetic-apioform-page.html"><img src="images/buttons/apiopage88x31.png" alt="memetic apiopage - click to view"></a>
-              <a target="_blank" href="https://beeps.website/blog/2024-09-12-in-memory-of-cohost/"><img src="images/buttons/i_was_on_cohost.gif" alt="I was on Cohost"></a>
-              <img src="images/buttons/canadian.gif" title="Regrettably..." alt="Canadian on the web">
-              <img src="images/buttons/queercoded.png" alt="You're telling me a queer coded this">
-              <img src="images/buttons/she-her.gif" alt="she/her" title="Its pronouns are she/her">
-              <img src="images/buttons/aro.png" alt="Aromantic pride flag">
+              <a target="_blank" href="https://easyussr.neocities.org/torrenting.html"><img loading="lazy" src="images/buttons/piracy.gif" alt="Piracy Now!"></a>
+              <a target="_blank" href="https://www.videolan.org/"><img loading="lazy" src="images/buttons/getvlcnow.png" alt="get VLC now!"></a>
+              <a target="_blank" href="https://isopod.zone/"><img loading="lazy" src="images/buttons/neo-fedi.gif" alt="Join the Fediverse!"></a>
+              <a target="_blank" href="https://www.youtube.com/watch?v=nleepK7P978"><img loading="lazy" src="images/buttons/35mm.gif" alt="Best heard through a 3.5mm jack"></a>
+              <a target="_blank" href="https://frame.work"><img loading="lazy" src="images/buttons/bestviewed.gif" alt="Best viewed with a computer"></a>
+              <img loading="lazy" src="images/buttons/tested_on_firefox.gif" alt="Tested on Firefox">
+              <img loading="lazy" src="images/buttons/wget.gif" alt="I surf with wget. And you?">
+              <img loading="lazy" src="images/buttons/svg.svg" alt="Scalable Vector Graphics Now!" style="width:88px; height:31px;" />
+              <a target="_blank" href="http://web3.14159.annwfn.net/"><img loading="lazy" src="images/buttons/web-pi.png" alt="Web Pi Certified"></a>
+              <a target="_blank" href="https://neocities.org"><img loading="lazy" src="images/buttons/neocities_stamp.gif" alt="Neocities: The web is yours"></a>
+              <!--a href="https://status.cafe/"><img loading="lazy" src="/blog/media/banner-statuscafe.png" alt="Status Cafe"></a-->
+              <a target="_blank" href="http://www.ermel.org/handcoded/"><img loading="lazy" src="images/buttons/handcode.png" alt="100% hand coded HTML"></a>
+              <a target="_blank" href="https://12ft.io/"><img loading="lazy" src="images/buttons/dontyouhate.gif" alt="Don't you hate it when you're reading a page and then some-- This content is for subscribers only! Paywalls Gatekeep Knowledge."></a>
+              <img loading="lazy" src="images/buttons/righttorepair.png" alt="I support right to repair">
+              <img loading="lazy" src="images/buttons/google_stand.gif" alt="Stand up to Google! Fight for open web standards! Fight for online privacy! Fight against monopolistic practices!">
+              <a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/"><img loading="lazy" src="images/buttons/chrome.gif" alt="Google Chrome is evil!"></a>
+              <img loading="lazy" src="images/buttons/i_hate_microsoft.png" alt="I hate Microsoft">
+              <img loading="lazy" src="images/buttons/win11no.gif" alt="Windows 11 No!">
+              <img loading="lazy" src="images/buttons/antinft.gif" alt="This is an Anti-NFT site">
+              <a target="_blank" href="https://yesterweb.org/no-to-web3/"><img loading="lazy" src="images/buttons/notoweb3.gif" alt="Keep the web free, say no to web3"></a>
+              <a target="_blank" href="https://www.qobuz.com/"><img loading="lazy" src="images/buttons/spotify.gif" alt="Spotify: When you love music but HATE artists"></a>
+              <img loading="lazy" src="images/buttons/fuckyouistillusecds.png" alt="Fuck you, I still use CDs!">
+              <img loading="lazy" src="images/buttons/amd_powered.gif" alt="Powered by AMD">
+              <img loading="lazy" src="images/buttons/linux_powered.gif" alt="Linux powered">
+              <img loading="lazy" src="images/buttons/drpepper.gif" alt="Powered by Dr Pepper">
+              <img loading="lazy" src="images/buttons/the_void.gif" alt="Powered by the void">
+              <img loading="lazy" src="images/buttons/miku-approved.gif" alt="This site is Miku approved">
+              <img loading="lazy" src="images/buttons/krisbtn.png" alt="Kris where tf are we">
+              <a target="_blank" href="https://neofoxfloofexplo.de/"><img loading="lazy" src="images/buttons/floof_explode_88x31.gif" alt=":neofox_floof_explode:"></a>
+              <img loading="lazy" src="images/buttons/badhtml.png" alt="W3C Bad HTML Markup">
+              <img loading="lazy" src="images/buttons/bantimetravel.png" alt="Ban Time Travel &quot;Now&quot;">
+              <img loading="lazy" src="images/buttons/css.png" alt="CSS is awesome">
+              <img loading="lazy" src="images/buttons/tyg.gif" alt="Trans your gender">
+              <!--a target="_blank" href="https://we-are-jammin.xyz/"><img loading="lazy" src="https://damcraft.de/88x31/jammin.webp" alt="We're jammin!"></a-->
+              <iframe src="//incr.easrng.net/badge?key=isopoddotcool" style="background: url(//incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0" loading="lazy"></iframe>
+              <a target="_blank" href="https://crouton.net/"><img loading="lazy" src="images/buttons/usatoday.gif" alt="USA Today Hot Site"></a>
+              <a target="_blank" href="https://seaslug.neocities.org/"><img loading="lazy" src="images/buttons/shrimp.png" alt="Shrimp Now!"></a>
+              <a target="_blank" href="https://citrons.xyz/a/memetic-apioform-page.html"><img loading="lazy" src="images/buttons/apiopage88x31.png" alt="memetic apiopage - click to view"></a>
+              <a target="_blank" href="https://beeps.website/blog/2024-09-12-in-memory-of-cohost/"><img loading="lazy" src="images/buttons/i_was_on_cohost.gif" alt="I was on Cohost"></a>
+              <img loading="lazy" src="images/buttons/canadian.gif" title="Regrettably..." alt="Canadian on the web">
+              <img loading="lazy" src="images/buttons/queercoded.png" alt="You're telling me a queer coded this">
+              <img loading="lazy" src="images/buttons/she-her.gif" alt="she/her" title="Its pronouns are she/her">
+              <img loading="lazy" src="images/buttons/aro.png" alt="Aromantic pride flag">
               <!--img src="images/buttons/ace.png"-->
-              <a href="https://rainy.gay/pride/pridebuttons.html"><img src="images/buttons/trans.png" alt="Trans pride flag"></a>
-              <iframe src="https://bugwo.men/stuff/beat/frame.php?theme=digital" style="width: 88px; height: 31px; border: none;" title="Current time in .beats"></iframe>
+              <a href="https://rainy.gay/pride/pridebuttons.html"><img loading="lazy" src="images/buttons/trans.png" alt="Trans pride flag"></a>
+              <iframe src="https://bugwo.men/stuff/beat/frame.php?theme=digital" style="width: 88px; height: 31px; border: none;" title="Current time in .beats" loading="lazy"></iframe>
             </div>
           </details>
         </section>
         <section>
           <h3>"Sponsored" "Content"</h3>
-          <iframe title="Johnvertisement" src="https://john.citrons.xyz/embed?ref=https://bugwo.men/" id="johnvertisement"></iframe>
-          <iframe title="Mothvertisement" src="https://mothvertising.moth.monster/embed" id="mothvertisement"></iframe>
+          <iframe title="Johnvertisement" loading="lazy" src="https://john.citrons.xyz/embed?ref=https://bugwo.men/" id="johnvertisement"></iframe>
+          <iframe title="Mothvertisement" loading="lazy" src="https://mothvertising.moth.monster/embed" id="mothvertisement"></iframe>
         </section>
         <div id="guys">
           
-          <a target="_blank" href="https://lu.tiny-universes.net" title="hi, i'm kevin!"><img alt="Kevin" src="images/plant1-2.png"></a>
-          <a target="_blank" href="https://www.pixelcatsend.com/profile&amp;id=3734" title="Shadow"><img alt="Shadow" src="images/shadow.png" style="image-rendering: pixelated;"></a>
+          <a target="_blank" href="https://lu.tiny-universes.net" title="hi, i'm kevin!"><img loading="lazy" alt="Kevin" src="images/plant1-2.webp"></a>
+          <a target="_blank" href="https://www.pixelcatsend.com/profile&amp;id=3734" title="Shadow"><img loading="lazy" alt="Shadow" src="images/shadow.webp" style="image-rendering: pixelated;"></a>
           
-          <a target="_blank" href="https://shroom.ink/decay/adopt-a-shroom/" title="Ophiocordyceps Unilateralis"><img alt="Ophiocordyceps Unilateralis" src="images/Ophiocordyceps_unilateralis.png" style="height: 4rem;"></a>
+          <a target="_blank" href="https://shroom.ink/decay/adopt-a-shroom/" title="Ophiocordyceps Unilateralis"><img loading="lazy" alt="Ophiocordyceps Unilateralis" src="images/Ophiocordyceps_unilateralis.webp" style="height: 4rem;"></a>
         </div>
 
           
-          <a target="_blank" href="https://newlambda.neocities.org/stuff/adopt" title="benlet has caught a whiff of a stray frenched fry, and is intrigued."><img alt="benlet" src="images/benlet1.png" style="width: 32px; image-rendering: pixelated; position: fixed; bottom: 0; right: 40vw;"></a>
-          <a target="_blank" href="https://tarraxahum.neocities.org/adopt/adopt_center" title="Oops, I appear to have dropped a french fry. Don't bother picking it up &mdash; the roaches can have it."><img alt="french fry" src="images/fry.png" style="height: 2rem; position: fixed; bottom: -6px;"></a>
+          <a target="_blank" href="https://newlambda.neocities.org/stuff/adopt" title="benlet has caught a whiff of a stray frenched fry, and is intrigued."><img loading="lazy" alt="benlet" src="images/benlet1.webp" style="width: 32px; image-rendering: pixelated; position: fixed; bottom: 0; right: 40vw;"></a>
+          <a target="_blank" href="https://tarraxahum.neocities.org/adopt/adopt_center" title="Oops, I appear to have dropped a french fry. Don't bother picking it up &mdash; the roaches can have it."><img loading="lazy" alt="french fry" src="images/fry.webp" style="height: 2rem; position: fixed; bottom: -6px;"></a>
       </section>
 
     </main>