colorful buttons

frontend/public/scripts/main.js

@@ -1,6 +1,11 @@
 const meowEndpoint = "https://nelle.observer/api/meow";
 const beepEndpoint = "https://nelle.observer/api/beep";
 const kaomojiEndpoint = "https://nelle.observer/api/kaomoji";
+
+const badgeGray = document.getElementById("badgeGray");
+const badgeGreen = document.getElementById("badgeGreen");
+const badgeOrange = document.getElementById("badgeOrange");
+
 var colorBool = Math.random() < 0.5;
 var is_root = location.pathname === "/";
 
@@ -30,10 +35,12 @@ function jsEnabled() {
   }
   // Get JS required element ids
   const sgaButton = document.getElementById("sgaButton");
+  const sgaButtonText = document.getElementById("sgaButtonText");
   const incrementButton = document.getElementById("incrementButton");
 
   // enable js required element ids
   sgaButton.style.display = "initial";
+  sgaButtonText.style.visibility = "initial";
   incrementButton.style.display = "initial";
 }
 
@@ -147,6 +154,10 @@ function checkThemeStorage() {
 }
 
 function setGreen() {
+  badgeGreen.style.display = "initial";
+  badgeOrange.style.display = "none";
+  badgeGray.style.display = "none";
+
   styleTag.innerHTML = `
 :root {
     --text: #e7eeea;
@@ -247,6 +258,10 @@ function setGreen() {
 }
 
 function setOrange() {
+  badgeOrange.style.display = "initial";
+  badgeGreen.style.display = "none";
+  badgeGray.style.display = "none";
+
   styleTag.innerHTML = `
 :root {
     --text: #f2ede7;

frontend/public/styles/css/colors/green.css

@@ -0,0 +1,93 @@
+:root {
+    --text: #e7eeea;
+    --background: #060d09;
+    --primary: #9ae2b9;
+    --secondary: #14904a;
+    --accent: #47e48a;
+
+    --content-gradient: linear-gradient(to bottom right, var(--secondary-800), var(--primary-900));
+    --accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
+
+    --link: var(--accent-300);
+    --visited: var(--accent-400);
+    --hover: var(--accent-500);
+
+    --text-50: #f0f4f2;
+    --text-100: #e1eae5;
+    --text-200: #c3d5cb;
+    --text-300: #a5c0b1;
+    --text-400: #88aa97;
+    --text-500: #6a957d;
+    --text-600: #557764;
+    --text-700: #3f5a4b;
+    --text-800: #2a3c32;
+    --text-900: #151e19;
+    --text-950: #0b0f0c;
+
+    --background-50: #eef7f2;
+    --background-100: #dcefe4;
+    --background-200: #b9dfc9;
+    --background-300: #96cfaf;
+    --background-400: #73bf94;
+    --background-500: #50af79;
+    --background-600: #408c61;
+    --background-700: #306949;
+    --background-800: #204630;
+    --background-900: #102318;
+    --background-950: #08110c;
+
+    --primary-50: #ebf9f1;
+    --primary-100: #d7f4e4;
+    --primary-200: #b0e8c8;
+    --primary-300: #88ddad;
+    --primary-400: #61d192;
+    --primary-500: #39c676;
+    --primary-600: #2e9e5f;
+    --primary-700: #227747;
+    --primary-800: #174f2f;
+    --primary-900: #0b2818;
+    --primary-950: #06140c;
+
+    --secondary-50: #e9fcf1;
+    --secondary-100: #d2f9e3;
+    --secondary-200: #a5f3c7;
+    --secondary-300: #78edab;
+    --secondary-400: #4be78f;
+    --secondary-500: #1fe073;
+    --secondary-600: #18b45c;
+    --secondary-700: #128745;
+    --secondary-800: #0c5a2e;
+    --secondary-900: #062d17;
+    --secondary-950: #03160b;
+
+    --accent-50: #e9fcf1;
+    --accent-100: #d3f8e3;
+    --accent-200: #a6f2c7;
+    --accent-300: #7aebab;
+    --accent-400: #4ee48f;
+    --accent-500: #21de73;
+    --accent-600: #1bb15c;
+    --accent-700: #148545;
+    --accent-800: #0d592e;
+    --accent-900: #072c17;
+    --accent-950: #03160b;
+
+    --alt-accent: #fbb055;
+
+    /* TODO: Alter This */
+    --glitch-1: var(--alt-accent-400);
+    --glitch-2: var(--alt-accent-500);
+    --glitch-3: var(--alt-accent-600);
+
+    --alt-accent-50: #fef3e7;
+    --alt-accent-100: #fce8cf;
+    --alt-accent-200: #fad19e;
+    --alt-accent-300: #f7b96e;
+    --alt-accent-400: #f5a23d;
+    --alt-accent-500: #f28b0d;
+    --alt-accent-600: #c26f0a;
+    --alt-accent-700: #915308;
+    --alt-accent-800: #613805;
+    --alt-accent-900: #301c03;
+    --alt-accent-950: #180e01;
+}

frontend/src/components/footer/mybuttons.astro

@@ -1,10 +1,12 @@
 buttons i created
 <div class="badgeContainer">
-    <a href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
-    <!-- <a href="https://limepot.xyz/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/limepotxyz.gif" alt="animation of a bunch of twinkling stars (but purple)" loading="lazy"/></a> --><a href="https://ouroboros.gay/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/ouroboros.gay.png" loading="lazy"></a>
+    <a id="badgeGray" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-gray.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
+    <a id="badgeOrange" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-orange.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
+    <a id="badgeGreen" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-green.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
+    <a href="https://ouroboros.gay/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/ouroboros.gay.png" loading="lazy"></a>
     <img id="sgaButton" style="display: none;" width="88" height="31" style="cursor:pointer;" onclick="toggleTheme()" src="/assets/images/badges/mine/standard-galactic-alphabet.png" alt="animation of a bunch of twinkling stars" loading="lazy">
 </div>
-<p style="transform: translateX(92px) translateY(-20px); font-size: small; margin-bottom: -20px; color: var(--accent);">press me!</p>
+<p id="sgaButtonText" style="visibility: hidden; transform: translateX(92px) translateY(-20px); font-size: small; margin-bottom: -20px; color: var(--accent);">press me!</p>
 <hr>
 every coin counts!
 <br>

frontend/src/components/main-page/contact.astro

@@ -1,18 +1,44 @@
 <section class="content center" id="points-of-existence">
     <h2>points of existence <a href="#points-of-existence"><i class="nf nf-oct-link"></i></a></h2>
-    <p><a href="mailto:the@nelle.observer"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-md-email"></i> email</a></p>
-    <p>
-      <a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA"
-        ><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-md-youtube"></i> youtube</a>
-    </p>      
-    <p>
-      <a href="    https://git.nullafati.xyz/limepotato/"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-linux-forgejo"></i> git forge</a><a
-        href="https://jointhefediverse.net/"
-        ><span style="color: var(--alt-accent);">*</span></a>
-    </p>
-    <p>
-      <a href="https://ouroboros.gay/@limepot"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-seti-graphql"></i> the fediverse</a><a
-        href="https://jointhefediverse.net/"
-        ></a>
-    </p>
+    <div style="display: inline-block; text-align: left;">
+        <ul style="list-style: none;">
+            <li>
+                <p><a href="mailto:the@nelle.observer"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-md-email"></i> email</a></p>
+            </li>
+            <li>
+                <p>
+                    <a href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA"
+                    ><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-md-youtube"></i> youtube</a>
+                </p>
+            </li>
+            <li>
+                <p>
+                    <a href="https://bsky.app/profile/nelle.observer">
+                        <span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-fae-butterfly"></i> bluesky</a>
+                </p>
+            </li>
+            <li>
+                <p>
+                    <a href="https://git.nullafati.xyz/limepotato/"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-linux-forgejo"></i> git forge</a>
+                </p>
+            </li>
+            <li>
+                <p>
+                    <a href="https://jointhefediverse.net/"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> <i class="nf nf-seti-graphql"></i> fediverse</a>
+                </p>
+                <ul style="list-style: none;">
+                    <li>
+                        <p>
+                            <a href="https://ouroboros.gay/@limepot"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> public</a>
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            <a href="https://ouroboros.gay/@limepot"><span style="color: var(--alt-accent-600);"><i class="nf nf-cod-arrow_right"></i></span> semi-public</a>
+                        </p>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
   </section>