Overhaul /stuff/ + webring styling

I've overhauled /stuff/ to be in line with the rest of the site and
moved some of the things on it to places I consider to be more
appropriate. I've also made some more minor styling changes, as well as
giving each webring on the landing page its own custom CSS flair.

chromealert.php

@@ -16,6 +16,6 @@ if($_GET['donotsee'] === 'yes') {
   die();
 } else if (preg_match('/(chrome|opera|edge|brave)/i', $_SERVER['HTTP_USER_AGENT']) && !preg_match('/(headlesschrome)/i', $_SERVER['HTTP_USER_AGENT']) && $_COOKIE['niceopodNoChromiumWarning'] !== "true") {
   $ogpg = $_SERVER['REQUEST_URI'];
-  echo "<style type='text/css'>#cacb { margin-right: 0.7rem; padding: 0; border: none; background: none; font-size: 0; display: flex; justify-content: center; align-items: center; } #cacb:hover { cursor: pointer; } #chromealert { display: none; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); background-color: #ffcccc; box-shadow: 3px 3px 3px black; padding: .7rem; border-radius: .7rem; text-shadow: none; color: black; } #cadc:checked + #chromealert { display: flex; } #cadc { display: none; } #chromealert a { color: #df1955; } </style> <input type='checkbox' name='cadc' id='cadc' checked> <div id='chromealert'> <label for='cadc' id='cacb'><svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 24 24' width='24' fill='currentColor'><path d='M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z'></path></svg></label> <div>It seems you're using a browser based on Google Chrome. Chrome itself is effectively spyware, but even if you're using <a href='https://en.wikipedia.org/wiki/List_of_web_browsers#Blink-based'>something else</a> Google still controls the engine and there are <a href='https://www.cnet.com/tech/computing/chrome-banishes-jpeg-xl-photo-format-that-could-save-phone-space/'>various</a> <a href='https://arstechnica.com/gadgets/2022/01/google-drops-floc-after-widespread-opposition-pivots-to-topics-api-plan/'>compelling</a> <a href='https://www.theverge.com/2022/6/10/23131029/mozilla-ad-blocking-firefox-google-chrome-privacy-manifest-v3-web-request'>reasons</a> to avoid that. I recommend switching to <a href='https://www.mozilla.org/en-US/firefox/new/'>Firefox</a>.<br><a href='https://isopod.cool/chromealert.php?donotsee=yes&originalpage=$ogpg'>Do not see this again (sets a cookie)</a></div> </div>";
+  echo "<style type='text/css'>#cacb { margin-right: 0.7rem; padding: 0; border: none; background: none; font-size: 0; display: flex; justify-content: center; align-items: center; } #cacb:hover { cursor: pointer; } #chromealert { width: min(40rem, 90vw); z-index: 100000; display: none; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); background-color: #ffcccc; box-shadow: 3px 3px 3px black; padding: .7rem; border-radius: .7rem; text-shadow: none; color: black; } #cadc:checked + #chromealert { display: flex; } #cadc { display: none; } #chromealert a { color: #df1955; } </style> <input type='checkbox' name='cadc' id='cadc' checked> <div id='chromealert'> <label for='cadc' id='cacb'><svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 24 24' width='24' fill='currentColor'><path d='M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z'></path></svg></label> <div>It seems you're using a browser based on Google Chrome. Chrome itself is effectively spyware, but even if you're using <a href='https://en.wikipedia.org/wiki/List_of_web_browsers#Blink-based'>something else</a> Google still controls the engine and there are <a href='https://www.cnet.com/tech/computing/chrome-banishes-jpeg-xl-photo-format-that-could-save-phone-space/'>various</a> <a href='https://arstechnica.com/gadgets/2022/01/google-drops-floc-after-widespread-opposition-pivots-to-topics-api-plan/'>compelling</a> <a href='https://www.theverge.com/2022/6/10/23131029/mozilla-ad-blocking-firefox-google-chrome-privacy-manifest-v3-web-request'>reasons</a> to avoid that. I recommend switching to <a href='https://www.mozilla.org/en-US/firefox/new/'>Firefox</a>.<br><a href='https://isopod.cool/chromealert.php?donotsee=yes&originalpage=$ogpg'>Do not see this again (sets a cookie)</a></div> </div>";
 }
 ?>

