my personal website!
meowing.zip
website
redesign this shittt
+132
-528
+68
-262
index.html
+68
-262
index.html
···
14
14
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
15
15
/>
16
16
</head>
17
+
<style>@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');</style>
17
18
<link rel="stylesheet" href="styles.css">
18
-
<footer>
19
-
<div style="display: flex;">
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
-
<a style="padding: 20px; margin-right: 38%; 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" tabindex="1">
23
-
<i class="db2" tabindex="1"></i>
24
-
<a style="font-size: 14px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-gear"></i>settings</a>
25
-
<div id="settings" class="settings-popup">
26
-
<a style="margin: 3px; font-size: 11px; color: light-dark(#d20f39, #f38ba8);">settings saved with javascript enabled</a>
27
-
<radio-picker>
28
-
<a style="justify-content: center; align-items: center; text-align: left; display: flex; font-size: 14px; color: var(--foreground);">theme:</a>
29
-
<label for="theme-auto"><input type="radio" name="theme" id="theme-auto" value="auto" checked>auto</label>
30
-
<label for="theme-light"><input type="radio" name="theme" id="theme-light" value="light">light</label>
31
-
<label for="theme-dark"><input type="radio" name="theme" id="theme-dark" value="dark">dark</label>
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>
39
-
<checkbox-picker>
40
-
<a style="text-align: left; margin-left: 7px; font-size: 14px; color: var(--foreground);">accessibility:</a>
41
-
<label for="disable-bg"><input type="checkbox" id="disable-bg" name="background">disable background</label>
42
-
<label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">disable animations</label>
43
-
</checkbox-picker>
44
-
</div>
45
-
</div>
46
-
</div>
47
-
<div class="divider"></div>
48
-
<div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
49
-
<div class="dropdown" tabindex="1">
50
-
<a class="dropbtn" href="./blog"><i style="margin-right: 5px;" class="ph ph-pen"></i>blog</a>
51
-
</div>
52
-
<div class="dropdown" tabindex="1">
53
-
<i class="db2" tabindex="1"></i>
54
-
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-at"></i>follow me on socials</a>
55
-
<div class="dropdown-content">
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://masto.meowing.zip/@niko" target="_blank">fediverse</a>
58
-
<a style="color: var(--red);" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a>
59
-
</div>
60
-
</div>
61
-
<div class="dropdown" tabindex="1">
62
-
<i class="db2" tabindex="1"></i>
63
-
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-user-plus"></i>add me!</a>
64
-
<div class="dropdown-content">
65
-
<a style="color: var(--light-blue);" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a>
66
-
</div>
67
-
</div>
68
-
<div class="dropdown" tabindex="1">
69
-
<i class="db2" tabindex="1"></i>
70
-
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-chat-circle-dots"></i>contact info</a>
71
-
<div class="dropdown-content">
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>
76
-
</div>
77
-
</div>
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>
79
-
<a style="margin-left: 15px; font-size: 12px; color: var(--subtext);"><i style="margin-right: 5px;" class="ph ph-pen"></i>guestbook (under construction)</a>
80
-
</div>
81
-
</footer>
82
-
83
19
<body>
84
20
<bg-gradient aria-hidden="true"></bg-gradient>
85
21
<bg aria-hidden="true"></bg>
86
22
<div class="main">
87
-
<h3><i style="margin-right: 10px;" class="ph ph-info"></i>who am i?</h3>
88
-
<div class="divider"></div>
23
+
<div class="tab">
24
+
<a href="./notes"><button>notes</button></a>
25
+
<a href="https://asking.synth.download/@meowmaxing"><button>askbox</button></a>
26
+
</div>
89
27
<div class="about">
90
-
<a>
91
-
hiiii!! my name is Niko, this is my lil corner of the web <small style="font-size: 10px;">(waow)</small>!<br><br>
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> !!
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>
94
-
</a>
28
+
<a>hiiii!! my name is Niko, this is my lil corner of the web (waow)!<br><br>
29
+
im a biromantic, asexual, genderfluid individual who likes computer-adjecent things and i also like to do video editing and VFX stuff (every once in a blue moon) !!</a>
30
+
</div>
31
+
<div class="pronouns-box">
32
+
<a>contact:<br></a>
33
+
<i style="color: var(--teal); margin-right: 5px;" class="ph ph-at"></i><a style="color: var(--accent)" href="xmpp:niko@meowing.zip">xmpp<br></a>
34
+
<i style="color: var(--light-blue); margin-right: 5px;" class="ph ph-chat-circle-dots"></i><a style="color: var(--accent)" href="https://signal.me/#eu/2G_wkky5wzpLc8dGMMJZADmtQfS0v_hUHrPxyZ8C0-2dAsNSi0BBcq9gRoNB1bTw">signal<br></a>
35
+
<i style="color: var(--purple); margin-right: 5px;" class="ph ph-discord-logo"></i><a style="color: var(--accent)" href="https://discord.com/users/752389000945467482">discord</a>
36
+
<i style="color: var(--red); margin-right: 5px;" class="ph ph-envelope"></i><a style="color: var(--accent)" href="mailto:niko@meowing.zip">email</a>
37
+
</div>
38
+
<div class="pronouns-box">
39
+
<a>links:<br></a>
40
+
<i style="color: var(--blue); margin-right: 5px;" class="ph ph-butterfly"></i><a style="color: var(--accent)" href="https://bsky.app/profile/meowing.zip">bluesky<br></a>
41
+
<i style="color: var(--teal); margin-right: 5px;" class="ph ph-fediverse-logo"></i><a style="color: var(--accent)" href="https://masto.meowing.zip/@niko">fediverse<br></a>
42
+
<i style="color: var(--red); margin-right: 5px;" class="ph ph-gitlab-logo-simple"></i><a style="color: var(--accent)" href="https://git.gay/meowmaxing">forgejo<br></a>
43
+
<i style="color: var(--red); margin-right: 5px;" class="ph ph-youtube-logo"></i><a style="color: var(--accent)" href="https://youtube.com/@meowingmaxing">youtube</a>
95
44
</div>
96
-
<div style="margin-top: 5px;" class="pronouns-box">
97
-
<h3 style="margin-top: 5px; font-size: 15px;"><i style="margin-right: 10px;" class="ph ph-info"></i>pronouns</h3>
98
-
<div class="divider"></div>
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>
100
-
</div>
101
-
</div>
102
-
<div class="main">
103
-
<h3>what do u use for video editing?</h3>
104
45
<div class="divider"></div>
105
-
<a style="color: var(--purple);">
106
-
adobe premiere pro (SORRY)
107
-
</a>
108
-
<a>-</a>
109
-
<a style="color: var(--purple);">
110
-
adobe after effects (SORRY)
111
-
</a>
112
-
<a style="font-size: 13px;">,</a>
113
-
<a style="color: var(--teal);">
114
-
sometimes davinci resolve when on linux
115
-
</a>
116
-
<div class="divider"></div>
117
-
<h3>what about photo editing?</h3>
118
-
<div class="divider"></div>
119
-
<a style="color: var(--blue);">
120
-
adobe photoshop (SORRY)
121
-
</a>
122
-
<a>,</a>
123
-
<a>
124
-
sometimes gimp when on linux
125
-
</a>
126
-
<div class="divider"></div>
127
-
<h3>what about audio stuff?</h3>
128
-
<div class="divider"></div>
129
-
<a style="color: var(--green);">just reaper...</a>
130
-
</div>
131
-
<div class="main">
132
-
<div style="margin-bottom: 10px">
133
-
<a>a collections of buttons!</a>
134
-
<a style="color: var(--subtext);"><small>sorted alphabetically by domain name</small></a>
135
-
</div>
136
-
<div class="divider"></div>
137
-
<div style="margin-bottom: 10px;">
138
-
<a style="font-size: 14px">friends</a>
139
-
<a style="font-size: 12px; color: var(--subtext);"><small>let me know if you want urs added here!</small></a>
140
-
</div>
141
-
<div class="web-buttons" style="padding: 5px; margin-bottom: 10px">
142
-
<a href="https://aquamarine.gay"><img class="web-button" alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
143
-
<a href="https://atapi.space"><img class="web-button" alt="atapi.space" src="./assets/88x31/friends/atapi.gif"></a>
144
-
<a href="https://byemc.xyz"><img class="web-button" alt="byespace" src="./assets/88x31/friends/byespace.gif"></a>
145
-
<a href="https://daniela.lol"><img class="web-button" alt="daniela.lol" src="./assets/88x31/friends/daniela.gif"></a>
146
-
<a href="https://doskel.net"><img width="88" height="31" class="web-button" alt="doskel.net" src="./assets/88x31/friends/doskel.png"/></a>
147
-
<a href="https://eeep.ee"><img class="web-button" width="88" height="31" alt="a cropped rotated fox face emoji, in shades of gray, meant to looks like a platinum fox" src="./assets/88x31/friends/chfour.svg"/></a>
148
-
<a href="https://enderman0125.ryuen.ca"><img class="web-button" src="./assets/88x31/friends/enderman0125.gif"></a>
149
-
<a href="https://f0urst4r.net/"><img class="web-button" src="./assets/88x31/friends/f0urst4r.gif" alt="F0URST4R" title="F0URST4R"></a>
150
-
<a href="https://ielenia.lgbt"><img class="web-button" alt="ielenia.lgbt" src="./assets/88x31/friends/ielenia.png"></a>
151
-
<a href="https://invoxiplaygames.uk"><img class="web-button" alt="invoxiplaygames.uk" src="./assets/88x31/friends/invoxiplaygames.png"></a>
152
-
<a href="https://jack.cab"><img alt="jack.cab" class="web-button" src="./assets/88x31/friends/jackcab.png"></a>
153
-
<a href="https://jbc.lol"><img class="web-button" src="./assets/88x31/friends/jbc.svg" alt="jb's site" style="image-rendering: pixelated;"/></a>
154
-
<a href="https://notfire.cc"><img class="web-button" alt="notfire.cc" src="./assets/88x31/friends/notfire.gif"></a>
155
-
<a href="https://microspinny.zip"><img class="web-button" alt="microspinny.zip" src="./assets/88x31/friends/microspinny.png"></a>
156
-
<a href="https://potatoe.ca"><img class="web-button" alt="potatoe.ca" src="./assets/88x31/friends/potatoe.png"></a>
157
-
<a href="https://shiver-j.neocities.org"><img class="web-button" alt="shiver j." src="./assets/88x31/friends/shiverj.png"></a>
158
-
<a href="https://sneexy.synth.download"><img class="web-button" src="./assets/88x31/friends/sneexy.svg" alt="Sneexy"></a>
159
-
<a href="https://reimu.info"><img class="web-button" alt="reimu.info" src="./assets/88x31/friends/ezio.png"></a>
160
-
<a href="https://rodents.rodeo"><img class="web-button" alt="rodents.rodeo" src="./assets/88x31/friends/mjdxp.png"></a>
161
-
<a href="https://ry.cd-rom.net"><img class="web-button" alt="ry.cd-rom.net" src="./assets/88x31/friends/ryfox.png"></a>
162
-
<a href="https://thxdeeply.com"><img class="web-button" alt="thxdeeply.com" src="./assets/88x31/friends/thxdeeply.gif"></a>
163
-
<a href="https://w.on-t.work"><img class="web-button" alt="w.on-t.work" src="./assets/88x31/friends/wont-work.png"></a>
164
-
<a href="https://witchfuneral.quest"><img class="web-button" alt="witchfuneral.quest" src="./assets/88x31/friends/witchfuneral.png"></a>
165
-
<a href="https://zenfyr.dev/"><img class="web-button" src="./assets/88x31/friends/zenfyr.webp" alt="zenfyr" title="zenfyr"></a>
166
-
</div>
167
-
<div style="margin-bottom: 10px;">
168
-
<a style="font-size: 14px">others</a>
169
-
</div>
170
-
<div class="other-web-buttons" style="padding: 5px; margin-bottom: 20px;">
171
-
<a href="https://epicblazed.com"><img class="web-button" alt="epicblazed" src="./assets/88x31/others/epicblazed.png"></a>
46
+
<div style="margin-bottom: 10px;">
47
+
<a style="font-size: 14px">friends</a>
48
+
</div>
49
+
<div class="web-buttons" style="padding: 5px; margin-bottom: 10px">
50
+
<a href="https://aquamarine.gay"><img class="web-button" alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
51
+
<a href="https://atapi.space"><img class="web-button" alt="atapi.space" src="./assets/88x31/friends/atapi.gif"></a>
52
+
<a href="https://byemc.xyz"><img class="web-button" alt="byespace" src="./assets/88x31/friends/byespace.gif"></a>
53
+
<a href="https://daniela.lol"><img class="web-button" alt="daniela.lol" src="./assets/88x31/friends/daniela.gif"></a>
54
+
<a href="https://doskel.net"><img width="88" height="31" class="web-button" alt="doskel.net" src="./assets/88x31/friends/doskel.png"/></a>
55
+
<a href="https://eeep.ee"><img class="web-button" width="88" height="31" alt="a cropped rotated fox face emoji, in shades of gray, meant to looks like a platinum fox" src="./assets/88x31/friends/chfour.svg"/></a>
56
+
<a href="https://enderman0125.ryuen.ca"><img class="web-button" src="./assets/88x31/friends/enderman0125.gif"></a>
57
+
<a href="https://f0urst4r.net/"><img class="web-button" src="./assets/88x31/friends/f0urst4r.gif" alt="F0URST4R" title="F0URST4R"></a>
58
+
<a href="https://ielenia.lgbt"><img class="web-button" alt="ielenia.lgbt" src="./assets/88x31/friends/ielenia.png"></a>
59
+
<a href="https://invoxiplaygames.uk"><img class="web-button" alt="invoxiplaygames.uk" src="./assets/88x31/friends/invoxiplaygames.png"></a>
60
+
<a href="https://jack.cab"><img alt="jack.cab" class="web-button" src="./assets/88x31/friends/jackcab.png"></a>
61
+
<a href="https://jbc.lol"><img class="web-button" src="./assets/88x31/friends/jbc.svg" alt="jb's site" style="image-rendering: pixelated;"/></a>
62
+
<a href="https://notfire.cc"><img class="web-button" alt="notfire.cc" src="./assets/88x31/friends/notfire.gif"></a>
63
+
<a href="https://microspinny.zip"><img class="web-button" alt="microspinny.zip" src="./assets/88x31/friends/microspinny.png"></a>
64
+
<a href="https://potatoe.ca"><img class="web-button" alt="potatoe.ca" src="./assets/88x31/friends/potatoe.png"></a>
65
+
<a href="https://shiver-j.neocities.org"><img class="web-button" alt="shiver j." src="./assets/88x31/friends/shiverj.png"></a>
66
+
<a href="https://sneexy.synth.download"><img class="web-button" src="./assets/88x31/friends/sneexy.svg" alt="Sneexy"></a>
67
+
<a href="https://reimu.info"><img class="web-button" alt="reimu.info" src="./assets/88x31/friends/ezio.png"></a>
68
+
<a href="https://rodents.rodeo"><img class="web-button" alt="rodents.rodeo" src="./assets/88x31/friends/mjdxp.png"></a>
69
+
<a href="https://ry.cd-rom.net"><img class="web-button" alt="ry.cd-rom.net" src="./assets/88x31/friends/ryfox.png"></a>
70
+
<a href="https://thxdeeply.com"><img class="web-button" alt="thxdeeply.com" src="./assets/88x31/friends/thxdeeply.gif"></a>
71
+
<a href="https://w.on-t.work"><img class="web-button" alt="w.on-t.work" src="./assets/88x31/friends/wont-work.png"></a>
72
+
<a href="https://witchfuneral.quest"><img class="web-button" alt="witchfuneral.quest" src="./assets/88x31/friends/witchfuneral.png"></a>
73
+
<a href="https://zenfyr.dev/"><img class="web-button" src="./assets/88x31/friends/zenfyr.webp" alt="zenfyr" title="zenfyr"></a>
74
+
</div>
75
+
<div style="margin-bottom: 10px;">
76
+
<a style="font-size: 14px">others</a>
77
+
</div>
78
+
<div class="other-web-buttons" style="padding: 5px; margin-bottom: 20px;">
79
+
<a href="https://epicblazed.com"><img class="web-button" alt="epicblazed" src="./assets/88x31/others/epicblazed.png"></a>
172
80
<a href="https://firefox.com"><img class="web-button" alt="i dont give a FUCK about safari" src="./assets/88x31/others/idgaf-abt-safari.png"></a>
173
-
<a href="https://googleballs.com"><img class="web-button" alt="googleballs.com" src="./assets/88x31/others/google-balls.png"></a>
174
-
<a href="https://smokepowered.com"><img class="web-button" alt="smokepowered.com" src="./assets/88x31/others/smokepowered.gif"></a>
175
-
<a href="https://starlightnet.work"><img class="web-button" loading="lazy" src="./assets/88x31/others/starlight-network.png" alt="The Starlight Network"></a>
176
-
<a href="https://synth.download"><img class="web-button" src="./assets/88x31/others/synth.download.svg" alt="Synth.Download!"></a>
81
+
<a href="https://googleballs.com"><img class="web-button" alt="googleballs.com" src="./assets/88x31/others/google-balls.png"></a>
82
+
<a href="https://smokepowered.com"><img class="web-button" alt="smokepowered.com" src="./assets/88x31/others/smokepowered.gif"></a>
83
+
<a href="https://starlightnet.work"><img class="web-button" loading="lazy" src="./assets/88x31/others/starlight-network.png" alt="The Starlight Network"></a>
84
+
<a href="https://synth.download"><img class="web-button" src="./assets/88x31/others/synth.download.svg" alt="Synth.Download!"></a>
85
+
</div>
86
+
<div style="margin-bottom: 10px;">
87
+
<a style="font-size: 14px">and here is mine!</a>
88
+
<a style="font-size: 12px; color: var(--subtext);"><small>feel free to add mine (hotlinking is ok!, click the button to copy the html)</small></a>
89
+
</div>
90
+
<div class="my-button" style="padding: 5px;">
91
+
<a onclick="copyButton()"><img class="web-button" src="./assets/88x31/button.png" alt="my cool ass button"></a>
92
+
</div>
177
93
</div>
178
-
<div style="margin-bottom: 10px;">
179
-
<a style="font-size: 14px">and here is mine!</a>
180
-
<a style="font-size: 12px; color: var(--subtext);"><small>feel free to add mine (hotlinking is ok!, click the button to copy the html)</small></a>
181
-
</div>
182
-
<div class="my-button" style="padding: 5px;">
183
-
<a onclick="copyButton()"><img class="web-button" src="./assets/88x31/button.png" alt="my cool ass button"></a>
184
-
</div>
185
-
</div>
186
-
<a style="color: var(--accent); padding: 10px;" href="https://git.gay/meowmaxing/website"><small>website source!</small></a>
187
-
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T23:45:53Z</small></a>
188
-
<span id="copy-toast"><i style="margin-right: 5px; color: var(--green)" class="ph ph-clipboard-text"></i>copied to clipboard!</span>
189
-
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
190
94
</body>
191
-
<script>
192
-
function copyButton() {
193
-
navigator.clipboard.writeText('<a href="https://meowing.zip"><img src="https://meowing.zip/assets/88x31/button.png" alt="meowing.zip"></a>');
194
-
var x = document.getElementById("copy-toast");
195
-
x.className = "show";
196
-
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
197
-
}
198
-
document.addEventListener("DOMContentLoaded", function() {
199
-
const t = document.querySelectorAll('input[name="theme"]')
200
-
, c = document.querySelectorAll('input[name="color"]')
201
-
, i = document.getElementById("disable-bg")
202
-
, o = document.getElementById("disable-animations");
203
-
function a() {
204
-
const t = document.querySelector('input[name="theme"]:checked').value;
205
-
const c = document.querySelector('input[name="color"]:checked').value;
206
-
localStorage.setItem("disable-bg", i.checked),
207
-
localStorage.setItem("disable-animations", o.checked)
208
-
}
209
-
!function() {
210
-
const t = localStorage.getItem("theme");
211
-
if (t) {
212
-
const e = document.querySelector(`input[name="theme"][value="${t}"]`);
213
-
e && (e.checked = !0)
214
-
}
215
-
const c = localStorage.getItem("color");
216
-
if (c) {
217
-
const e = document.querySelector(`input[name="color"][value="${t}"]`);
218
-
e && (e.checked = !0)
219
-
}
220
-
"true" === localStorage.getItem("disable-bg") && (i.checked = !0);
221
-
"true" === localStorage.getItem("disable-animations") && (o.checked = !0)
222
-
}(),
223
-
document.addEventListener("DOMContentLoaded", function() {
224
-
let e = document.getElementById("alt-popup");
225
-
function t() {
226
-
document.querySelectorAll("[alt], [aria-label]").forEach(e => {
227
-
e.addEventListener("mousemove", n),
228
-
e.addEventListener("mouseout", i)
229
-
}
230
-
)
231
-
}
232
-
function n(t) {
233
-
const n = t.target.getAttribute("alt")
234
-
, i = t.target.getAttribute("aria-label")
235
-
, o = n || i;
236
-
if (o) {
237
-
e.textContent = o,
238
-
e.style.opacity = "0",
239
-
e.style.visibility = "visible",
240
-
e.style.position = "fixed";
241
-
const n = window.innerWidth
242
-
, i = window.innerHeight
243
-
, c = e.offsetWidth
244
-
, a = e.offsetHeight;
245
-
let l = t.clientX + 20
246
-
, s = t.clientY + 20;
247
-
l + c > n && (l = t.clientX - c - 10),
248
-
s + a > i && (s = t.clientY - a - 10),
249
-
l < 0 && (l = 10),
250
-
s < 0 && (s = 10),
251
-
e.style.left = l + "px",
252
-
e.style.top = s + "px",
253
-
e.style.opacity = "1",
254
-
e.style.visibility = "visible"
255
-
}
256
-
}
257
-
function i() {
258
-
e.style.opacity = "0",
259
-
e.style.visibility = "hidden"
260
-
}
261
-
if (t(),
262
-
window.MutationObserver) {
263
-
const e = new MutationObserver(e => {
264
-
e.forEach(e => {
265
-
e.addedNodes.length && t()
266
-
}
267
-
)
268
-
}
269
-
);
270
-
document.body && e.observe(document.body, {
271
-
childList: !0,
272
-
subtree: !0
273
-
})
274
-
}
275
-
}),
276
-
t.forEach(e => {
277
-
e.addEventListener("change", function() {
278
-
a()
279
-
})
280
-
}
281
-
),
282
-
i.addEventListener("change", a),
283
-
o.addEventListener("change", a)
284
-
});
285
-
</script>
286
-
<a rel="me" href="https://fuzzies.wtf/@gayfamicom"></a>
287
-
<a rel="me" href="https://app.wafrn.net/blog/gayfamicom"></a>
95
+
<script src="./script.js"></script>
288
96
<a rel="me" href="https://merping.synth.download/@meowmaxing"></a>
289
-
<a rel="me" href="https://booping.synth.download/@gayfamicom"></a>
290
-
<a rel="me" href="https://waf.moe/blog/gayfamicom"></a>
291
97
</html>
+64
-266
styles.css
+64
-266
styles.css
···
37
37
}
38
38
}
39
39
input[type="checkbox"] {
40
-
/* Add if not using autoprefixer */
41
40
-webkit-appearance: none;
42
41
appearance: none;
43
-
/* For iOS < 15 to remove gradient background */
44
42
background-color: #fff;
45
-
/* Not removed via appearance */
46
43
margin: 0;
47
44
font: inherit;
48
45
color: var(--crust);
···
140
137
height: 100%!important;
141
138
inset: 0 !important;
142
139
}
140
+
.tab {
141
+
overflow: hidden;
142
+
}
143
+
.tab button {
144
+
background-color: inherit;
145
+
float: left;
146
+
border: none;
147
+
outline: none;
148
+
cursor: pointer;
149
+
padding: 8px 10px;
150
+
transition: 0.3s;
151
+
border: 2px solid var(--accent);
152
+
border-radius: 12px 12px 0 0;
153
+
background-color: var(--background);
154
+
border-bottom: none;
155
+
margin-right: 5px;
156
+
font-family: inherit;
157
+
position: relative;
158
+
display: inline-block;
159
+
}
160
+
.tab button:hover {
161
+
background-color: rgba(0,0,0,0.15);
162
+
}
163
+
.tab button.active {
164
+
background-color: rgba(0,0,0,0.15);
165
+
}
166
+
167
+
/* Style the tab content */
168
+
.tabcontent {
169
+
display: none;
170
+
padding: 3px 10px;
171
+
background-color: var(--background);
172
+
border: 2px solid var(--accent);
173
+
border-top: none;
174
+
border-radius: 0 0 12px 12px;
175
+
position: absolute;
176
+
transform: translate(0, -36px);
177
+
}
143
178
:root {
179
+
font-family: "Sour Gummy", monospace;
144
180
color-scheme: light dark;
145
181
&:has(#theme-light:checked) {
146
182
color-scheme: light;
···
230
266
position: fixed;
231
267
opacity: 0.8;
232
268
}
233
-
234
-
/* This will be activated when the snackbar's class is 'show' which will be added through JS */
235
269
#copy-toast.show {
236
270
visibility: visible;
237
271
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
···
287
321
opacity: 0;
288
322
}
289
323
}
290
-
button {
291
-
font-family: "Iosevka Aile", monospace;
292
-
font-size: 17px;
293
-
border-radius: 10px;
324
+
.settings-button {
325
+
background-color: var(--background);
326
+
outline: 2px dashed var(--accent);
327
+
border-radius: 12px;
328
+
padding: 10px;
329
+
transform: translate(10px, 0);
294
330
}
295
331
body {
296
-
display: table;
297
332
background-color: var(--background);
298
333
color: var(--foreground);
299
-
font-family: "Iosevka Aile", monospace;
300
334
margin: 10px auto;
301
335
max-width: 1200px;
302
336
min-width: 400px;
303
337
}
304
338
.divider {
305
-
border-top: 2px dashed;
306
-
border-color: var(--divider-color);
339
+
border-top: 2px dashed var(--divider-color);
307
340
margin: 20px auto;
308
341
}
309
342
.main {
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
-
}
343
+
background-color: var(--background);
320
344
margin-top: 20px;
321
345
outline: 2px solid;
322
346
outline-color: var(--accent);
323
-
border-radius: 25px;
347
+
border-radius: 12px;
324
348
padding: 20px;
325
349
box-shadow: inset 0px 0px 0px 0px var(--accent);
350
+
position: fixed;
351
+
top: 50%;
352
+
left: 50%;
353
+
-webkit-transform: translate(-50%, -50%);
354
+
transform: translate(-50%, -50%);
355
+
width: 900px;
356
+
padding-top: 0;
326
357
}
327
-
.main a {
328
-
font-size: 13px;
358
+
.main .tab {
359
+
transform: translate(0, -36px);
329
360
}
330
361
.main .about {
331
-
text-align: "left";
332
-
margin-top: 10px;
333
-
width: 50%;
362
+
text-align: left;
363
+
width: 60%;
334
364
display: inline-block;
335
365
}
336
366
.main .pronouns-box {
337
-
background-color: light-dark(#dce0e880, #11111b80);
338
-
&:has(#theme-dracula:checked) {
339
-
background-color: light-dark(#FFFBEB80, #282A3680);
340
-
}
341
-
margin-top: 20px;
342
-
outline: 2px solid;
343
-
outline-color: var(--accent);
344
-
border-radius: 25px;
345
-
padding: 20px;
346
-
width: 35%;
367
+
width: 15%;
347
368
display: inline-block;
348
-
margin-left: 100px;
349
-
}
350
-
.main:hover {
351
-
outline: 5px dashed;
352
-
outline-color: var(--accent);
353
-
background-color: var(--crust);
354
-
transform: scale(1.01, 1.01);
355
-
transition: ease-in-out 0.3s;
356
-
box-shadow: inset 0px 0px 25px 0px var(--accent);
357
-
}
358
-
.pronouns-box:hover {
359
-
outline: 5px dashed;
360
-
outline-color: var(--accent);
361
-
opacity: 1;
362
-
background-color: var(--crust);
363
-
transform: scale(1.01, 1.01);
364
-
transition: ease-in-out 0.3s;
365
-
box-shadow: inset 0px 0px 25px 0px var(--accent);
366
-
}
367
-
footer {
368
-
font-family: "Iosevka Aile", monospace;
369
-
color: var(--foreground);
370
-
font-size: 20px;
371
-
background-color: var(--crust);
372
-
padding: 15px;
373
-
outline: 2px solid;
374
-
outline-color: var(--accent);
375
-
border-radius: 25px;
376
-
margin-top: 10px;
377
-
opacity: 0.7;
378
-
width: 1200px;
379
-
box-shadow: 10px 5px 10px var(--crust);
380
-
}
381
-
footer:hover {
382
-
outline: 5px dashed;
383
-
outline-color: var(--accent);
384
-
opacity: 1;
385
-
transform: scale(1.01, 1.01);
386
-
transition: ease-in-out 0.3s;
387
-
}
388
-
389
-
.form-input {
390
-
margin-bottom: 11px;
391
-
}
392
-
393
-
.form-input_message {
394
-
display: block;
395
-
margin-top: 10px;
396
-
color: var(--accent);
397
-
border: 1px solid;
398
-
border-color: var(--accent);
399
-
border-radius: 10px;
400
-
background: var(--background);
401
-
padding: 10px;
402
-
resize: both;
403
-
overflow: hidden;
404
-
font-family: "Iosevka Aile", monospace;
405
-
}
406
-
407
-
/* dd container */
408
-
.dropdown {
409
-
display: inline-block;
410
-
position: relative;
411
-
outline: none;
412
-
}
413
-
.dropdown a {
414
-
border: 0px soild transparent;
415
-
border-radius: 20px;
416
-
}
417
-
418
-
/* button */
419
-
.dropbtn {
420
-
color: var(--accent);
421
-
border: 2px dashed;
422
-
border-color: var(--accent);
423
-
border-radius: 15px;
424
-
background: var(--background);
425
-
padding: 8px;
426
-
}
427
-
.input {
428
-
color: var(--accent);
429
-
border: 1px solid;
430
-
border-color: var(--accent);
431
-
border-radius: 10px;
432
-
background: var(--background);
433
-
padding: 7px;
434
-
font-family: "Iosevka Aile", monospace;
435
-
}
436
-
437
-
.guest {
438
-
border: 2px dashed;
439
-
border-color: var(--accent);
440
-
padding: 10px;
441
-
color: var(--accent);
442
-
background: var(--background);
443
-
font-family: "Iosevka Aile", monospace;
444
-
}
445
-
446
-
/* dd content */
447
-
.dropdown .dropdown-content {
448
-
position: absolute;
449
-
top: 50%;
450
-
margin-top: 8px;
451
-
border: 2px solid;
452
-
border-color: var(--accent);
453
-
border-radius: 15px;
454
-
background-color: var(--background);
455
-
min-width: 100%;
456
-
padding: 5px;
457
-
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
458
-
visibility: hidden;
459
-
opacity: 0;
460
-
transition: 0.2s ease-in-out;
461
-
}
462
-
.dropdown-content a {
463
-
color: var(--background);
464
-
padding: 8px 0;
465
-
display: block;
466
-
text-decoration: none;
467
-
transition: 0.2s ease-in-out;
468
-
text-align: center;
469
-
}
470
-
.dropdown-content a:hover {
471
-
background-color: var(--foreground);
472
-
}
473
-
.dropdown .settings-popup {
474
-
position: absolute;
475
-
top: 50%;
476
-
margin-top: 8px;
477
-
border: 2px solid;
478
-
border-color: var(--accent);
479
-
border-radius: 15px;
480
-
background-color: var(--background);
481
-
min-width: 100%;
482
-
padding: 5px;
483
-
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
484
-
visibility: hidden;
485
-
opacity: 0;
486
-
transition: 0.2s ease-in-out;
487
-
}
488
-
.settings-popup a {
489
-
color: var(--background);
490
-
display: block;
491
-
text-decoration: none;
492
-
text-align: center;
369
+
margin-bottom: 20px;
370
+
text-align: left;
371
+
margin-left: 40px;
493
372
}
494
373
.web-buttons:hover .web-button {
495
374
transition: ease-in-out 0.2s;
···
499
378
.web-buttons .web-button:hover {
500
379
transition: ease-in-out 0.3s;
501
380
outline: solid 2px;
502
-
border-radius: 10px;
381
+
border-radius: 5px;
503
382
outline-color: var(--accent);
504
383
filter: blur(0);
505
384
box-shadow: 0px 0px 10px var(--foreground);
506
385
transform: scale(1.3, 1.3) translateX(-10px) translateY(-2px);
507
-
display: inline-block;
508
386
}
509
387
.other-web-buttons:hover .web-button {
510
388
transition: ease-in-out 0.2s;
···
531
409
transform: scale(1.4, 1.4);
532
410
display: inline-block;
533
411
}
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
-
}
550
-
.pfp {
551
-
border-radius: 15px;
552
-
border: 2px solid;
553
-
border-color: var(--accent);
554
-
width: 70px;
555
-
height: auto;
556
-
}
557
-
.pfp:hover {
558
-
transition: ease-in-out 0.45s;
559
-
height: auto;
560
-
transform: scale(1.45, 1.45);
561
-
}
562
-
563
-
/* show dd content */
564
-
.dropdown:focus .dropdown-content {
565
-
outline: none;
566
-
transform: translateY(18px);
567
-
visibility: visible;
568
-
z-index: 100 !important;
569
-
opacity: 0.9 !important;
570
-
}
571
-
.dropdown:focus .settings-popup {
572
-
outline: none;
573
-
transform: translateX(-40%) translateY(0px);
574
-
visibility: visible;
575
-
z-index: 100 !important;
576
-
opacity: 0.9 !important;
577
-
}
578
-
579
-
.dropbtn:hover, .dropdown:focus .dropbtn {
580
-
background-color: var(--accent);
581
-
color: var(--background);
582
-
border-color: var(--background);
583
-
transition: ease-in-out 0.5s;
584
-
position: relative;
585
-
padding: 10px;
586
-
box-shadow: inset 0px 0px 25px 0px var(--crust);
587
-
}
588
-
589
-
/* mask to close menu by clicking on the button */
590
-
.dropdown .db2 {
591
-
position: absolute;
592
-
top: 0;
593
-
right: 0;
594
-
bottom: 0;
595
-
left: 0;
596
-
opacity: 0;
597
-
cursor: pointer;
598
-
z-index: 10;
599
-
display: none;
600
-
}
601
-
.dropdown:focus .db2 {
602
-
display: inline-block;
603
-
}
604
-
.dropdown .db2:focus .dropdown-content {
605
-
outline: none;
606
-
visibility: hidden;
607
-
opacity: 0;
608
-
}
609
-
.dropdown .db2:focus .settings-popup {
610
-
outline: none;
611
-
visibility: hidden;
612
-
opacity: 0;
613
-
}