From 5c9b7102f2b528f17aebbc98a7bc7e5aee9672cd Mon Sep 17 00:00:00 2001
From: Niko <niko@meowing.zip>
Date: Sun, 19 Apr 2026 00:29:23 -0700
Subject: [PATCH] added more color scheme options! currently does not save tho
 sorgyyy i'll fix it later

---
 index.html | 108 ++++++++++++++++++++++++++++++++++++++++++-----------
 styles.css | 107 +++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 189 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 171e996..4f911ec 100644
--- a/index.html
+++ b/index.html
@@ -30,10 +30,16 @@
 					  <label for="theme-light"><input type="radio" name="theme" id="theme-light" value="light">light</label>
 					  <label for="theme-dark"><input type="radio" name="theme" id="theme-dark" value="dark">dark</label>
 				</radio-picker>
+				<radio-picker>
+					  <a style="justify-content: center; align-items: center; text-align: left; display: flex; font-size: 14px; color: var(--foreground);">color:</a>
+					  <label for="theme-catppuccin"><input type="radio" name="color" id="theme-catppuccin" value="catppuccin" checked>catppuccin</label>
+					  <label for="theme-newpaper"><input type="radio" name="color" id="theme-newpaper" value="newpaper">newpaper</label>
+					  <label for="theme-dracula"><input type="radio" name="color" id="theme-dracula" value="newpaper">dracula</label>
+				</radio-picker>
 				<checkbox-picker>
 					<a style="text-align: left; margin-left: 7px; font-size: 14px; color: var(--foreground);">accessibility:</a>
 					<label for="disable-bg"><input type="checkbox" id="disable-bg" name="background">disable background</label>
-					<label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">animations</label>
+					<label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">disable animations</label>
 				</checkbox-picker>
 		   </div>
 		</div>
@@ -47,26 +53,26 @@
 		  <i class="db2" tabindex="1"></i>
 		  <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-at"></i>follow me on socials</a>
 		   <div class="dropdown-content">
-		      <a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:plc:yt66ucfex7kgaifhu5qijrz3" target="_blank">bluesky</a>
-		      <a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://merping.synth.download/@meowmaxing" target="_blank">fediverse</a>
-		      <a style="color: light-dark(#d20f39, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a>
+		      <a style="color: var(--blue);" href="https://bsky.app/profile/did:plc:yt66ucfex7kgaifhu5qijrz3" target="_blank">bluesky</a>
+		      <a style="color: var(--green);" rel="me" href="https://merping.synth.download/@meowmaxing" target="_blank">fediverse</a>
+		      <a style="color: var(--red);" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a>
 		   </div>
 		</div>
 		<div class="dropdown" tabindex="1">
 		  <i class="db2" tabindex="1"></i>
 		  <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-user-plus"></i>add me!</a>
 		   <div class="dropdown-content">
-		      <a style="color: light-dark(#04a5e5, #89dceb); border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a>
+		      <a style="color: var(--light-blue);" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a>
 		   </div>
 		</div>
 		<div class="dropdown" tabindex="1">
 		  <i class="db2" tabindex="1"></i>
 		  <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-chat-circle-dots"></i>contact info</a>
 		   <div class="dropdown-content">
-		   	  <a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/2G_wkky5wzpLc8dGMMJZADmtQfS0v_hUHrPxyZ8C0-2dAsNSi0BBcq9gRoNB1bTw" target="_blank">signal</a>
-		   	  <a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" href="xmpp:niko@meowing.zip">xmpp</a>
-		      <a style="color: light-dark(#7287fd, #b4befe); border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
-		      <a style="color: light-dark(#e64553, #eba0ac); border: 0px soild transparent; border-radius: 20px;" href="mailto:niko@meowing.zip">email</a>
+		   	  <a style="color: var(--blue);" href="https://signal.me/#eu/2G_wkky5wzpLc8dGMMJZADmtQfS0v_hUHrPxyZ8C0-2dAsNSi0BBcq9gRoNB1bTw" target="_blank">signal</a>
+		   	  <a style="color: var(--green);" href="xmpp:niko@meowing.zip">xmpp</a>
+		      <a style="color: var(--purple);" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
+		      <a style="color: var(--red);" href="mailto:niko@meowing.zip">email</a>
 		   </div>
 		</div>
 		<a style="margin-left: 15px; font-size: 12px; color: var(--subtext);"><i style="margin-right: 5px;" class="ph ph-image"></i>gallery (under construction)</a>
@@ -81,46 +87,46 @@
 			<h3><i style="margin-right: 10px;" class="ph ph-info"></i>who am i?</h3>
 			<div class="divider"></div>
 			<div class="about">