etc/index.php

@@ -25,6 +25,9 @@
   <nav><a href="quotes/">quotes</a><a href="https://rss-bridge.isopod.cool/?action=display&bridge=GiteaBridge&context=Commits&branch=main&host=https%3A%2F%2Fgit.isopod.cool&user=will&project=isopod.cool&format=Atom">changelog (atom)</a><!--a href="changelog.php">changelog (legacy)</a--></nav>
   <iframe src="https://john.citrons.xyz/embed?ref=https://isopod.cool/"
     style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;max-height:94px;height:fit-content;border:none;"></iframe>
+  <h2>Time warp</h2>
+  <p><a href="../old/1/">v1</a> - Old, slow, basically just a carrd page on steroids. Made heavy use of <code>float</code> initially. Ugh.</p>
+  <p><a href="../old/2/">v2</a> - Slick as hell but entirely Javascript-dependent. This is where my webpage became a website.</p>
   <h2>Buttons</h2>
   <div class="buttons">
     <a target="_blank" href="https://easyussr.neocities.org/torrenting.html"><img src="buttons/piracy.gif" alt="Piracy Now!"></a>
@@ -74,14 +77,11 @@
     <li>Add a changelog to this page by parsing the atom feed</li>
     <li>Make a cool 404 page</li> <!-- Line Item -->
     <li>Add my CD collection to the music page</li>
-    <li>[In progress] Optimize this thing for mobile displays</li>
     <li>Make a page for games I like</li>
-    <li>Update the navigation on the landing page to a vertical layout</li>
     <li>Write another blog post</li>
     <li>Update privacy policy</li>
   </ul>
-  <div id="leftsidebg" style="background-image: url(bg.png); --distancefromcenter: -10%;"
+  <div id="leftsidebg" style="background-image: url(bg.png); --distancefromcenter: -10%;"></div>
-    title="Pictured: A millipede, because I couldn't think of anything better to put here and I like them."></div>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
 </body>
 

index.php

@@ -47,10 +47,55 @@
         margin: 0 1rem;
         white-space: nowrap;
       }
+
+      #bucketfish, .bflink {
+        --red: #ffcaca;
+        --orange: #ffedc1;
+        --yellow: #feffb8;
+        --green: #c4ffcb;
+        --blue: #add8ff;
+        --purple: #ccafe9;
+        --darkgreen: #3E885B;
+        --darkblue: #7fb4f5;
+        --background: #454545;
+        --rainbowright: linear-gradient(to right, var(--red) 0%, var(--orange) 20%, var(--yellow) 40%, var(--green) 60%, var(--blue) 80%,  var(--purple) 100%);
+
+        color: var(--purple);
+        display: inline-block;
+        position: relative;
+        text-decoration: none;
+        transition: linear .2s;
+      }
+      #bucketfish:before, .bflink:before {
+        background: var(--rainbowright);
+        content: '';
+        height: 2px;
+        position: absolute;
+        bottom: -1.5px;
+        width: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: width 0.2s ease-in-out;
+      }
+      .bflink:hover {
+        color: var(--purple);
+      }
+      #bucketfish:hover:before, .bflink:hover:before {
+        width: 0;
+      }
+      #bucketfish span {
+        animation-delay: var(--n);
+        animation: wave 1.5s linear var(--n) infinite forwards running, rainbow 3s linear var(--n) infinite forwards running;
+        position: relative;
+      }
+
       @media (prefers-reduced-motion) {
         #bubblecolumn {
           display: none;
         }
+        #bucketfish span {
+          animation: none;
+        }
       }
       @media only screen and (hover: none) {
         #rightsidebg {
@@ -68,6 +113,24 @@
           }
         }
       }
