finally fix flatworm friday

3 files changed, 124 insertions, 46 deletions

diff --git a/guestbook/comments.php b/guestbook/comments.php
index 432c1d2..b0acbae 100644
--- a/guestbook/comments.php
+++ b/guestbook/comments.php
@@ -36,7 +36,7 @@ function echo_comments($page, $Parsedown = null) {
         $output = $output."<div style='grid-area:gb-cool;' class='gb-cool'><b>cool thing</b>: <a href='$cool'>$coolsanitized</a></div>";
       }
       if($found) {
-        $output = $output."<div style='grid-area:gb-found;'><b>How did you find me?</b><br>$found</div>";
+        $output = $output."<div style='grid-area:gb-found;'  class='gb-found'><b>How did you find me?</b><br>$found</div>";
       }
       $output = $output."<div style='grid-area:gb-message;'>$message</div>";
       if($reply) {
diff --git a/index.php b/index.php
index d7add18..251524a 100644
--- a/index.php
+++ b/index.php
@@ -16,13 +16,24 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        gap: var(--stdpadding);
       }
-      main > :is(div, nav) {
-        width: 100%;
+      #mainmidsection {
+        display: flex;
+        gap: var(--stdpadding);
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+      }
+      #abt, #statuscafe, figure.quote {
+        height: fit-content;
+        margin-bottom: initial;
       }
 
-      #webrings > div {
-        margin: var(--stdpadding);
+      #webrings {
+        display: flex;
+        flex-direction: column;
+        gap: var(--stdpadding);
       }
       #webrings div :is(a, span) {
         padding: initial;
@@ -116,12 +127,21 @@
       }
       @media only screen and (hover: none) {
         #rightsidebg {
-          box-shadow: none;
+          filter: brightness(0.7);
         }
         main {
           justify-content: initial;
           height: initial;
         }
+        main > *, #mainmidsection > * {
+          box-sizing: border-box;
+          width: 100%;
+        }
+        #guys {
+          background-color: var(--bgcolor);
+          box-shadow: 0 0 1rem var(--stdshadow) inset;
+          padding: var(--stdpadding);
+        }
         #guys, #ads, #ads:hover {
           position: initial;
           bottom: initial;
@@ -164,6 +184,43 @@
   <?php include('nav.php'); bg(true, 11, "Pictured: The eponymous Deep Twisty"); ?>
     <main>
       <img src="images/landing.png" alt="Isopod on her skinkpad (thinkpad but with added skink)" title="The Lenovo SkinkPad P15w is powered by a highly efficient, passively-cooled RISC-V processor and features an IP69 water resistance rating for reliable amphibious operation at virtually unlimited depths, making it the perfect laptop for the deep-sea crustacean in your life."/>
+      
+      <div id="mainmidsection">
+        <blockquote id="abt">
+          &gt; Hannah<br>
+          &gt; <a href="/about/pronouns">she/it</a><br><br>
+          &gt; real life isopod<br>
+          &gt; chronic computer toucher
+        </blockquote>
+        <nav id="webrings">
+          <div style="font-family: sans-serif; font-weight: bold;">
+            <a href="https://hotlinewebring.club/bathynomus/previous" style="color: white; text-decoration: none;">←</a>
+            <a href="https://hotlinewebring.club/" style="color: white; text-decoration: none; font-style: italic;">HOTLINE WEBRING</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" 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" style="color: #ff74ff;"><span style="color: #864cff;">?</span></a>
+          </div>
+          <div>
+            <a href="https://webring.bucketfish.me/redirect.html?to=prev&name=isopod" class="bflink">⥼</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" class="bflink">⥽</a>
+          </div>
+          <div>
+            <a href="https://fediring.net/previous?host=isopod.cool">←</a>
+            <a href="https://fediring.net/">fediring</a>
+            <a href="https://fediring.net/random">?</a>
+            <a href="https://fediring.net/next?host=isopod.cool">→</a>
+          </div>
+          <div>
+            <a href="https://baccyflap.com/noai/?prv&s=ipd">←</a>
+            <a href="https://baccyflap.com/noai">no AI webring</a>
+            <a href="https://baccyflap.com/noai/?rnd">?</a>
+            <a href="https://baccyflap.com/noai/?nxt&s=ipd">→</a>
+          </div>
+        </nav>
+      </div>
       <?php
         $username = "niceopod"; // Your username here!
         $ch = curl_init("https://status.cafe/users/$username/status.json");
