Dithered backgrounds

- Downscaled & dithered background images for
  enhanced Aesthetic and bandwidth savings of in
  some cases two orders of magnitude
- webgarden update
- various other minor changes

4 files changed, 21 insertions, 14 deletions

diff --git a/stuff/bg_dither.png b/stuff/bg_dither.png
new file mode 100644
index 0000000..070f692
--- /dev/null
+++ b/stuff/bg_dither.png
diff --git a/stuff/webgarden/images/webgarden-bg.png b/stuff/webgarden/images/webgarden-bg.png
index f6052e8..3e34cba 100644
--- a/stuff/webgarden/images/webgarden-bg.png
+++ b/stuff/webgarden/images/webgarden-bg.png
diff --git a/stuff/webgarden/index.php b/stuff/webgarden/index.php
index af88805..0f1d2d4 100644
--- a/stuff/webgarden/index.php
+++ b/stuff/webgarden/index.php
@@ -59,7 +59,7 @@
     <link href="style.css" rel="stylesheet" type="text/css" media="all">
     <style type="text/css">
       :root {
-        --top-header-gap: 90px;
+        --top-header-gap: 64px;
         --menuwidth: 140px;
       }
       html, body {
@@ -67,17 +67,23 @@
         margin: 0;
       }
       h1 {
-        width: 250px;
+        width: 224px;
         position: absolute;
         top: var(--top-header-gap);
-        text-align: center;
+        left: 6px;
+        font-family: b612_mono, monospace;
+        border-left: 3px solid gainsboro;
+        padding-left: 6px;
       }
       h2 {
-        width: 238px;
+        width: 212px;
         position: absolute;
-        top: calc(34px + var(--top-header-gap));
-        text-align: right;
+        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;
       }
       #mainmenu {
         background: #222222;
@@ -86,13 +92,14 @@
         width: var(--menuwidth);
         position: absolute;
         top: 0;
-        left: 250px;
+        left: 224px;
         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;
       }
       body:hover #mainmenu {
         left: calc(250px - var(--menuwidth));
@@ -153,8 +160,8 @@
         91%{color: rgb(255,0,127); text-shadow: 0 0 4px rgb(211, 0, 105);}
       }
       @keyframes arrowwiggle {
-        0%,90%,100% {left: 235px;}
-        92% {left: 231px;}
+        0%,90%,100% { transform: translateX(0); }
+        92% {transform: translateX(-4px);}
       }
       audio {
         display: none;
@@ -166,12 +173,12 @@
   </head>
   <body>
     <a target="_blank" href="../../">
-      <div id="plant" style="background: url('images/webgarden-bg.png');">
+      <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: 170px;" />
+        <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;" />
-        <span id="hoverme">&lt;<span>
+        <span id="hoverme">&lt;</span>
       </div>
     </a>
     <input type="checkbox" id="mus" name="mus" style="display: none;"></input>
@@ -181,7 +188,7 @@
       <hr style="width: 30px;">
       <a href="image1.html">images</a>
       <a href="status.php">status</a>
-      <label for="mus"><a style="text-decoration: underline; cursor: pointer;">play music</a></label>
+      <label for="mus"><a style="text-decoration: underline; cursor: pointer;">song</a></label>
       <hr style="width: 30px;">
       <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"/>
diff --git a/stuff/webgarden/style.css b/stuff/webgarden/style.css
index 13c5320..0599032 100644
--- a/stuff/webgarden/style.css
+++ b/stuff/webgarden/style.css
@@ -45,7 +45,7 @@ a#forward, a#back, h1, h2, #hoverme {
 #hoverme {
   position: absolute;
   top: 4px;
-  left: 235px; 
+  left: 209px; 
   animation-name: arrowwiggle;
   animation-duration: 6s;
   animation-iteration-count: infinite;