+
+      @keyframes wave{
+        0%    {top: 0px;}
+        25%   {top: -1px;}
+        50%   {top: 0px;}
+        75%  {top: 1px;}
+        100% {top: 0px;}
+      }
+
+      @keyframes rainbow{
+        0% {color: var(--red);}
+        17% {color: var(--orange);}
+        33% {color: var(--yellow);}
+        50% {color: var(--green);}
+        67% {color: var(--blue);}
+        83% {color: var(--purple);}
+        100% {color: var(--red);}
+      }
     </style>
     <?php
       include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php');
@@ -229,19 +292,19 @@
         <h2 id="caption"><?php echo $cap; ?></h2>
         <nav id="webrings">
           <!--div><a href="https://webring.yesterweb.org/noJS/index.php?d=prev&url=https://isopod.cool/">&lt;</a><a href="https://yesterweb.org/webring/">yester webring</a><a href="https://webring.yesterweb.org/noJS/index.php?d=rand&url=https://isopod.cool/">?</a><a href="https://webring.yesterweb.org/noJS/index.php?d=next&https://isopod.cool/">&gt;</a></div-->
-          <div>
+          <div style="font-family: sans-serif; font-weight: bold;">
-            <a href="https://hotlinewebring.club/bathynomus/previous">&lt;</a>
+            <a href="https://hotlinewebring.club/bathynomus/previous" style="color: white; text-decoration: none;">←</a>
-            <i><a href="https://hotlinewebring.club/">hotline webring</a></i>
+            <i><a href="https://hotlinewebring.club/" style="color: white; text-decoration: none;">HOTLINE WEBRING</a></i>
-            <a href="https://hotlinewebring.club/bathynomus/next">&gt;</a>
+            <a href="https://hotlinewebring.club/bathynomus/next" style="color: white; text-decoration: none;">→</a>
           </div>
           <div>
-            <a href="https://melonland.net/surf-club.html">melonring</a>
+            <a href="https://melonland.net/surf-club.html" style="color: #ff74ff;"><span style="color: #e7ad59;">melon</span><span style="color: #c0ea32;">ring</span></a>
-            <a href="https://brain.melonking.net/surf-club-random">?</a>
+            <a href="https://brain.melonking.net/surf-club-random" style="color: #ff74ff;"><span style="color: #864cff;">?</span></a>
           </div>
           <div>
-            <a href="https://webring.bucketfish.me/redirect.html?to=prev&name=isopod">⥼</a>
+            <a href="https://webring.bucketfish.me/redirect.html?to=prev&name=isopod" class="bflink">⥼</a>
-            <a href="https://webring.bucketfish.me">bucket webring</a>
+            <a href="https://webring.bucketfish.me" id="bucketfish"><span style="--n:-10000ms;">b</span><span style="--n:-9900ms;">u</span><span style="--n:-9800ms;">c</span><span style="--n:-9700ms;">k</span><span style="--n:-9600ms;">e</span><span style="--n:-9500ms;">t</span><span style="--n:-9400ms;"> </span><span style="--n:-9300ms;">w</span><span style="--n:-9200ms;">e</span><span style="--n:-9100ms;">b</span><span style="--n:-9000ms;">r</span><span style="--n:-8900ms;">i</span><span style="--n:-8800ms;">n</span><span style="--n:-8700ms;">g</span></a>
-            <a href="https://webring.bucketfish.me/redirect.html?to=next&name=isopod">⥽</a>
+            <a href="https://webring.bucketfish.me/redirect.html?to=next&name=isopod" class="bflink">⥽</a>
           </div>
         </nav>
       </div>

links/index.php

@@ -83,6 +83,25 @@
           <td><a href="https://deeptwisty.itch.io/" rel="me">deeptwisty.itch.io</a></td>
           <td>My itch.io page</td>
         </tr>
