From 3935da0b8afb1bdb1aa85a7e2b7f3b593d7bc70e Mon Sep 17 00:00:00 2001
From: Niko <niko@meowing.zip>
Date: Sat, 18 Apr 2026 16:46:29 -0700
Subject: [PATCH] improved the setting dropdown a bit!

---
 index.html | 18 +++++++++++-------
 styles.css | 52 +++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 92d0e7c..41d4a23 100644
--- a/index.html
+++ b/index.html
@@ -19,18 +19,22 @@
 	<div style="display: flex;">
 		<a href="./fursona.html"><img class="pfp" src="./assets/images/pfp.jpg" alt="my fursona. a cat (sometimes fops) thing that wears a mask"></a>
 		<a style="padding: 20px; margin-right: 40%; display: inline-block;">niko's cool and awesome website!<small style="color: var(--subtext); margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a>
-		<div class="dropdown" style="display: inline-block;" tabindex="1">
+		<div class="dropdown" tabindex="1">
 		  <i class="db2" tabindex="1"></i>
 		  <a style="font-size: 14px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-gear"></i>settings</a>
-		   <div class="settings-popup">
+		   <div id="settings" class="settings-popup">
 		   		<a style="margin-bottom: 5px; font-size: 12px; color: light-dark(#d20f39, #f38ba8);">settings saved with javascript enabled</a>
 				<radio-picker>
+					  <a style="font-size: 14px; color: var(--foreground); 	margin-top: 9px;">theme:</a>
 					  <label for="theme-auto"><input type="radio" name="theme" id="theme-auto" value="auto" checked>auto</label>
 					  <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>
-					  <label for="disable-bg"><input type="checkbox" id="disable-bg" name="background">toggle background</label>
-					  <label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">toggle animations</label>
 				</radio-picker>
+				<checkbox-picker>
+					<a style="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>
+				</checkbox-picker>
 		   </div>
 		</div>
 	</div>
@@ -41,7 +45,7 @@
 		</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-at"></i>follow me on socials</a>
+		  <a href="#" 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>
@@ -50,7 +54,7 @@
 		</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>
+		  <a href="#" 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>
 		   </div>
@@ -172,7 +176,7 @@
 		</div>
 		</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-18T01:03:26Z</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>
 </body>
 <script>
diff --git a/styles.css b/styles.css
index 7e32c6b..b052afd 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,6 @@
 	radio-picker {
 	  display: flex;
+	  padding: 8px;
 	  label {
 	    &:has(input:checked) {
 	      box-shadow: inset 0px 0px 8px 0px var(--accent);
@@ -7,16 +8,15 @@
 	    &:has(input:focus-visible) {
 	      outline: 2px dashed var(--accent);
 	    }
-	    padding: 15px;
+	    padding: 5px;
+	    margin: 5px;
 	    cursor: pointer;
 	    background: var(--crust);
 	    &:hover { background: var(--accent); color: var(--crust); }
 	    &:active { background: var(--accent); }
 	    font-size: 14px;
 	    border-radius: 12px;
-	    margin-left: 10px;
 	    outline: 2px dashed var(--accent);
-	    
 	  }
 	  input {
 	    opacity: 0;
@@ -24,6 +24,52 @@
 	    pointer-events: none;
 	  }
 	}
+	checkbox-picker {
+	  label {
+	    cursor: pointer;
+	    &:hover { background: var(--accent); color: var(--crust); }
+	    &:active { background: var(--accent); }
+	    font-size: 14px;
+	    padding: 5px;
+	    border-radius: 12px;
+	    display: flex; 
+	  }
+	}
+	input[type="checkbox"] {
+	  /* Add if not using autoprefixer */
+	  -webkit-appearance: none;
+	  appearance: none;
+	  /* For iOS < 15 to remove gradient background */
+	  background-color: #fff;
+	  /* Not removed via appearance */
+	  margin: 0;
+	  font: inherit;
+	  color: var(--crust);
+	  width: 1.15em;
+	  height: 1.15em;
+	  border: 0.15em solid var(--accent);
+	  border-radius: 0.25em;
+	  transform: translateY(-0.075em);
+	  margin-right: 2px;
+	  margin-top: 2px;
+	  display: grid;
+	  place-content: center;
+	}
+	input[type="checkbox"]::before {
+	  content: "";
+	  width: 0.65em;
+	  height: 0.65em;
+	  transform: scale(0);
+	  transition: 120ms transform ease-in-out;
+	  box-shadow: inset 1em 1em var(--accent);
+	  border-radius: 0.25em;
+	  transform-origin: bottom left;
+	  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+	}
+	
+	input[type="checkbox"]:checked::before {
+	  transform: scale(1);
+	}
 	bg {
 		background: url("./assets/images/pfp.jpg");
 		background-repeat: repeat;
-- 
2.51.2