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.

6 files changed, 157 insertions, 50 deletions

diff --git a/stuff/webgarden/images/collectmypages.png b/stuff/webgarden/images/collectmypages.png
new file mode 100644
index 0000000..3a367ea
--- /dev/null
+++ b/stuff/webgarden/images/collectmypages.png
diff --git a/stuff/webgarden/images/webgarden-bg-light.png b/stuff/webgarden/images/webgarden-bg-light.png
new file mode 100644
index 0000000..caa6981
--- /dev/null
+++ b/stuff/webgarden/images/webgarden-bg-light.png
diff --git a/stuff/webgarden/images/yay.png b/stuff/webgarden/images/yay.png
new file mode 100644
index 0000000..fae981b
--- /dev/null
+++ b/stuff/webgarden/images/yay.png
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>
diff --git a/stuff/webgarden/status.php b/stuff/webgarden/status.php
index 4330d31..a8708f9 100644
--- a/stuff/webgarden/status.php
+++ b/stuff/webgarden/status.php
@@ -5,15 +5,6 @@
     <title>Status</title>
     <link href="style.css" rel="stylesheet" type="text/css" media="all">
     <style type="text/css">
-      body {
-        background: #222222;
-      }
-      #statuscafe a {
-        color: #df1955;
-      }
-      #statuscafe a:hover {
-        color: #00ffd5;
-      }
       #statuscafe {
         display: flex;
         flex-direction: column;
diff --git a/stuff/webgarden/style.css b/stuff/webgarden/style.css
index 0599032..bd37aec 100644
--- a/stuff/webgarden/style.css
+++ b/stuff/webgarden/style.css
@@ -22,33 +22,88 @@
   font-weight: bold;
   font-style: italic;
 }
+
+:root {
+  color-scheme: dark light;
+
+  /* Trying to define as few specific colours as possible as generically as possible */
+  --background: light-dark(#fff5eb, #1a1a1d);
+  --foreground: light-dark(#222, #ddd);
+  --accent1: light-dark(#64790a, #ff1159);
+  --accent2: light-dark(#007a70, #00ffd5);
+  --shadow: #000a;
+  --message-red: light-dark(#c00, red);
+  --message-green: light-dark(#007500, lime);
+  --message-yellow: light-dark(#d3b200, yellow);
+  --message-blue: light-dark(#005fbb, dodgerblue);
+
+  --linkcolor: var(--accent1);
+  --linkhover: var(--accent2);
+
+  --fg0: var(--foreground);
+  --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
+  --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
+  --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);
+
+  --bg0: var(--background);
+  --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
+  --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%);
+  --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
+  --bg00: light-dark(white, black);
+
+  --accentbordercolor: light-dark(var(--accent1), var(--fg0));
+}
+
 html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 body {
-  font-family: b612_mono, mono, monospace;
-  color: white;
-  background: #101010;
-  text-shadow: 1px 1px 4px black;
+  font-family: b612_mono, monospace;
+  color: var(--fg0);
+  background-color: var(--bg0);
 }
 #plant {
   height: 250px;
   width: 250px;
 }
-a#forward, a#back, h1, h2, #hoverme {
+a {
+  color: var(--linkcolor);
+}
+a:hover {
+  color: var(--linkhover);
+}
+a#forward, a#back, #hoverme {
   font-family: 'Silkscreen';
   color: white;
   text-decoration: none;
 }
+#hoverme, #statuscafe ~ #back {
+  color: var(--fg0);
+}
 #hoverme {
   position: absolute;
   top: 4px;
-  left: 209px; 
-  animation-name: arrowwiggle;
-  animation-duration: 6s;
-  animation-iteration-count: infinite;
+  left: 219px; 
   width: fit-content;
   text-align: right;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .bubblecolumn {
+    display: none;
+  }
 }
\ No newline at end of file