-				<a style="font-size: 13px;">
+				<a>
 					hiiii!! my name is Niko, this is my lil corner of the web <small style="font-size: 10px;">(waow)</small>!<br><br>
 					im a biromantic, asexual, genderfluid individual who likes computer-adjecent things and i also like to do video editing and VFX stuff <small style="font-size: 10px;">(every once in a blue moon)</small> !!
-					<br><br><a style="margin-top: 20px; color: light-dark(#d20f39, #f38ba8); font-size: 15px;">im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me, its not that i dont care!!</a>
+					<br><br><a style="margin-top: 20px; color: var(--red); font-size: 15px;">im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me, its not that i dont care!!</a>
 				</a>
 			</div>
 			<div style="margin-top: 5px;" class="pronouns-box">
 				<h3 style="margin-top: 5px; font-size: 15px;"><i style="margin-right: 10px;" class="ph ph-info"></i>pronouns</h3>
 				<div class="divider"></div>
-				<a><i class="ph ph-heart" style="color: light-dark(#ea76cb, #f5c2e7);"></i> it/its<br><i style="color: light-dark(#04a5e5, #89dceb);" class="ph ph-thumbs-up"></i> they/them<br><i style="color: light-dark(#df8e1d, #f9e2af);" class="ph ph-smiley-meh"></i> she/her<br><i style="margin-right: 5px; color: light-dark(#d20f39, #f38ba8);" class="ph ph-x-circle"></i>he/him<br></a>
+				<a><i alt="preferred" class="ph ph-heart" style="color: var(--pink);"></i> it/its<br><i alt="acceptable" style="color: var(--blue);" class="ph ph-thumbs-up"></i> they/them<br><i alt="okay. i guess" style="color: var(--yellow);" class="ph ph-smiley-meh"></i> she/her<br><i alt="NO. not acceptable!" style="margin-right: 5px; color: var(--red);" class="ph ph-x-circle"></i>he/him, or anything else<br></a>
 			 </div>
 		</div>
 		<div class="main">
 			<h3>what do u use for video editing?</h3>
 			<div class="divider"></div>
-			<a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;">
+			<a style="color: var(--purple);">
 				adobe premiere pro (SORRY)
 			</a>
 			<a>-</a>
-			<a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;">
+			<a style="color: var(--purple);">
 				adobe after effects (SORRY)
 			</a>
 			<a style="font-size: 13px;">,</a>
-			<a style="color: light-dark(#179299, #94e2d5); font-size: 13px;">
+			<a style="color: var(--teal);">
 				sometimes davinci resolve when on linux
 			</a>
 			<div class="divider"></div>
 			<h3>what about photo editing?</h3>
 			<div class="divider"></div>
-			<a style="color: light-dark(#1e66f5, #89b4fa); font-size: 13px;">
+			<a style="color: var(--blue);">
 				adobe photoshop (SORRY)
 			</a>
-			<a style="font-size: 13px;">,</a>
-			<a style="font-size: 13px;">
+			<a>,</a>
+			<a>
 				sometimes gimp when on linux
 			</a>
 			<div class="divider"></div>
 			<h3>what about audio stuff?</h3>
 			<div class="divider"></div>
-			<a style="color: light-dark(#40a02b, #a6e3a1); font-size: 13px;">just reaper...</a>
+			<a style="color: var(--green);">just reaper...</a>
 		</div>
 		<div class="main">
 		<div style="margin-bottom: 10px">
@@ -177,7 +183,8 @@
 		</div>
 		<a style="color: var(--accent); padding: 10px;" href="https://git.gay/meowmaxing/website"><small>website source!</small></a>
 		<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T23:45:53Z</small></a>
-		<span id="copy-toast"><i style="margin-right: 5px; color: light-dark(#40a02b, #a6e3a1)" class="ph ph-clipboard-text"></i>copied to clipboard!</span>
+		<span id="copy-toast"><i style="margin-right: 5px; color: var(--green)" class="ph ph-clipboard-text"></i>copied to clipboard!</span>
+		<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
 </body>
 <script>
 	function copyButton() {
@@ -188,11 +195,12 @@
 	}
 	document.addEventListener("DOMContentLoaded", function() {
 	    const t = document.querySelectorAll('input[name="theme"]')
+		  , c = document.querySelectorAll('input[name="color"]')
 	      , i = document.getElementById("disable-bg")
 	      , o = document.getElementById("disable-animations");
 	    function a() {
 	        const t = document.querySelector('input[name="theme"]:checked').value;
-	        localStorage.setItem("theme", t),
+	        const c = document.querySelector('input[name="color"]:checked').value;
 	        localStorage.setItem("disable-bg", i.checked),
 	        localStorage.setItem("disable-animations", o.checked)
 	    }
@@ -202,9 +210,67 @@
 	            const e = document.querySelector(`input[name="theme"][value="${t}"]`);
 	            e && (e.checked = !0)
 	        }
+	        const c = localStorage.getItem("color");
+	        if (c) {
+	            const e = document.querySelector(`input[name="color"][value="${t}"]`);
+	            e && (e.checked = !0)
+	        }
 	        "true" === localStorage.getItem("disable-bg") && (i.checked = !0);
 	        "true" === localStorage.getItem("disable-animations") && (o.checked = !0)
 	    }(),
