my personal website! meowing.zip
website
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

added more color scheme options! currently does not save tho sorgyyy i'll fix it later

Niko 5c9b7102 f36a7283

+189 -26
+87 -21
index.html
··· 30 30 <label for="theme-light"><input type="radio" name="theme" id="theme-light" value="light">light</label> 31 31 <label for="theme-dark"><input type="radio" name="theme" id="theme-dark" value="dark">dark</label> 32 32 </radio-picker> 33 + <radio-picker> 34 + <a style="justify-content: center; align-items: center; text-align: left; display: flex; font-size: 14px; color: var(--foreground);">color:</a> 35 + <label for="theme-catppuccin"><input type="radio" name="color" id="theme-catppuccin" value="catppuccin" checked>catppuccin</label> 36 + <label for="theme-newpaper"><input type="radio" name="color" id="theme-newpaper" value="newpaper">newpaper</label> 37 + <label for="theme-dracula"><input type="radio" name="color" id="theme-dracula" value="newpaper">dracula</label> 38 + </radio-picker> 33 39 <checkbox-picker> 34 40 <a style="text-align: left; margin-left: 7px; font-size: 14px; color: var(--foreground);">accessibility:</a> 35 41 <label for="disable-bg"><input type="checkbox" id="disable-bg" name="background">disable background</label> 36 - <label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">animations</label> 42 + <label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">disable animations</label> 37 43 </checkbox-picker> 38 44 </div> 39 45 </div> ··· 47 53 <i class="db2" tabindex="1"></i> 48 54 <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-at"></i>follow me on socials</a> 49 55 <div class="dropdown-content"> 50 - <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> 51 - <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> 52 - <a style="color: light-dark(#d20f39, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a> 56 + <a style="color: var(--blue);" href="https://bsky.app/profile/did:plc:yt66ucfex7kgaifhu5qijrz3" target="_blank">bluesky</a> 57 + <a style="color: var(--green);" rel="me" href="https://merping.synth.download/@meowmaxing" target="_blank">fediverse</a> 58 + <a style="color: var(--red);" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a> 53 59 </div> 54 60 </div> 55 61 <div class="dropdown" tabindex="1"> 56 62 <i class="db2" tabindex="1"></i> 57 63 <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-user-plus"></i>add me!</a> 58 64 <div class="dropdown-content"> 59 - <a style="color: light-dark(#04a5e5, #89dceb); border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a> 65 + <a style="color: var(--light-blue);" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a> 60 66 </div> 61 67 </div> 62 68 <div class="dropdown" tabindex="1"> 63 69 <i class="db2" tabindex="1"></i> 64 70 <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-chat-circle-dots"></i>contact info</a> 65 71 <div class="dropdown-content"> 66 - <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> 67 - <a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" href="xmpp:niko@meowing.zip">xmpp</a> 68 - <a style="color: light-dark(#7287fd, #b4befe); border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a> 69 - <a style="color: light-dark(#e64553, #eba0ac); border: 0px soild transparent; border-radius: 20px;" href="mailto:niko@meowing.zip">email</a> 72 + <a style="color: var(--blue);" href="https://signal.me/#eu/2G_wkky5wzpLc8dGMMJZADmtQfS0v_hUHrPxyZ8C0-2dAsNSi0BBcq9gRoNB1bTw" target="_blank">signal</a> 73 + <a style="color: var(--green);" href="xmpp:niko@meowing.zip">xmpp</a> 74 + <a style="color: var(--purple);" href="https://discord.com/users/752389000945467482" target="_blank">discord</a> 75 + <a style="color: var(--red);" href="mailto:niko@meowing.zip">email</a> 70 76 </div> 71 77 </div> 72 78 <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 87 <h3><i style="margin-right: 10px;" class="ph ph-info"></i>who am i?</h3> 82 88 <div class="divider"></div> 83 89 <div class="about"> 84 - <a style="font-size: 13px;"> 90 + <a> 85 91 hiiii!! my name is Niko, this is my lil corner of the web <small style="font-size: 10px;">(waow)</small>!<br><br> 86 92 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> !! 87 - <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> 93 + <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> 88 94 </a> 89 95 </div> 90 96 <div style="margin-top: 5px;" class="pronouns-box"> 91 97 <h3 style="margin-top: 5px; font-size: 15px;"><i style="margin-right: 10px;" class="ph ph-info"></i>pronouns</h3> 92 98 <div class="divider"></div> 93 - <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> 99 + <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> 94 100 </div> 95 101 </div> 96 102 <div class="main"> 97 103 <h3>what do u use for video editing?</h3> 98 104 <div class="divider"></div> 99 - <a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;"> 105 + <a style="color: var(--purple);"> 100 106 adobe premiere pro (SORRY) 101 107 </a> 102 108 <a>-</a> 103 - <a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;"> 109 + <a style="color: var(--purple);"> 104 110 adobe after effects (SORRY) 105 111 </a> 106 112 <a style="font-size: 13px;">,</a> 107 - <a style="color: light-dark(#179299, #94e2d5); font-size: 13px;"> 113 + <a style="color: var(--teal);"> 108 114 sometimes davinci resolve when on linux 109 115 </a> 110 116 <div class="divider"></div> 111 117 <h3>what about photo editing?</h3> 112 118 <div class="divider"></div> 113 - <a style="color: light-dark(#1e66f5, #89b4fa); font-size: 13px;"> 119 + <a style="color: var(--blue);"> 114 120 adobe photoshop (SORRY) 115 121 </a> 116 - <a style="font-size: 13px;">,</a> 117 - <a style="font-size: 13px;"> 122 + <a>,</a> 123 + <a> 118 124 sometimes gimp when on linux 119 125 </a> 120 126 <div class="divider"></div> 121 127 <h3>what about audio stuff?</h3> 122 128 <div class="divider"></div> 123 - <a style="color: light-dark(#40a02b, #a6e3a1); font-size: 13px;">just reaper...</a> 129 + <a style="color: var(--green);">just reaper...</a> 124 130 </div> 125 131 <div class="main"> 126 132 <div style="margin-bottom: 10px"> ··· 177 183 </div> 178 184 <a style="color: var(--accent); padding: 10px;" href="https://git.gay/meowmaxing/website"><small>website source!</small></a> 179 185 <a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T23:45:53Z</small></a> 180 - <span id="copy-toast"><i style="margin-right: 5px; color: light-dark(#40a02b, #a6e3a1)" class="ph ph-clipboard-text"></i>copied to clipboard!</span> 186 + <span id="copy-toast"><i style="margin-right: 5px; color: var(--green)" class="ph ph-clipboard-text"></i>copied to clipboard!</span> 187 + <div class="alt-popup" id="alt-popup" aria-hidden="true"></div> 181 188 </body> 182 189 <script> 183 190 function copyButton() { ··· 188 195 } 189 196 document.addEventListener("DOMContentLoaded", function() { 190 197 const t = document.querySelectorAll('input[name="theme"]') 198 + , c = document.querySelectorAll('input[name="color"]') 191 199 , i = document.getElementById("disable-bg") 192 200 , o = document.getElementById("disable-animations"); 193 201 function a() { 194 202 const t = document.querySelector('input[name="theme"]:checked').value; 195 - localStorage.setItem("theme", t), 203 + const c = document.querySelector('input[name="color"]:checked').value; 196 204 localStorage.setItem("disable-bg", i.checked), 197 205 localStorage.setItem("disable-animations", o.checked) 198 206 } ··· 202 210 const e = document.querySelector(`input[name="theme"][value="${t}"]`); 203 211 e && (e.checked = !0) 204 212 } 213 + const c = localStorage.getItem("color"); 214 + if (c) { 215 + const e = document.querySelector(`input[name="color"][value="${t}"]`); 216 + e && (e.checked = !0) 217 + } 205 218 "true" === localStorage.getItem("disable-bg") && (i.checked = !0); 206 219 "true" === localStorage.getItem("disable-animations") && (o.checked = !0) 207 220 }(), 221 + document.addEventListener("DOMContentLoaded", function() { 222 + let e = document.getElementById("alt-popup"); 223 + function t() { 224 + document.querySelectorAll("[alt], [aria-label]").forEach(e => { 225 + e.addEventListener("mousemove", n), 226 + e.addEventListener("mouseout", i) 227 + } 228 + ) 229 + } 230 + function n(t) { 231 + const n = t.target.getAttribute("alt") 232 + , i = t.target.getAttribute("aria-label") 233 + , o = n || i; 234 + if (o) { 235 + e.textContent = o, 236 + e.style.opacity = "0", 237 + e.style.visibility = "visible", 238 + e.style.position = "fixed"; 239 + const n = window.innerWidth 240 + , i = window.innerHeight 241 + , c = e.offsetWidth 242 + , a = e.offsetHeight; 243 + let l = t.clientX + 20 244 + , s = t.clientY + 20; 245 + l + c > n && (l = t.clientX - c - 10), 246 + s + a > i && (s = t.clientY - a - 10), 247 + l < 0 && (l = 10), 248 + s < 0 && (s = 10), 249 + e.style.left = l + "px", 250 + e.style.top = s + "px", 251 + e.style.opacity = "1", 252 + e.style.visibility = "visible" 253 + } 254 + } 255 + function i() { 256 + e.style.opacity = "0", 257 + e.style.visibility = "hidden" 258 + } 259 + if (t(), 260 + window.MutationObserver) { 261 + const e = new MutationObserver(e => { 262 + e.forEach(e => { 263 + e.addedNodes.length && t() 264 + } 265 + ) 266 + } 267 + ); 268 + document.body && e.observe(document.body, { 269 + childList: !0, 270 + subtree: !0 271 + }) 272 + } 273 + }), 208 274 t.forEach(e => { 209 275 e.addEventListener("change", function() { 210 276 a()
+102 -5
styles.css
··· 117 117 animation: 150s linear infinite ticker!important 118 118 } 119 119 } 120 + &:has(#disable-alttext:checked) { 121 + & .alt-popup { 122 + display: none!important 123 + } 124 + } 120 125 @keyframes bg-move { 121 126 0% { 122 127 background-position: 0 0; ··· 147 152 --crust: light-dark(#dce0e8, #11111b); 148 153 --foreground: light-dark(#4c4f69, #cdd6f4); 149 154 --subtext: light-dark(#7c7f93, #45475a); 150 - --divider-color: light-dark(#8839ef, #9ca0b0); 155 + --divider-color: var(--accent); 151 156 --accent: light-dark(#8839ef, #cba6f7); 157 + 158 + --red: light-dark(#e64553, #eba0ac); 159 + --blue: light-dark(#1e66f5, #89b4fa); 160 + --light-blue: light-dark(#04a5e5, #89dceb); 161 + --teal: light-dark(#179299, #94e2d5); 162 + --green: light-dark(#40a02b, #a6e3a1); 163 + --purple: light-dark(#7287fd, #b4befe); 164 + --pink: light-dark(#ea76cb, #f5c2e7); 165 + --yellow: light-dark(#df8e1d, #f9e2af); 166 + &:has(#theme-catppuccin:checked) { 167 + --background: light-dark(#eff1f5, #303030); 168 + --crust: light-dark(#dce0e8, #11111b); 169 + --foreground: light-dark(#4c4f69, #cdd6f4); 170 + --subtext: light-dark(#7c7f93, #45475a); 171 + --divider-color: var(--accent); 172 + --accent: light-dark(#8839ef, #cba6f7); 173 + 174 + --red: light-dark(#e64553, #eba0ac); 175 + --blue: light-dark(#1e66f5, #89b4fa); 176 + --light-blue: light-dark(#04a5e5, #89dceb); 177 + --teal: light-dark(#179299, #94e2d5); 178 + --green: light-dark(#40a02b, #a6e3a1); 179 + --purple: light-dark(#7287fd, #b4befe); 180 + --pink: light-dark(#ea76cb, #f5c2e7); 181 + --yellow: light-dark(#df8e1d, #f9e2af); 182 + } 183 + &:has(#theme-newpaper:checked) { 184 + --background: light-dark(#f1f3f2, #1e1e2e); 185 + --crust: light-dark(#e5e5e5, #11111b); 186 + --foreground: light-dark(#2f2a3d, #c6c8cd); 187 + --subtext: light-dark(#444444, #bcbcbc); 188 + --divider-color: var(--accent); 189 + --accent: light-dark(#e563ba, #e878d8); 190 + 191 + --red: light-dark(#af0000, #cc5555); 192 + --blue: light-dark(#27408b, #8195e7); 193 + --light-blue: light-dark(#0072c1, #7db1d5); 194 + --teal: light-dark(#005f87, #72aeb3); 195 + --green: light-dark(#008700, #75b680); 196 + --purple: light-dark(#8700af, #a274d1); 197 + --pink: light-dark(#e563ba, #e878d8); 198 + --yellow: light-dark(#af5f00, #c57a30); 199 + } 200 + &:has(#theme-dracula:checked) { 201 + --background: light-dark(#FFFBEB, #282A36); 202 + --crust: light-dark(#CFCFDE, #44475A); 203 + --foreground: light-dark(#1F1F1F, #F8F8F2); 204 + --subtext: light-dark(#6C664B, #6272A4); 205 + --divider-color: var(--accent); 206 + --accent: light-dark(#644AC9, #6272A4); 207 + 208 + --red: light-dark(#CB3A2A, #FF5555); 209 + --blue: light-dark(#644AC9, #BD93F9); 210 + --light-blue: light-dark(#7862D0, #D6ACFF); 211 + --teal: light-dark(#036A96, #50FA7B); 212 + --green: light-dark(#14710A, #50FA7B); 213 + --purple: light-dark(#644AC9, #BD93F9); 214 + --pink: light-dark(#A3144D, #FF79C6); 215 + --yellow: light-dark(#846E15, #F1FA8C) 216 + } 152 217 } 153 218 #copy-toast { 154 219 visibility: hidden; ··· 243 308 } 244 309 .main { 245 310 background-color: light-dark(#dce0e880, #11111b80); 311 + &:has(#theme-catppuccin:checked) { 312 + background-color: light-dark(#f1f3f280, #30303080); 313 + } 314 + &:has(#theme-newpaper:checked) { 315 + background-color: light-dark(#eff1f580, #1e1e2e80); 316 + } 317 + &:has(#theme-dracula:checked) { 318 + background-color: light-dark(#FFFBEB80, #282A3680); 319 + } 246 320 margin-top: 20px; 247 321 outline: 2px solid; 248 322 outline-color: var(--accent); ··· 250 324 padding: 20px; 251 325 box-shadow: 10px 5px 10px var(--crust); 252 326 } 327 + .main a { 328 + font-size: 13px; 329 + } 253 330 .main .about { 254 331 text-align: "left"; 255 332 margin-top: 10px; ··· 258 335 } 259 336 .main .pronouns-box { 260 337 background-color: light-dark(#dce0e880, #11111b80); 338 + &:has(#theme-dracula:checked) { 339 + background-color: light-dark(#FFFBEB80, #282A3680); 340 + } 261 341 margin-top: 20px; 262 342 outline: 2px solid; 263 343 outline-color: var(--accent); ··· 329 409 display: inline-block; 330 410 position: relative; 331 411 outline: none; 412 + } 413 + .dropdown a { 414 + border: 0px soild transparent; 415 + border-radius: 20px; 332 416 } 333 417 334 418 /* button */ ··· 448 532 display: inline-block; 449 533 } 450 534 535 + .alt-popup { 536 + background-color: color-mix(in srgb, var(--background) 85%, transparent); 537 + backdrop-filter: blur(.5rem); 538 + color: var(--foreground); 539 + border: solid 2px var(--accent); 540 + z-index: 1000; 541 + pointer-events: none; 542 + opacity: 0; 543 + border-radius: .5rem; 544 + max-width: 30rem; 545 + padding: .5rem; 546 + font-size: 1rem; 547 + transition: opacity .4s; 548 + position: fixed 549 + } 451 550 .pfp { 452 551 border-radius: 15px; 453 552 border: 2px solid; 454 - border-color: var(--foreground); 553 + border-color: var(--accent); 455 554 width: 70px; 456 555 height: auto; 457 556 } 458 - 459 557 .pfp:hover { 460 558 transition: ease-in-out 0.2s; 461 559 height: auto; 462 - width: 90px; 463 - margin: 1px; 560 + transform: scale(1.35, 1.35); 464 561 } 465 562 466 563 /* show dd content */