my personal website! meowing.zip
website
0
fork

Configure Feed

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

accessibility options to change color scheme and toggle the background and animations

Niko 339514d0 142949b1

+158 -3
+15 -1
about-me.html
··· 19 19 <footer> 20 20 <div style="display: flex;"> 21 21 <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> 22 - <a style=" padding: 20px; text-align: center">about me!<small style="color: var(--subtext); margin-left: 10px; font-size: 12px;">niko's cool and awesome website!~</small></a> 22 + <a style=" padding: 20px; margin-right: 54%;">about me!<small style="color: var(--subtext); margin-left: 10px; font-size: 12px;">niko's cool and awesome website!~</small></a> 23 + <div class="dropdown" style="display: inline-block;" tabindex="1"> 24 + <i class="db2" tabindex="1"></i> 25 + <a style="font-size: 14px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-gear"></i>settings</a> 26 + <div class="settings-popup"> 27 + <a style="margin-bottom: 5px; font-size: 12px; color: light-dark(#d20f39, #f38ba8);">settings saved with javascript enabled</a> 28 + <radio-picker> 29 + <label><input type="radio" name="theme" id="theme-auto" checked>auto</label> 30 + <label><input type="radio" name="theme" id="theme-light">light</label> 31 + <label><input type="radio" name="theme" id="theme-dark">dark</label> 32 + <label><input type="checkbox" id="disable-bg" name="background">toggle background</label> 33 + <label><input type="checkbox" id="disable-animations" name="animations">toggle animations</label> 34 + </radio-picker> 35 + </div> 36 + </div> 23 37 </div> 24 38 <div class="divider"></div> 25 39 <div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
+44 -2
index.html
··· 19 19 var x = document.getElementById("copy-toast"); 20 20 x.className = "show"; 21 21 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); 22 - } 22 + }, 23 + document.addEventListener("DOMContentLoaded", function() { 24 + const t = document.querySelectorAll('input[name="theme"]') 25 + , i = document.getElementById("disable-bg") 26 + , o = document.getElementById("disable-animations"); 27 + function a() { 28 + const t = document.querySelector('input[name="theme"]:checked').value; 29 + localStorage.setItem("theme", t), 30 + localStorage.setItem("disable-bg", i.checked), 31 + localStorage.setItem("disable-animations", o.checked) 32 + } 33 + !function() { 34 + const t = localStorage.getItem("theme"); 35 + if (t) { 36 + const e = document.querySelector(`input[name="theme"][value="${t}"]`); 37 + e && (e.checked = !0) 38 + } 39 + "true" === localStorage.getItem("disable-bg") && (i.checked = !0); 40 + "true" === localStorage.getItem("disable-animations") && (o.checked = !0) 41 + }(), 42 + t.forEach(e => { 43 + e.addEventListener("change", function() { 44 + a() 45 + }) 46 + } 47 + ), 48 + i.addEventListener("change", a), 49 + o.addEventListener("change", a) 50 + }); 23 51 </script> 24 52 </head> 25 53 <link rel="stylesheet" href="styles.css"> 26 54 <footer> 27 55 <div style="display: flex;"> 28 56 <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> 29 - <a style="padding: 20px; text-align: center">niko's cool and awesome website!<small style="color: var(--subtext); margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a> 57 + <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> 58 + <div class="dropdown" style="display: inline-block;" tabindex="1"> 59 + <i class="db2" tabindex="1"></i> 60 + <a style="font-size: 14px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-gear"></i>settings</a> 61 + <div class="settings-popup"> 62 + <a style="margin-bottom: 5px; font-size: 12px; color: light-dark(#d20f39, #f38ba8);">settings saved with javascript enabled</a> 63 + <radio-picker> 64 + <label><input type="radio" name="theme" id="theme-auto" checked>auto</label> 65 + <label><input type="radio" name="theme" id="theme-light">light</label> 66 + <label><input type="radio" name="theme" id="theme-dark">dark</label> 67 + <label><input type="checkbox" id="disable-bg" name="background">toggle background</label> 68 + <label><input type="checkbox" id="disable-animations" name="animations">toggle animations</label> 69 + </radio-picker> 70 + </div> 71 + </div> 30 72 </div> 31 73 <div class="divider"></div> 32 74 <div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
+99
styles.css
··· 1 + radio-picker { 2 + display: flex; 3 + label { 4 + &:has(input:checked) { 5 + box-shadow: inset 0px 0px 8px 0px var(--accent); 6 + } 7 + &:has(input:focus-visible) { 8 + outline: 2px dashed var(--accent); 9 + } 10 + padding: 15px; 11 + cursor: pointer; 12 + background: var(--crust); 13 + &:hover { background: var(--accent); color: var(--crust); } 14 + &:active { background: var(--accent); } 15 + font-size: 14px; 16 + border-radius: 12px; 17 + margin-left: 10px; 18 + outline: 2px dashed var(--accent); 19 + 20 + } 21 + input { 22 + opacity: 0; 23 + position: absolute; 24 + pointer-events: none; 25 + } 26 + } 1 27 bg { 2 28 background: url("./assets/images/pfp.jpg"); 3 29 background-repeat: repeat; ··· 10 36 width: 100% !important; 11 37 inset: 0 !important; 12 38 } 39 + &:has(#disable-bg:checked) { 40 + & body { 41 + background: var(--background); 42 + & bg { 43 + display: none!important; 44 + } 45 + } 46 + } 47 + &:has(#disable-animations:checked) { 48 + & body { 49 + animation: unset!important 50 + } 51 + 52 + & *,& :after { 53 + animation: unset!important; 54 + transition: none!important 55 + } 56 + 57 + & .navbar { 58 + & .important:after { 59 + outline-color: color-mix(in srgb, var(--accent) 60%, transparent) 60 + } 61 + 62 + & details.settings-area { 63 + &: :details-content { 64 + transition:unset!important 65 + } 66 + } 67 + } 68 + 69 + & ticker-container { 70 + animation: 150s linear infinite ticker!important 71 + } 72 + } 13 73 @keyframes bg-move { 14 74 0% { 15 75 background-position: 0 0; ··· 30 90 } 31 91 :root { 32 92 color-scheme: light dark; 93 + &:has(#theme-light:checked) { 94 + color-scheme: light; 95 + } 96 + &:has(#theme-dark:checked) { 97 + color-scheme: dark; 98 + } 33 99 --background: light-dark(#eff1f5, #1e1e2e); 34 100 --crust: light-dark(#dce0e8, #11111b); 35 101 --foreground: light-dark(#4c4f69, #cdd6f4); ··· 273 339 .dropdown-content a:hover { 274 340 background-color: var(--foreground); 275 341 } 342 + .dropdown .settings-popup { 343 + position: absolute; 344 + top: 50%; 345 + margin-top: 8px; 346 + border: 2px solid; 347 + border-color: var(--accent); 348 + border-radius: 15px; 349 + background-color: var(--background); 350 + min-width: 100%; 351 + padding: 5px; 352 + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); 353 + visibility: hidden; 354 + opacity: 0; 355 + transition: 0.2s ease-in-out; 356 + } 357 + .settings-popup a { 358 + color: var(--background); 359 + display: block; 360 + text-decoration: none; 361 + text-align: center; 362 + } 276 363 .web-buttons:hover .web-button { 277 364 transition: ease-in-out 0.2s; 278 365 filter: blur(0.15em); ··· 337 424 z-index: 100 !important; 338 425 opacity: 0.9 !important; 339 426 } 427 + .dropdown:focus .settings-popup { 428 + outline: none; 429 + transform: translateX(-40%) translateY(0px); 430 + visibility: visible; 431 + z-index: 100 !important; 432 + opacity: 0.9 !important; 433 + } 340 434 341 435 .dropbtn:hover, .dropdown:focus .dropbtn { 342 436 background-color: var(--accent); ··· 367 461 visibility: hidden; 368 462 opacity: 0; 369 463 } 464 + .dropdown .db2:focus .settings-popup { 465 + outline: none; 466 + visibility: hidden; 467 + opacity: 0; 468 + }