From ac3cb106346492dd6e8e705ba7c239505dcf9b16 Mon Sep 17 00:00:00 2001
From: reidlab <reidlab325@gmail.com>
Date: Fri, 7 Mar 2025 00:44:25 -0800
Subject: [PATCH] make css fruity

---
 src/components/Background.astro | 45 +++++++++++++++++++++++++++++++++
 src/components/Badges.astro     | 18 ++++++++++---
 src/layouts/Layout.astro        | 29 +++++++++------------
 src/pages/about.astro           | 13 +++++++++-
 src/pages/index.astro           |  2 +-
 src/styles/main.css             | 15 +++++++++--
 6 files changed, 98 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Background.astro

diff --git a/src/components/Background.astro b/src/components/Background.astro
new file mode 100644
index 0000000..2426e45
--- /dev/null
+++ b/src/components/Background.astro
@@ -0,0 +1,45 @@
+<div class="background" aria-hidden="true">
+    <div class="layer1"></div>
+    <div class="layer2"></div>
+</div>
+<style>
+    .layer1 {
+        background: var(--gradient);
+        background-attachment: fixed;
+    }
+
+    .layer2 {
+        background: conic-gradient(from 90deg at 1px 1px, transparent 90deg, var(--foreground) 0) center / 3em 3em;
+        background-attachment: fixed;
+        background-position: 0 0;
+        animation: scroll 10s linear infinite;
+    }
+
+    .background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .background > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    @keyframes scroll {
+        to {
+            background-position: 6em 3em;
+        }
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+        .layer2 {
+            animation: none;
+        }
+    }
+</style>
diff --git a/src/components/Badges.astro b/src/components/Badges.astro
index 1b993db..aaa0202 100644
--- a/src/components/Badges.astro
+++ b/src/components/Badges.astro
@@ -11,15 +11,15 @@ const badges = await getCollection("badges");
         // ugh.
         // i wish we could dedupe this, but im not sure how
         return <>
-            {hasHref ? <a href={badge.data.href} target="_blank" rel="noreferrer noopener">
+            {hasHref ? <a class="badge" href={badge.data.href} target="_blank" rel="noreferrer noopener">
                 {typeof badge.data.path !== "string"
                     ? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                     : <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                 }
             </a> : <>
                 {typeof badge.data.path !== "string"
-                    ? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
-                    : <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    ? <img class="badge" src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    : <img class="badge" src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                 }
             </>}
         </>;
@@ -41,4 +41,16 @@ const badges = await getCollection("badges");
             height: 31px;
         }
     }
+
+    .badge {
+        transition:
+            transform 0.15s,
+            box-shadow 0.15s,
+            background 0.15s;
+    }
+    .badge:hover {
+        transform: scale(1.5);
+        box-shadow: 0 0 0.2em var(--foreground);
+        background: var(--foreground);
+    }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4d9d89f..009d262 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,6 +9,7 @@ const { title, description } = Astro.props;
 import { ClientRouter } from "astro:transitions";
 import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro";
 
+import Background from "../components/Background.astro";
 import Sidebar from "../components/Sidebar.astro";
 
 import "modern-normalize";
@@ -37,17 +38,16 @@ import "../styles/main.css";
         <ReplacementSwap />
     </head>
     <body>
+        <Background />
         <Sidebar />
-        <!-- container is here b/c view transitions + background = bad -->
-        <div class="container">
-            <main
-                data-vtbot-replace="main"
-                transition:name="main"
-                transition:animate="initial"
-            >
-                <slot />
-            </main>
-        </div>
+
+        <main
+            data-vtbot-replace="main"
+            transition:name="main"
+            transition:animate="initial"
+        >
+            <slot />
+        </main>
     </body>
 </html>
 <style is:global>
@@ -67,14 +67,9 @@ import "../styles/main.css";
         }
     }
 
-    .container {
-        background:
-            conic-gradient(from 90deg at 1px 1px, transparent 90deg, var(--foreground) 0) center / 3em 3em,
-            var(--gradient);
-        background-attachment: fixed;
-    }
-
     main {
+        /* needed due to background being fixed */
+        position: relative;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
diff --git a/src/pages/about.astro b/src/pages/about.astro
index a967d40..41a68e0 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -26,7 +26,18 @@ import fursonaImage from "../images/fursona.png";
         max-width: 30%;
     }
     .fursona img {
-        animation: 2s infinite ease-in-out alternate sway;
+        animation:
+            popin 2s cubic-bezier(0.22, 1, 0.33, 1),
+            sway 2s ease-in-out infinite alternate 2s;
+    }
+
+    @keyframes popin {
+        from {
+            transform: scale(0) rotate(-1deg);
+        }
+        to {
+            transform: scale(1) rotate(1deg);
+        }
     }
 
     @keyframes sway {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index db71f72..51d5367 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,7 +8,7 @@ import Badges from "../components/Badges.astro";
 <Layout title="landing">
     <Card title="hello">
         <p>hi! i'm <strong>reid</strong> <i>(any pronouns)</i>, welcome to my site</p>
-        <p>this site was made as a dumping grounds for whatever i decide to put on here eventually, more coming soon, i promise!! the whole thing as a whole is still a work in progress and i want to make it really feel like it is MY site in terms of styling <i>(we are failing at the moment)</i></p>
+        <p>this site was made as a dumping grounds for whatever i decide to put on here eventually, more coming soon, i promise!! the whole thing as a whole is still a work in progress</p>
         <p>feel free to look around, and if you have any questions, feel free to ask me on my socials or contact me directly</p>
     </Card>
     <Card title="buttons">
diff --git a/src/styles/main.css b/src/styles/main.css
index 7b1a417..542d668 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -74,10 +74,15 @@ a {
     text-decoration: underline;
     cursor: pointer;
     color: var(--accent);
-    transition: color .1s;
+    transition:
+        color .15s,
+        text-shadow .15s;
 }
 a:hover {
-    color: color-mix(in oklab, var(--accent), #ffffff 40%);
+    --hover-color: color-mix(in oklab, var(--accent), #ffffff 40%);
+
+    color: var(--hover-color);
+    text-shadow: 0 0 0.2em var(--hover-color);
 }
 
 figure {
@@ -113,3 +118,9 @@ summary::before {
 details[open] summary::before {
     transform: rotate(90deg);
 }
+
+@media screen and (prefers-reduced-motion: reduce) {
+    a {
+        transition: none;
+    }
+}