@@ -184,46 +241,10 @@
         if(strlen($status_content) < 1) {
           $status_content = "Something's gone wrong server side...";
         }
-        echo "<figure class='quote'><blockquote id='statuscafe'><div id='statuscafe-username'><a href='https://status.cafe/users/$username' target='_blank'>status</a> $face $timeago</div><div id='statuscafe-content'>$status_content</div></blockquote></figure>";
+        echo "<blockquote id='statuscafe'><div id='statuscafe-username'><a href='https://status.cafe/users/$username' target='_blank'>status</a> $face $timeago</div><div id='statuscafe-content'>$status_content</div></blockquote>";
       ?>
-      <nav id="webrings">
-        <div style="font-family: sans-serif; font-weight: bold;">
-          <a href="https://hotlinewebring.club/bathynomus/previous" style="color: white; text-decoration: none;">←</a>
-          <a href="https://hotlinewebring.club/" style="color: white; text-decoration: none; font-style: italic;">HOTLINE WEBRING</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" 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" style="color: #ff74ff;"><span style="color: #864cff;">?</span></a>
-        </div>
-        <div>
-          <a href="https://webring.bucketfish.me/redirect.html?to=prev&name=isopod" class="bflink">⥼</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" class="bflink">⥽</a>
-        </div>
-        <div>
-          <a href="https://fediring.net/previous?host=isopod.cool">←</a>
-          <a href="https://fediring.net/">fediring</a>
-          <a href="https://fediring.net/random">?</a>
-          <a href="https://fediring.net/next?host=isopod.cool">→</a>
-        </div>
-        <div>
-          <a href="https://baccyflap.com/noai/?prv&s=ipd">←</a>
-          <a href="https://baccyflap.com/noai">no AI webring</a>
-          <a href="https://baccyflap.com/noai/?rnd">?</a>
-          <a href="https://baccyflap.com/noai/?nxt&s=ipd">→</a>
-        </div>
-      </nav>
       <!--script type="text/javascript">document.write('<a href="desktop.html">$login<span class="blinking" >_</span></a>');</script-->
     </main>
-    
-    <div id="ads">
-      <blockquote style="margin-bottom: 0; width: 100%; max-width: 680px;">
-        Unpaid advertising below! My apolo<?php if(rand(0,100) > 90) { echo "cheese"; } else { echo "gies"; } ?>, but it's how we keep the lights on here at IsopodCoolGGMBH PBLLC.
-      </blockquote>
-      <iframe src="https://john.citrons.xyz/embed?ref=https://isopod.cool/" id="johnvertisement"></iframe>
-      <iframe src="https://mothvertising.moth.monster/embed" id="mothvertisement"></iframe>
-    </div>
 
     <div id="guys">
       <a target="_blank" href="https://dokodemo.neocities.org/" title="made by Dokodemo"><img alt="An isopod!" src="images/isopod3.png"></a>
@@ -234,12 +255,64 @@
       <a target="_blank" href="https://kelpeater.neocities.org/collections/isopods" title="Another isopod!"><img alt="Another isopod!" src="images/casiopea_isopod.png" style="height: 4rem;"></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>
     </div>
