my personal website!
meowing.zip
website
improved the setting dropdown a bit!
+60
-10
+11
-7
index.html
+11
-7
index.html
···
19
19
<div style="display: flex;">
20
20
<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>
21
21
<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>
22
-
<div class="dropdown" style="display: inline-block;" tabindex="1">
22
+
<div class="dropdown" tabindex="1">
23
23
<i class="db2" tabindex="1"></i>
24
24
<a style="font-size: 14px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-gear"></i>settings</a>
25
-
<div class="settings-popup">
25
+
<div id="settings" class="settings-popup">
26
26
<a style="margin-bottom: 5px; font-size: 12px; color: light-dark(#d20f39, #f38ba8);">settings saved with javascript enabled</a>
27
27
<radio-picker>
28
+
<a style="font-size: 14px; color: var(--foreground); margin-top: 9px;">theme:</a>
28
29
<label for="theme-auto"><input type="radio" name="theme" id="theme-auto" value="auto" checked>auto</label>
29
30
<label for="theme-light"><input type="radio" name="theme" id="theme-light" value="light">light</label>
30
31
<label for="theme-dark"><input type="radio" name="theme" id="theme-dark" value="dark">dark</label>
31
-
<label for="disable-bg"><input type="checkbox" id="disable-bg" name="background">toggle background</label>
32
-
<label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">toggle animations</label>
33
32
</radio-picker>
33
+
<checkbox-picker>
34
+
<a style="font-size: 14px; color: var(--foreground);">accessibility:</a>
35
+
<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>
37
+
</checkbox-picker>
34
38
</div>
35
39
</div>
36
40
</div>
···
41
45
</div>
42
46
<div class="dropdown" tabindex="1">
43
47
<i class="db2" tabindex="1"></i>
44
-
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-at"></i>follow me on socials</a>
48
+
<a href="#" style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-at"></i>follow me on socials</a>
45
49
<div class="dropdown-content">
46
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>
47
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>
···
50
54
</div>
51
55
<div class="dropdown" tabindex="1">
52
56
<i class="db2" tabindex="1"></i>
53
-
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-user-plus"></i>add me!</a>
57
+
<a href="#" style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-user-plus"></i>add me!</a>
54
58
<div class="dropdown-content">
55
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>
56
60
</div>
···
172
176
</div>
173
177
</div>
174
178
<a style="color: var(--accent); padding: 10px;" href="https://git.gay/meowmaxing/website"><small>website source!</small></a>
175
-
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T01:03:26Z</small></a>
179
+
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T23:45:53Z</small></a>
176
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>
177
181
</body>
178
182
<script>
+49
-3
styles.css
+49
-3
styles.css
···
1
1
radio-picker {
2
2
display: flex;
3
+
padding: 8px;
3
4
label {
4
5
&:has(input:checked) {
5
6
box-shadow: inset 0px 0px 8px 0px var(--accent);
···
7
8
&:has(input:focus-visible) {
8
9
outline: 2px dashed var(--accent);
9
10
}
10
-
padding: 15px;
11
+
padding: 5px;
12
+
margin: 5px;
11
13
cursor: pointer;
12
14
background: var(--crust);
13
15
&:hover { background: var(--accent); color: var(--crust); }
14
16
&:active { background: var(--accent); }
15
17
font-size: 14px;
16
18
border-radius: 12px;
17
-
margin-left: 10px;
18
19
outline: 2px dashed var(--accent);
19
-
20
20
}
21
21
input {
22
22
opacity: 0;
23
23
position: absolute;
24
24
pointer-events: none;
25
25
}
26
+
}
27
+
checkbox-picker {
28
+
label {
29
+
cursor: pointer;
30
+
&:hover { background: var(--accent); color: var(--crust); }
31
+
&:active { background: var(--accent); }
32
+
font-size: 14px;
33
+
padding: 5px;
34
+
border-radius: 12px;
35
+
display: flex;
36
+
}
37
+
}
38
+
input[type="checkbox"] {
39
+
/* Add if not using autoprefixer */
40
+
-webkit-appearance: none;
41
+
appearance: none;
42
+
/* For iOS < 15 to remove gradient background */
43
+
background-color: #fff;
44
+
/* Not removed via appearance */
45
+
margin: 0;
46
+
font: inherit;
47
+
color: var(--crust);
48
+
width: 1.15em;
49
+
height: 1.15em;
50
+
border: 0.15em solid var(--accent);
51
+
border-radius: 0.25em;
52
+
transform: translateY(-0.075em);
53
+
margin-right: 2px;
54
+
margin-top: 2px;
55
+
display: grid;
56
+
place-content: center;
57
+
}
58
+
input[type="checkbox"]::before {
59
+
content: "";
60
+
width: 0.65em;
61
+
height: 0.65em;
62
+
transform: scale(0);
63
+
transition: 120ms transform ease-in-out;
64
+
box-shadow: inset 1em 1em var(--accent);
65
+
border-radius: 0.25em;
66
+
transform-origin: bottom left;
67
+
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
68
+
}
69
+
70
+
input[type="checkbox"]:checked::before {
71
+
transform: scale(1);
26
72
}
27
73
bg {
28
74
background: url("./assets/images/pfp.jpg");