+        <tr>
+          <td colspan="2"><h2>Services</h2></td>
+        </tr>
+        <tr>
+          <td><a href="https://social.isopod.cool/" rel="me">social.isopod.cool</a></td>
+          <td>My personal fediverse instance. Open for registrations, if I know you.</td>
+        </tr>
+        <tr>
+          <td><a href="https://search.isopod.cool/" rel="me">search.isopod.cool</a></td>
+          <td>My personal SearXNG instance. Feel free to use it.</td>
+        </tr>
+        <tr>
+          <td><a href="https://rss-bridge.isopod.cool/" rel="me">rss-bridge.isopod.cool</a></td>
+          <td>An rss-bridge instance. Feel free to use this too.</td>
+        </tr>
+        <tr>
+          <td><a href="https://git.isopod.cool/" rel="me">git.isopod.cool</a></td>
+          <td>A Forgejo instance with the source code to this website.</td>
+        </tr>
         <tr>
           <td colspan="2">
             <h2>Others</h2>

stuff/index.php

@@ -4,124 +4,56 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Items</title>
-    <style type="text/css">
+    <link href="../style.css" rel="stylesheet" type="text/css" media="all">
-        @font-face {
+    <style>
-            font-family: 'Ubuntu Mono';
-            src: url('fonts/UbuntuMono-Regular.ttf');
-        }
-        :root {
-            --stdfont: 'Ubuntu Mono', monospace;
-        }
-        body {
-            background: url('bg.png') #222222;
-            font-family: var(--stdfont);
-            color: white;
-            width: 85rem;
-            max-width: 100vw;
-            margin: auto;
-        }
-        h1 {
-            padding-left: 20px;
-            text-shadow: 2px 2px 4px black;
-        }
         td {
-            padding-right: 20px;
+            padding: .5rem;
-            padding-top: 5px;
-            padding-bottom: 5px;
         }
