THE BIG ONE

Total website redesign.
Multiple new blog posts.
Routine updates on several pages.
Too much to list, even if I remembered it all.
Remind me not to put this git repo on any portfolios.

1 files changed, 93 insertions, 32 deletions

diff --git a/stuff/webgarden/index.php b/stuff/webgarden/index.php
index 0f1d2d4..0f79686 100644
--- a/stuff/webgarden/index.php
+++ b/stuff/webgarden/index.php
@@ -56,6 +56,7 @@
   <head>
     <meta charset="utf-8">
     <title>Pot</title>
+
     <link href="style.css" rel="stylesheet" type="text/css" media="all">
     <style type="text/css">
       :root {
@@ -66,53 +67,79 @@
         padding: 0;
         margin: 0;
       }
-      h1 {
-        width: 224px;
-        position: absolute;
-        top: var(--top-header-gap);
-        left: 6px;
+      body > a {
+        text-decoration: none;
+      }
+      body > a:hover {
+        color: var(--fg0);
+      }
+      #plant {
+        background: url('images/webgarden-bg.png');
+        background-size: cover;
+      }
+      .header {
+        background-color: var(--bg0);
+        border-bottom: .33rem solid var(--accent1);
+        width: 100%;
+        padding: 8px 0;
+      }
+      .header h2 {
         font-family: b612_mono, monospace;
-        border-left: 3px solid gainsboro;
+        font-size: 2em;
         padding-left: 6px;
+        text-decoration: none;
+        margin: 0;
+
+        border-bottom: .2rem solid;
+        width: fit-content;
+
+        --hbcolor: var(--fg0);
+        border-image: linear-gradient(to right, var(--hbcolor) 50%, transparent 50%) 100% 1;
       }
-      h2 {
+      .h2caption {
         width: 212px;
-        position: absolute;
-        top: calc(45px + var(--top-header-gap));
-        left: 6px;
-        font-size: 1.1em;
-        font-family: b612_mono, monospace;
-        border-left: 3px solid gainsboro;
         padding-left: 6px;
+        font-family: b612_mono, monospace;
+        font-style: italic;
+        text-decoration: none;
+        margin: 0;
       }
       #mainmenu {
-        background: #222222;
+        background: var(--bg0);
         transition-duration: 0.6s;
         height: 250px;
         width: var(--menuwidth);
         position: absolute;
         top: 0;
-        left: 224px;
+        left: calc(250px - 1rem);
         z-index: 2;
-        box-shadow: 0 0 0 black;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 0 8px black;
+        box-shadow: 0 0 0 black;
+        border-left: 1rem solid var(--accent1);
       }
       body:hover #mainmenu {
-        left: calc(250px - var(--menuwidth));
-        box-shadow: 0 0 20px black;
+        left: calc(250px - var(--menuwidth) - 1rem);
+        box-shadow: 0 0 40px black;
       }
       a {
-        color: white;
+        color: var(--fg0);
       }
       #mainmenu a {
-        color: #df1955;
+        color: var(--linkcolor);
       }
       #mainmenu a:hover {
-        color: #00ffd5;
+        color: var(--linkhover);
+      }
+      hr {
+        width: 100%;
+        border-bottom: none;
+        border-left: none;
+        border-right: none;
+        color: var(--stdaccentborder);
+        border-top-color: var(--stdaccentborder);
       }
 
       .flipped {
@@ -169,30 +196,64 @@
       #mus:checked ~ audio {
         display: initial;
       }
+
+      @media screen and (prefers-color-scheme: light) {
+      #plant {
+        background-image:
+          url('images/webgarden-bg-light.png');
+        }
+      }
+
+      .meee {
+        width: 70px;
+        position: absolute;
+        top: 172px;
+        left: 142px;
+        --hannahbg: light-dark(#2228, #ddd4);
+        background:
+          linear-gradient(135deg, transparent 1rem, var(--hannahbg) 0) top left;
+
+        padding-right: 3rem;
+        padding-top: 8px;
+        padding-left: 8px;
+      }
     </style>
   </head>
   <body>
-    <a target="_blank" href="../../">
-      <div id="plant" style="background: url('images/webgarden-bg.png'); background-size: cover;">
-        <h1>isopod.cool</h1>
-        <h2><?php echo $cap; ?></h2>
-        <img src="../../images/autoisopod_small.png" style="width: 70px; position: absolute; transform: scaleX(-1) rotate(-30deg); top: 188px; left: 144px;" />
-        <img src="images/bubblecolumn1.gif" style="height: 250px; position: absolute; left: 20px; top: 0;" />
+    <a target="_blank" href="/">
+      <div id="plant">
+        <div class="header">
+          <h2>isopod.cool</h2>
+          <p class="h2caption"><?php echo $cap; ?></p>
+        </div>
+        <div class="meee">
+          <img <?php
+          
+          if(rand(1, 1000) == 500) {
+            echo('src="images/collectmypages.png"');
+          } else {
+            echo('src="images/yay.png"');
+          }
+          
+          ?> style="max-width: 100%; height: auto;" />
+        </div>
+
+        <img class="bubblecolumn" src="images/bubblecolumn1.gif" style="height: 250px; position: absolute; left: 20px; top: 0;" />
         <span id="hoverme">&lt;</span>
       </div>
     </a>
     <input type="checkbox" id="mus" name="mus" style="display: none;"></input>
     <div id="mainmenu">
-      <a target="_blank" href="../../">homepage</a>
+      <a target="_blank" href="/">homepage</a>
       <!--a target="_blank" href="../../desktop.html">$login<span class="blinking">_</span></a-->
-      <hr style="width: 30px;">
+      <hr>
       <a href="image1.html">images</a>
       <a href="status.php">status</a>
       <label for="mus"><a style="text-decoration: underline; cursor: pointer;">song</a></label>
-      <hr style="width: 30px;">
+      <hr>
       <iframe src="https://isopod.cool/stuff/beat/frame.php?theme=pixel" style="width: 84px; height: 27px;"></iframe>
       <img src="/etc/buttons/isopodhours.png" alt="isopod hours"/>
-      <img src="/etc/buttons/trans.png" alt="nonbinary"/>
+      <img src="/etc/buttons/trans.png" alt="transgender"/>
     </div>
     <audio controls style="position: absolute; width: calc(100% - 0.4rem); top: 0.2rem; left: 0.2rem; z-index: 5;"><source src="music.mp3" type="audio/mp3"></audio>
   </body>