+	    document.addEventListener("DOMContentLoaded", function() {
+                let e = document.getElementById("alt-popup");
+                function t() {
+                    document.querySelectorAll("[alt], [aria-label]").forEach(e => {
+                        e.addEventListener("mousemove", n),
+                        e.addEventListener("mouseout", i)
+                    }
+                    )
+                }
+                function n(t) {
+                    const n = t.target.getAttribute("alt")
+                      , i = t.target.getAttribute("aria-label")
+                      , o = n || i;
+                    if (o) {
+                        e.textContent = o,
+                        e.style.opacity = "0",
+                        e.style.visibility = "visible",
+                        e.style.position = "fixed";
+                        const n = window.innerWidth
+                          , i = window.innerHeight
+                          , c = e.offsetWidth
+                          , a = e.offsetHeight;
+                        let l = t.clientX + 20
+                          , s = t.clientY + 20;
+                        l + c > n && (l = t.clientX - c - 10),
+                        s + a > i && (s = t.clientY - a - 10),
+                        l < 0 && (l = 10),
+                        s < 0 && (s = 10),
+                        e.style.left = l + "px",
+                        e.style.top = s + "px",
+                        e.style.opacity = "1",
+                        e.style.visibility = "visible"
+                    }
+                }
+                function i() {
+                    e.style.opacity = "0",
+                    e.style.visibility = "hidden"
+                }
+                if (t(),
+                window.MutationObserver) {
+                    const e = new MutationObserver(e => {
+                        e.forEach(e => {
+                            e.addedNodes.length && t()
+                        }
+                        )
+                    }
+                    );
+                    document.body && e.observe(document.body, {
+                        childList: !0,
+                        subtree: !0
+                    })
+                }
+            }),
 	    t.forEach(e => {
 	        e.addEventListener("change", function() {
 	            a()
diff --git a/styles.css b/styles.css
index 4b40991..e1e89f3 100644
--- a/styles.css
+++ b/styles.css
@@ -117,6 +117,11 @@
 	        animation: 150s linear infinite ticker!important
 	    }
 	}
+	&:has(#disable-alttext:checked) {
+		& .alt-popup {
+			display: none!important
+		}
+	}
 	@keyframes bg-move {
 		0% {
 			background-position: 0 0;
@@ -147,8 +152,68 @@
 		--crust: light-dark(#dce0e8, #11111b);
 		--foreground: light-dark(#4c4f69, #cdd6f4);
 		--subtext: light-dark(#7c7f93, #45475a);
-		--divider-color: light-dark(#8839ef, #9ca0b0);
+		--divider-color: var(--accent);
 		--accent: light-dark(#8839ef, #cba6f7);
+
+		--red: light-dark(#e64553, #eba0ac);
+		--blue: light-dark(#1e66f5, #89b4fa);
+		--light-blue: light-dark(#04a5e5, #89dceb);
+		--teal: light-dark(#179299, #94e2d5);
+		--green: light-dark(#40a02b, #a6e3a1);
+		--purple: light-dark(#7287fd, #b4befe);
+		--pink: light-dark(#ea76cb, #f5c2e7);
+		--yellow: light-dark(#df8e1d, #f9e2af);
+		&:has(#theme-catppuccin:checked) {
+			--background: light-dark(#eff1f5, #303030);
+			--crust: light-dark(#dce0e8, #11111b);
+			--foreground: light-dark(#4c4f69, #cdd6f4);
+			--subtext: light-dark(#7c7f93, #45475a);
+			--divider-color: var(--accent);
+			--accent: light-dark(#8839ef, #cba6f7);
+
+			--red: light-dark(#e64553, #eba0ac);
+			--blue: light-dark(#1e66f5, #89b4fa);
+			--light-blue: light-dark(#04a5e5, #89dceb);
+			--teal: light-dark(#179299, #94e2d5);
+			--green: light-dark(#40a02b, #a6e3a1);
+			--purple: light-dark(#7287fd, #b4befe);
+			--pink: light-dark(#ea76cb, #f5c2e7);
+			--yellow: light-dark(#df8e1d, #f9e2af);
+		}
+		&:has(#theme-newpaper:checked) {
+			--background: light-dark(#f1f3f2, #1e1e2e);
+			--crust: light-dark(#e5e5e5, #11111b);
+			--foreground: light-dark(#2f2a3d, #c6c8cd);
+			--subtext: light-dark(#444444, #bcbcbc);
+			--divider-color: var(--accent);
+			--accent: light-dark(#e563ba, #e878d8);
+
+			--red: light-dark(#af0000, #cc5555);
+			--blue: light-dark(#27408b, #8195e7);
+			--light-blue: light-dark(#0072c1, #7db1d5);
+			--teal: light-dark(#005f87, #72aeb3);
+			--green: light-dark(#008700, #75b680);
+			--purple: light-dark(#8700af, #a274d1);
+			--pink: light-dark(#e563ba, #e878d8);
+			--yellow: light-dark(#af5f00, #c57a30);
+		}
+		&:has(#theme-dracula:checked) {
+			--background: light-dark(#FFFBEB, #282A36);
+			--crust: light-dark(#CFCFDE, #44475A);
+			--foreground: light-dark(#1F1F1F, #F8F8F2);
+			--subtext: light-dark(#6C664B, #6272A4);
+			--divider-color: var(--accent);
+			--accent: light-dark(#644AC9, #6272A4);
+
+			--red: light-dark(#CB3A2A, #FF5555);
+			--blue: light-dark(#644AC9, #BD93F9);
+			--light-blue: light-dark(#7862D0, #D6ACFF);
+			--teal: light-dark(#036A96, #50FA7B);
+			--green: light-dark(#14710A, #50FA7B);
+			--purple: light-dark(#644AC9, #BD93F9);
+			--pink: light-dark(#A3144D, #FF79C6);
+			--yellow: light-dark(#846E15, #F1FA8C)
+		}
 	}
 	#copy-toast {
 	  visibility: hidden;
@@ -243,6 +308,15 @@
     }
 	.main {
 		background-color: light-dark(#dce0e880, #11111b80);
+		&:has(#theme-catppuccin:checked) {
+			background-color: light-dark(#f1f3f280, #30303080);
+		}
+		&:has(#theme-newpaper:checked) {
+			background-color: light-dark(#eff1f580, #1e1e2e80);
+		}
+		&:has(#theme-dracula:checked) {
+			background-color: light-dark(#FFFBEB80, #282A3680);
+		}
 		margin-top: 20px;
 		outline: 2px solid;
 		outline-color: var(--accent);
@@ -250,6 +324,9 @@
 		padding: 20px;
 		box-shadow: 10px 5px 10px var(--crust);
 	}
+	.main a {
+		font-size: 13px;
+	}
 	.main .about {
 		text-align: "left";
 		margin-top: 10px;
@@ -258,6 +335,9 @@
 	}
 	.main .pronouns-box {
 		background-color: light-dark(#dce0e880, #11111b80);
+		&:has(#theme-dracula:checked) {
+			background-color: light-dark(#FFFBEB80, #282A3680);
+		}
 		margin-top: 20px;
 		outline: 2px solid;
 		outline-color: var(--accent);
@@ -330,6 +410,10 @@
 	  position: relative;
 	  outline: none;
 	}
+	.dropdown a {
+		 border: 0px soild transparent;
+		 border-radius: 20px;
+	}
 	
 	/* button */
 	.dropbtn {
@@ -448,19 +532,32 @@
 		display: inline-block;
 	}
 
+	.alt-popup {
+		background-color: color-mix(in srgb, var(--background) 85%, transparent);
+		backdrop-filter: blur(.5rem);
+		color: var(--foreground);
+		border: solid 2px var(--accent);
+		z-index: 1000;
+		pointer-events: none;
+		opacity: 0;
+		border-radius: .5rem;
+		max-width: 30rem;
+		padding: .5rem;
+		font-size: 1rem;
+		transition: opacity .4s;
+		position: fixed
+	}
 	.pfp {
 		border-radius: 15px;
 		border: 2px solid;
-		border-color: var(--foreground);
+		border-color: var(--accent);
 		width: 70px;
 		height: auto;
 	}
-	
 	.pfp:hover {
 		transition: ease-in-out 0.2s;
 		height: auto;
-		width: 90px;
-		margin: 1px;
+		transform: scale(1.35, 1.35);
 	}
 	
 	/* show dd content */
-- 
2.51.2