-        tr:hover {
+        td:last-child: {
-            background-color: #ffffff10;
+            padding-left: .4rem;
         }
-        table {
+        .indent-1 td:first-child {
-            background-color: #24241f;
+            border-left: 3px solid white;
-            box-shadow: 0 0 6px black inset;
-            margin: 20px;
-            padding: 15px 0 20px 20px;
-            border-radius: 10px;
         }
-        a {
+        .indent-1 td {
-            color: #00ffd5;
+            padding-left: 2rem;
         }
-        a:visited {
+        @media only screen and (hover: none) {
-            color: darkcyan;
+            .indent-1 td {
-        }
+                border-left: 3px solid white;
-        tr.indent-1 td:first-child {
+            }
-            padding-left: 10px;
+            td:first-child {
-            border-left: 2px solid #df1955;
+                font-weight: bold;
-        }
+            }
-        tr.indent-1 td:first-child::before {
-            content: '↳ ';
-        }
-        tr.indent-1 td:nth-child(2) {
-            padding-left: 2ch;
-        }
-        nav {
-            padding-top: 1rem;
-            padding-left: .45rem;
-        }
-        nav a, nav span {
-            margin-left: 1rem;
         }
     </style>
   </head>
   <body>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); ?>
-    <h1>Services</h1>
+    <h1>stuff</h1>
+    <h2 id="caption">things too!</h2>
     <table>
         <tr>
-            <td><a href="https://social.isopod.cool/">social.isopod.cool</a></td>
+          <td colspan="2"><h2>Utilities</h2></td>
-            <td>My personal Akkoma instance. Run by me, for me. Feel free to register for an account if we know each other, though.</td>
-        </tr>
-        <tr>
-            <td><a href="https://search.isopod.cool/">search.isopod.cool</a></td>
-            <td>An instance of SearXNG, a metasearch engine that aggregates results from several other search engines.</td>
-        </tr>
-        <tr>
-            <td><a href="https://rss-bridge.isopod.cool/">rss-bridge.isopod.cool</a></td>
-            <td>An rss-bridge instance. Generates RSS feeds for websites that don't have them.</td>
         </tr>
         <tr>
             <td><a href="rssfilter.php">rssfilter.php</a></td>
-            <td>A basic RSS feed filtering tool. Works on RSS and Atom feeds and can take both plain text and regex.</td>
+            <td>Basic RSS and Atom feed filtering utility. Accepts regex.</td>
         </tr>
         <tr>
-            <td><a href="firefoxrss/feed.php">firefoxrss/</a></td>
+            <td><a href="firefoxrss/feed.php">firefoxrss</a></td>
-            <td>An RSS bridge for Firefox release notes</td>
+            <td>RSS bridge for Firefox release notes.</td>
-        </tr>
-        <tr class="indent-1">
-            <td><a href="firefoxrss/feed.php?downloadsource=yes">feed.php</a></td>
-            <td>Download the source code</td>
         </tr>
         <tr>
-            <td><a href="https://git.isopod.cool/">git.isopod.cool</a></td>
+          <td colspan="2"><h2>Downloads</h2></td>
-            <td>My personal Forgejo instance. The source code for my websites is on there.</td>
-        </tr>
-    </table>
-    <h1>Items</h1>
-    <table>
-        <tr>
-            <td><a href="../">../</a></td>
-            <td>Go back</td>
         </tr>
         <tr>
-            <td nowrap><a href="EnchantedToolsPack_v1.zip">EnchantedToolsPack v1.zip</a></td>
+            <td nowrap><a href="EnchantedToolsPack_v1.zip">EnchantedToolsPack_v1.zip</a></td>
-            <td>A custom resource pack I made for Minecraft that uses the <a href="https://optifine.net/home">Optifine mod</a>'s custom texture functionality to add custom textures for enchanted tools and weapons. Works as of 1.19.</td>
+            <td>Custom resourcepack for Minecraft that uses functionality from <a href="https://optifine.net/home">Optifine</a> to add custom textures for enchanted tools and weapons. Confirmed working with 1.19.</td>
-        </tr>
-        <tr>
-            <td>../old/</td>
-            <td>Previous iterations of my website</td>
-        </tr>
-        <tr class="indent-1">
-            <td><a href="../old/1/">1</a></td>
-            <td>The final form of the first iteration. Little more than a glorified link directory.</td>
-        </tr>
-        <tr class="indent-1">
-            <td><a href="../old/2/">2</a></td>
-            <td>The final form of the second iteration. Scrapped mainly because it was too dependent on Javascript.</td>
         </tr>
         <tr>
             <td>webpkiller/</td>
-            <td>Various scripts I've written to intercept .webp images on opening and replace them with a superior format, because fuck webp. Use by setting them as the default program for opening .webp files. They'll make a copy of the image converted to .png, delete the original, and open the new one in your default program. Untested with animated webp files. These are all open source, so feel free to edit and redistribute.</td>
+            <td>Various scripts intended for use as the default program for opening .webp files. They automatically replace the .webp image with a .png one and open that instead. Incompatible with animated .webp images.</td>
         </tr>
         <tr class="indent-1">
             <td><a href="webpkiller/webpkiller.sh">webpkiller.sh</a></td>
@@ -129,29 +61,33 @@
         </tr>
         <tr class="indent-1">
             <td><a href="webpkiller/webpkiller.cmd">webpkiller.cmd</a></td>
-            <td>Batch script for Windows. Only works on .webp files. Requires <a href="https://imagemagick.org/">ImageMagick</a> to be installed. Replaces <i>every</i> instance of ".webp" in the filepath because I couldn't figure out how to do string manipulation properly in Windows batch language, so watch out for that.</td>
+            <td>Batch script for Windows. Only works on .webp files. Requires <a href="https://imagemagick.org/">ImageMagick</a>. Replaces <i>every</i> instance of ".webp" in the filepath because Windows batch language is hard.</td>
         </tr>
         <tr class="indent-1">
             <td><a href="webpkiller/webpkiller.py">webpkiller.py</a></td>
-            <td>Platform-agnostic Python script. Requires <a href="https://www.python.org/">Python 3</a> and the <a href="https://python-pillow.org/">pillow</a> library to be installed. Works on any image format supported by pillow.</td>
+            <td>Platform-agnostic Python script. Requires <a href="https://www.python.org/">Python 3</a> and the <a href="https://python-pillow.org/">pillow</a> library to be installed, supports anything they do.</td>
         </tr>
         <tr class="indent-1">
             <td><a href="webpkiller/webpkiller_win.zip">webpkiller_win.zip</a></td>
             <td>webpkiller.py, but compiled for Windows with <a href="https://pypi.org/project/pyinstaller/">pyinstaller</a>.</td>
         </tr>
+        <tr>
+            <td><a href="dirtomp3.sh">dirtomp3.sh</a></td>
+            <td>Bash script for Linux to copy my entire music library including album covers, using ffmpeg to convert all the audio to mp3s.</td>
+        </tr>
+        <tr>
+          <td colspan="2"><h2>Other</h2></td>
+        </tr>
         <tr>
             <td><a href="neon_boost_times.html">neon_boost_times.html</a></td>
             <td>A table of my level times in the game Neon Boost, in case you care.</td>
         </tr>
         <tr>
             <td><a href="https://userstyles.world/style/5238/status-cafe-latte">userstyles.world/style/5238<br/>/status-cafe-latte</a></td>
-            <td>Stylus theme I made for <a href="https://status.cafe/">status.cafe</a>, the site behind the little status widget on my blog.</td>
+            <td>Stylus theme I made for <a href="https://status.cafe/">status.cafe</a>, the site behind the little status widget on my blog, and the attached forum.</td>
-        </tr>
-        <tr>
-            <td><a href="dirtomp3.sh">dirtomp3.sh</a></td>
-            <td>Linux Bash script I wrote to recursively convert my entire music library to mp3s to reduce the amount of space it takes up on my phone. Copies the entire directory structure, keeping images, converting audio if needed, and discarding everything else. Requires ffmpeg.</td>
         </tr>
     </table>
+    <div id="rightsidebg" style="background-image: url(bg.png); --distancefromcenter: -15%;" title="Pictured: The level of code quality you're getting if you use this stuff"></div>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
   </body>
 </html>

style.css

@@ -1,6 +1,10 @@
 :root {
   --stdfont: mono, monospace;
   --bgcolor: #222222;
+  --fontcolor: gainsboro;
+  --linkcolor: #df1955;
+  --linkhover: #00ffd5;
+
   --bodywidth: min(90vw, 43rem);
   --stddropshadow: 4px 4px 8px black;
   --navbarheight: 2.5rem;
@@ -12,7 +16,7 @@ html, body {
 body {
   font-family: var(--stdfont);
   background-color: var(--bgcolor);
-  color: gainsboro;
+  color: var(--fontcolor);
   max-width: var(--bodywidth);
   margin: auto;
   padding-top: var(--navbarheight);
@@ -45,7 +49,7 @@ header {
   box-shadow: var(--shadowsize) 0 var(--shadowsize) calc(0rem - var(--shadowsize)) black inset;
 }
 h1 {
-  font-size: 4.4em;
+  font-size: 4.3em;
   margin: 0;
   padding: 0 3rem 3rem 3rem;
   background-image: url(images/isopod.php);
@@ -105,10 +109,10 @@ nav > * {
   padding: 0 .5em;
 }
 a {
-  color: #df1955;
+  color: var(--linkcolor);
 }
 a:hover {
-  color: #00ffd5;
+  color: var(--linkhover);
 }
 input#navtoggle {
   display: none;
@@ -316,7 +320,7 @@ blockquote .attr {
     right: 0;
     top: calc(-.2rem - (3rem * var(--rowcount)));
     z-index: 75;
-    background-color: #222222;
+    background-color: var(--bgcolor);
     transition-duration: .5s;
     box-shadow: none;
     height: fit-content;