From 6c08b4aa4c89521cadd3c29f4daafc7cbb7fd994 Mon Sep 17 00:00:00 2001
From: YouHaveTrouble <youhavetrouble@youhavetrouble.me>
Date: Sun, 6 Apr 2025 21:40:05 +0200
Subject: [PATCH] rework home page

---
 src/assets/img/tiny_yht.png  | Bin 0 -> 875 bytes
 src/components/Footer.astro  |   2 +-
 src/components/Header.astro  |   2 +-
 src/components/Logo.astro    |   2 +-
 src/components/Nav.astro     |   1 -
 src/layouts/BaseLayout.astro |   4 +-
 src/pages/index.astro        | 339 +++++++++++++++++++++++++++--------
 src/styles/global.css        |  33 +---
 8 files changed, 273 insertions(+), 110 deletions(-)
 create mode 100755 src/assets/img/tiny_yht.png

diff --git a/src/assets/img/tiny_yht.png b/src/assets/img/tiny_yht.png
new file mode 100755
index 0000000000000000000000000000000000000000..12505af924300e5b2f205f1f624e1bf7fdceabfc
GIT binary patch
literal 875
zcmeAS@N?(olHy`uVBq!ia0vp^OM!R`2OE(5y70{t1_ov$PZ!6K3dXkw6|?82GqgSY
zUEQI5JBL%mP5GM9iq4K3PBkemPZw-9G&M9$R$G>2dUdPnh7%{8I8s-4aP|aV4B%)9
z@o}5~xAmi2&H0-<*JmdkeUtl6C&K9X^X0<YDjum#A!>Muv?R6a+1A`?8}@HKxT*5*
zL*ZfzJNvma94DM&S?Pn9IJ0H@&dmvIzoVtkJp9`3-*YQ&|M^XpyZ0sXf$VN3WHHcL
z*LF1jUCZkh8*|sF{q5J^YbF7S9xIRuj#|P?jPMh}<r_fuU-);8ZL!|EJjt(54%$8|
zC@ej_LY@De;j2flrdiI3y>Fm}*Z1JCNxOCXPNYFbeRgx8c=-07s=5uQSA^^PU#KrG
zt3513j6Wg_&-0f_etq?nbMZX+H%70no)&hS3$(ob@#o8(j`;lnmW6rd{r<maR<!%a
z8@&4TVuGbj&9A1w>F(`4zdkN^cH8^^Phk=p5r$>oIXJyOPvYylx0;Lf`uQTwKt@!3
z|28F5h)|$9Y8e|&mf!a`@8E*>^6xi!{rmO1CGfp{{hSB_u>p2gw$8%!`+su%t!E{W
zbbtwK&Bhiv+qxqw%=7C~`OeS#duWCIzm%nf(i~9ZAMWJ`Q-1I-wY>_=L=2v;elF{r
G5}E+^hH?r3

literal 0
HcmV?d00001

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 72798bb..07d68b1 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -11,7 +11,7 @@
     color: var(--text-secondary);
     font-size: .8em;
     margin: 1em auto;
-    max-width: 1400px;
+    max-width: var(--wrap);
     padding: 1em 2em;
     text-align: center;
     width: 100%;
diff --git a/src/components/Header.astro b/src/components/Header.astro
index d457d19..19c0da9 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,7 +9,7 @@ const { current = '' } = Astro.props;
   header {
     display: flex;
     margin: 0 auto;
-    max-width: 1400px;
+    max-width: var(--wrap);
     padding: 1em;
     width: 100%;
   }
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
index be552b0..ec0a0c2 100644
--- a/src/components/Logo.astro
+++ b/src/components/Logo.astro
@@ -6,7 +6,7 @@ const { width, height } = Astro.props;
 ---
 
 <a href="/">
-  <Image src={logoImage} alt="Logo displaying a stylized character with brown hair wearing purple hoodie on a light blue circle background" width={width} height={height}/>
+  <Image src={logoImage} alt="Logo displaying a stylized character with brown hair wearing purple hoodie on a light blue circle background" width={width} height={height} loading="eager"/>
 </a>
 
 <style>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 5ebf323..759e21b 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -76,7 +76,6 @@ const { current = '' } = Astro.props;
 <nav>
   <div class="nav-buttons">
     <a data-astro-prefetch class={current === "" ? "selected" : ""} href='/'>home</a>
-    <a data-astro-prefetch class={current === "about" ? "selected" : ""} href='/about'>about</a>
     <a data-astro-prefetch class={current === "projects" ? "selected" : ""} href='/projects'>projects</a>
     <a data-astro-prefetch class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
   </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index be6cd50..00e143c 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -32,7 +32,7 @@ const { title, description, permalink, current } = Astro.props;
   .layout {
     display: flex;
     flex-direction: column;
-    min-height: 100%;
+    height: 100%;
     min-height: 100vh;
   }
 
@@ -40,7 +40,7 @@ const { title, description, permalink, current } = Astro.props;
     flex: 1;
     position: relative;
     margin: 0 auto;
-    max-width: 1400px;
+    max-width: var(--wrap);
     padding: 1em 2em;
     box-sizing: border-box;
     width: 100%;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 726f72f..93aea3c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,8 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import ViewCounter from "../components/ViewCounter.astro";
+import { Image } from 'astro:assets';
+import tinyYHT from '../assets/img/tiny_yht.png';
 
 const title = 'Home';
 const description = 'My little corner of the internet.';
@@ -10,18 +12,28 @@ const permalink = Astro?.site?.href ?? '/';
 <BaseLayout title={title} description={description} permalink={permalink}>
   <div class="home-container">
     <div class="home-copy">
-      <h1>Welcome to my little corner of the interwebs</h1>
-      <p>Feel free to check out what I got in store!</p>
+      <div>
+        <h1>Welcome to my little corner of the interwebs</h1>
+        <p>Feel free to check out what I got in store!</p>
+      </div>
+    </div>
+    <div style="width: 100%;">
       <div class="status">
-        <div class="wrap">
-          <span>My online status:</span>
-          <span id="online-status">Unknown</span><span id="online-game"></span>
+        <div class="world night">
+          <div class="tiny-yht">
+            <div class="dialog-box">
+              <span id="online-status" aria-label="Online status">Unknown</span><span id="online-game"></span>
+            </div>
+            <Image src={tinyYHT} width="30" height="30" loading="eager" alt="" aria-hidden="true" draggable="false"/>
+          </div>
+          <div class="ground"></div>
         </div>
-        <div class="wrap">
+        <div class="view-counter">
           <ViewCounter />
         </div>
       </div>
     </div>
+
     <div class="hero-socials">
       <h2>Socials</h2>
       <div class="hero-socials-grid">
@@ -67,51 +79,78 @@ const permalink = Astro?.site?.href ?? '/';
   </div>
 </BaseLayout>
 
-<script>
-  let task = -1;
-
-  updateOnlineStatus();
-
-  async function updateOnlineStatus() {
-    clearTimeout(task);
-    const status = document.querySelector("#online-status");
-    const game = document.querySelector("#online-game");
-    if (!status || !game) return;
-    console.debug("Updating online status...");
-    const response = await fetch("https://api.youhavetrouble.me/online");
-    const data = await response.json();
-    const online = data.discord !== "OFFLINE" || data.steam !== "OFFLINE";
-    const gameName = data.steam.game;
-    status.textContent = online ? "Online" : "Offline";
-    status.classList.value = online ? "online" : "offline";
-    game.textContent = gameName ? `, playing: ${gameName}` : "";
-    setTimeout(updateOnlineStatus, 5000);
-  }
-</script>
-
 <style lang="scss">
   .home-container {
     align-items: center;
     display: flex;
-    flex: 1;
+    flex-direction: column;
     justify-content: center;
     margin: 2em 0;
-    min-height: 400px;
 
     .home-copy {
       flex: 1;
+      display: flex;
+      flex-direction: row;
       padding: 0 1em;
 
       h1 {
         font-weight: 700;
         margin-bottom: 0.5em;
         line-height: 1.3;
+        font-size: 2rem;
+        text-align: center;
       }
 
       p {
-        font-size: 1.4em;
+        text-align: center;
+        font-size: 1.2rem;
       }
     }
+
+    .hero-socials {
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+      text-align: center;
+      gap: 1.5rem;
+
+      .hero-socials-grid {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        gap: 0.75rem;
+
+        a {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          width: 5.5rem;
+          height: 5.5rem;
+          text-decoration: none;
+          border-width: 1px;
+          border-style: solid;
+          border-color: rgba(255, 255, 255, 0);
+          padding: 0.5rem;
+          gap: 0.25rem;
+          border-radius: 0.25rem;
+          transition: border-color 0.2s, color 0.2s;
+
+          img {
+            width: 3rem;
+            height: 3rem;
+          }
+
+          &:hover {
+            color: var(--text-main);
+            border-color: var(--text-main);
+          }
+        }
+      }
+    }
+
   }
 
   #online-status {
@@ -137,53 +176,95 @@ const permalink = Astro?.site?.href ?? '/';
 
   }
 
-  .hero-socials {
+  .world {
+    position: relative;
+    width: 100%;
+    background-color: var(--sky-color);
+    padding: 1rem;
+    min-height: 10rem;
     display: flex;
-    flex-direction: column;
-    max-width: min(100%, 450px);
-    text-align: center;
-    gap: 1.5rem;
-
-    .hero-socials-grid {
-      margin: 0 1em;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
+    align-items: center;
+    justify-content: center;
+    --sky-color: #87CEEB;
+    --ground-color: #8B4513;
+    --grass-color: #4CAF50;
+    transition: background-color 1s linear;
+    border-radius: 0.5rem;
+    &.night {
+      --sky-color: #000000;
+      --ground-color: #3a1c08;
+      --grass-color: #214d23;
+    }
+    .ground {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 2.5rem;
       width: 100%;
-      gap: 0.75rem;
-
-      a {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        width: 5.5rem;
-        height: 5.5rem;
-        text-decoration: none;
-        border-width: 1px;
-        border-style: solid;
-        border-color: rgba(255, 255, 255, 0);
-        padding: 0.5rem;
-        gap: 0.25rem;
-        border-radius: 0.25rem;
-        transition: border-color 0.2s, color 0.2s;
-
-        &:hover {
-          color: var(--text-main);
-          border-color: var(--text-main);
-        }
+      background-color: var(--ground-color);
+      transition: background-color 1s linear;
+      border-radius: 0.5rem;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 1rem;
+        background-color: var(--grass-color);
+        transition: background-color 1s linear;
       }
     }
+    .tiny-yht {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: fit-content;
+      position: relative;
+      margin-top: 2.9rem;
+      transition: transform 3s linear;
+      .dialog-box {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        bottom: 120%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-0.2rem);
+        width: max-content;
+        max-width: 250px;
+        right: 0;
+        background-color: white;
+        color: black;
+        border: 1px solid black;
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+        animation: dialog-hover 1s ease-in-out infinite alternate;
+        &::before {
+          content: '';
+          position: absolute;
+          width: 0.8rem;
+          height: 0.8rem;
+          bottom: -0.45rem;
+          background-color: white;
+          border-bottom: 1px solid black;
+          border-right: 1px solid black;
+          transform: rotate(45deg);
+        }
+      }
+      img {
+        image-rendering: pixelated;
+      }
+    }
+
   }
 
-  html:not(.theme-dark) .hero-socials-grid a img {
-    filter: invert(0.8);
-  }
-
-  .hero-socials-grid a img {
-    width: 3rem;
-    height: 3rem;
+  .view-counter {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
   }
 
   @media (max-width: 1200px) {
@@ -203,4 +284,118 @@ const permalink = Astro?.site?.href ?? '/';
       text-align: center;
     }
   }
+
+  @media (min-width: 600px) {
+    .tiny-yht:not(.night) {
+      animation: wander 120s infinite;
+    }
+  }
+
+  @keyframes wander {
+    0% {
+      transform: translateX(0);
+    }
+    5% {
+      transform: translateX(0);
+    }
+    10% {
+      transform: translateX(200%);
+    }
+    15% {
+      transform: translateX(200%);
+    }
+    20% {
+      transform: translateX(140%);
+    }
+    25% {
+      transform: translateX(140%);
+    }
+    30% {
+      transform: translateX(100%);
+    }
+    35% {
+      transform: translateX(100%);
+    }
+    40% {
+      transform: translateX(50%);
+    }
+    45% {
+      transform: translateX(50%);
+    }
+    50% {
+      transform: translateX(0);
+    }
+    55% {
+      transform: translateX(0);
+    }
+    60% {
+      transform: translateX(-50%);
+    }
+    65% {
+      transform: translateX(-50%);
+    }
+    70% {
+      transform: translateX(-100%);
+    }
+    75% {
+      transform: translateX(-100%);
+    }
+    80% {
+      transform: translateX(140%);
+    }
+    85% {
+      transform: translateX(140%);
+    }
+    90% {
+      transform: translateX(-200%);
+    }
+    95% {
+      transform: translateX(-200%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+
+  }
+
+  @keyframes dialog-hover {
+    0% {
+      margin-bottom: 0;
+    }
+    100% {
+      margin-bottom: 0.1rem;
+    }
+  }
+
 </style>
+
+
+<script>
+  let task = -1;
+
+  updateOnlineStatus();
+
+  async function updateOnlineStatus() {
+    clearTimeout(task);
+    const status = document.querySelector("#online-status");
+    const game = document.querySelector("#online-game");
+    const world = document.querySelector(".world");
+    if (!status || !game) return;
+    console.debug("Updating online status...");
+    const response = await fetch("https://api.youhavetrouble.me/online");
+    const data = await response.json();
+    const online = data.discord !== "OFFLINE" || data.steam !== "OFFLINE";
+    const gameName = data.steam.game;
+    status.textContent = online ? "Online" : "Offline";
+    status.classList.value = online ? "online" : "offline";
+    game.textContent = gameName ? `Playing: ${gameName}` : "";
+    if (world) {
+      if (!online) {
+        world.classList.add("night");
+      } else {
+        world.classList.remove("night");
+      }
+    }
+    setTimeout(updateOnlineStatus, 5000);
+  }
+</script>
diff --git a/src/styles/global.css b/src/styles/global.css
index 5800c9f..3d791f3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,6 +5,7 @@
   --primary-color: #548e9b;
   --font-family-serif: Merriweather, serif;
   --font-family-sans: 'Fira Sans', sans-serif;
+  --wrap: 1400px;
 }
 
 @view-transition {
@@ -214,38 +215,6 @@ td {
   margin: 1em 0;
 }
 
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-  padding: 0.33em 0.67em;
-  padding-top: 8px;
-  margin-left: 10px;
-  gap: 0.6em;
-  border-radius: 99em;
-  background-color: var(--theme-code-inline-bg);
-}
-
-.theme-toggle > label:focus-within {
-  outline: 2px solid transparent;
-  box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-}
-
-.theme-toggle > label {
-  color: var(--theme-code-inline-text);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.5;
-  cursor: pointer;
-}
-
-.theme-toggle .checked {
-  color: var(--theme-accent);
-  opacity: 1;
-}
-
 input[name='theme-toggle'] {
   position: absolute;
   opacity: 0;