+    
+    <div id="ads">
+      <blockquote style="margin-bottom: 0; width: 100%; max-width: 728px; box-sizing: border-box;">
+        Unpaid advertising below! My apolo<?php if(rand(0,100) > 90) { echo "cheese"; } else { echo "gies"; } ?>, but it's how we keep the lights on here at IsopodCoolGGMBH PBLLC.
+      </blockquote>
+      <iframe src="https://john.citrons.xyz/embed?ref=https://isopod.cool/" id="johnvertisement"></iframe>
+      <iframe src="https://mothvertising.moth.monster/embed" id="mothvertisement"></iframe>
+    </div>
+    
     <div id="bubblecolumn"></div>
     <?php
-      if(date("w") == "5" && rand(0, 9) == 4) {
+      if(date("w") == "5") {
         $ind = rand(1,2);
         $filename = "images/flatworm friday $ind.mp4";
-        echo "<div id='flatwormfriday' style='position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: #000000cc;display: flex;justify-content: center;align-items: center;'><video controls=''><source src='$filename' type='video/mp4'>It's Flatworm Friday! Your browser does not support the video tag.</video><span style='position: absolute; left: 1rem; bottom: 1rem;'>Refresh the page to close this</span></div>";
+        echo "
+          <input type='checkbox' id='fwf' style='display: none;'>
+          <style>
+          #flatwormfriday {
+            right: var(--stdpadding);
+            bottom: var(--stdpadding);
+            position: fixed;
+            background: #0004;
+            backdrop-filter: blur(var(--stdpadding));
+            padding: var(--stdpadding);
+            border: var(--stdaccentborder);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            gap: var(--stdpadding);
+            left: initial;
+            top: initial;
+          }
+          #flatwormfriday label {
+            cursor: pointer;
+          }
+          #fwf:checked ~ #flatwormfriday {
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            cursor: initial;
+          }
+          .fwfshowonclick {
+            display: none;
+          }
+          #fwf:checked ~ * .fwfshowonclick {
+            display: initial;
+          }
+          </style>
+          <div id='flatwormfriday'>
+            <label for='fwf' class='rainbowtext'>It's Flatworm Friday!</label>
+            <video controls='' class='fwfshowonclick' style='margin: 0;'>
+              <source src='$filename' type='video/mp4'>
+              It's Flatworm Friday! Your browser does not support the video tag.
+            </video>
+            <label for='fwf' class='fwfshowonclick'>[close]</label>
+          </div>";
       }
     ?>
     <script src="wimpod.js"></script>
diff --git a/style.css b/style.css
index bfadaa5..25a001f 100644
--- a/style.css
+++ b/style.css
@@ -39,6 +39,7 @@
   --navbarheight: calc(var(--stdpadding) * 4.5);
   --h1-image: url('images/isopod.php');
   --shadowsize: 3rem;
+  --blockbackdrop: blur(1.5px);
 }
 html, body {
   height: 100%;
@@ -129,6 +130,7 @@ nav a, body > a {
 nav a:hover, body > a:hover {
   --bgpos: 100%;
   border-left: var(--stdaccentborder);
+  backdrop-filter: var(--blockbackdrop);
 }
 body > a {
   display: block;
@@ -237,6 +239,7 @@ figure.quote, blockquote {
   border-left: var(--stdaccentborder);
   background-color: var(--blockbg);
   margin-bottom: var(--stdpadding);
+  backdrop-filter: var(--blockbackdrop);
 }
 figure.quote blockquote {
   padding: initial;
@@ -411,6 +414,7 @@ hr {
   nav a, body > a {
     border-left: 3px solid var(--fontcolor);
     background-color: var(--blockbg);
+    backdrop-filter: var(--blockbackdrop);
   }
   nav a, body > a, nav span {
     padding: calc(var(--stdpadding) / 2) calc(var(--stdpadding) / 4 * 3);
@@ -433,7 +437,8 @@ hr {
   }
   #leftsidebg, #rightsidebg {
     top: 0; left: 0; right: 0; bottom: 0;
-    box-shadow: 100vw 0 0 #000000bb inset;
+    filter: brightness(0.3);
+    box-shadow: none;
   }
   tr:hover {
     background-color: initial;