my personal website!
meowing.zip
website
accessibility options to change color scheme and toggle the background and animations
+158
-3
+15
-1
about-me.html
+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
+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
+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
+
}