my personal website!
meowing.zip
website
im such a CHUDDDD
+62
-68
+3
-3
about-me.html
+3
-3
about-me.html
···
9
9
<footer>
10
10
<div style="display: flex;">
11
11
<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>
12
-
<a style=" padding: 20px; text-align: center">about me!<small style="color: light-dark(var(--light-subtext), var(--dark-subtext)); margin-left: 10px; font-size: 12px;">niko's cool and awesome website!~</small></a>
12
+
<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>
13
13
</div>
14
14
<div class="divider"></div>
15
15
<div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
···
82
82
<div class="divider"></div>
83
83
<a style="color: light-dark(#40a02b, #a6e3a1); font-size: 13px;">just reaper...</a>
84
84
</div>
85
-
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
86
-
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;"><small>last modified: 2026-04-07T01:07:26Z</small></a>
85
+
<a style="color: var(--accent); padding: 10px;" href="https://git.gay/gayfamicom/pages"><small>website source!</small></a>
86
+
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-07T01:07:26Z</small></a>
87
87
</body>
88
88
</html>
+5
-5
guestbook.html
+5
-5
guestbook.html
···
7
7
<link rel="stylesheet" href="styles.css">
8
8
<footer>
9
9
<div style="display: flex;">
10
-
<img style="border-radius: 15px; border: 2px solid; border-color: light-dark(var(--light-accent), var(--dark-accent)); width: 70px; height: auto" src="./assets/images/pfp.jpg" alt="fursona">
11
-
<a style=" padding: 20px; text-align: center">sign my guestbook<small style="color: light-dark(var(--light-subtext), var(--dark-subtext)); margin-left: 10px; font-size: 12px;">niko's cool and awesome website!~</small></a>
10
+
<img style="border-radius: 15px; border: 2px solid; border-color: var(--accent); width: 70px; height: auto" src="./assets/images/pfp.jpg" alt="fursona">
11
+
<a style=" padding: 20px; text-align: center">sign my guestbook<small style="color: var(--subtext); margin-left: 10px; font-size: 12px;">niko's cool and awesome website!~</small></a>
12
12
</div>
13
13
</div>
14
14
<div class="divider"></div>
···
57
57
<div class="main">
58
58
<div style="margin-bottom: 10px">
59
59
<a>sign my guestbook</a>
60
-
<a style="color: light-dark(var(--light-subtext), var(--dark-subtext));"><small>maybe..</small></a>
60
+
<a style="color: var(--subtext);"><small>maybe..</small></a>
61
61
</div>
62
62
<div class="divider"></div>
63
63
<form id="guestForm">
···
75
75
<button style="margin-left: 142px;" class="dropbtn" type="submit">sign</button>
76
76
</form>
77
77
</div>
78
-
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
79
-
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;"><small>last modified: 2026-03-24T04:36:46Z</small></a>
78
+
<a style="color: var(--accent); padding: 10px;" href="https://git.gay/gayfamicom/pages"><small>website source!</small></a>
79
+
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-03-24T04:36:46Z</small></a>
80
80
</body>
+7
-7
index.html
+7
-7
index.html
···
8
8
<footer>
9
9
<div style="display: flex;">
10
10
<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>
11
-
<a style="padding: 20px; text-align: center">niko's cool and awesome website!<small style="color: light-dark(var(--light-subtext), var(--dark-subtext)); margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a>
11
+
<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>
12
12
</div>
13
13
<div class="divider"></div>
14
14
<div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
···
44
44
<a style="color: light-dark(#e64553, #eba0ac); border: 0px soild transparent; border-radius: 20px;" href="mailto:mail@meowing.zip">email</a>
45
45
</div>
46
46
</div>
47
-
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">gallery (under construction)</a>
48
-
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">guestbook (under construction)</a>
47
+
<a style="margin-left: 15px; font-size: 12px; color: var(--subtext);">gallery (under construction)</a>
48
+
<a style="margin-left: 15px; font-size: 12px; color: var(--subtext);">guestbook (under construction)</a>
49
49
</div>
50
50
</footer>
51
51
···
55
55
<div class="main">
56
56
<div style="margin-bottom: 10px">
57
57
<a>a collections of buttons!</a>
58
-
<a style="color: light-dark(var(--light-subtext), var(--dark-subtext));"><small>sorted alphabetically by domain name</small></a>
58
+
<a style="color: var(--subtext);"><small>sorted alphabetically by domain name</small></a>
59
59
</div>
60
60
<div class="divider"></div>
61
61
<div style="margin-bottom: 10px;">
62
62
<a style="font-size: 14px">friends</a>
63
-
<a style="font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));"><small>let me know if you want urs added here!</small></a>
63
+
<a style="font-size: 12px; color: var(--subtext);"><small>let me know if you want urs added here!</small></a>
64
64
</div>
65
65
<div class="web-buttons" style="padding: 5px; margin-bottom: 10px">
66
66
<a href="https://aquamarine.gay"><img class="web-button" alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
···
105
105
<a href="https://gayfamicom.lol"><img class="web-button" src="./assets/88x31/gayfamicom.png" alt="my cool ass button"></a>
106
106
</div>
107
107
</div>
108
-
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
109
-
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;"><small>last modified: 2026-04-07T01:07:26Z</small></a>
108
+
<a style="color: var(--accent); padding: 10px;" href="https://git.gay/gayfamicom/pages"><small>website source!</small></a>
109
+
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-07T01:07:26Z</small></a>
110
110
</body>
111
111
<a rel="me" href="https://fuzzies.wtf/@gayfamicom"></a>
112
112
<a rel="me" href="https://app.wafrn.net/blog/gayfamicom"></a>
+47
-53
styles.css
+47
-53
styles.css
···
20
20
}
21
21
}
22
22
bg-gradient {
23
-
background: linear-gradient(color-mix(in srgb, light-dark(var(--light-accent), var(--dark-accent)) 5%, light-dark(var(--light-background), var(--dark-background))), color-mix(in srgb, light-dark(var(--light-accent), var(--dark-accent)) 30%, light-dark(var(--light-background), var(--dark-background))));
23
+
background: linear-gradient(color-mix(in srgb, var(--accent) 5%, var(--background)), color-mix(in srgb, var(--accent) 30%, var(--background)));
24
24
z-index: -100001;
25
25
background-repeat: repeat;
26
26
position: fixed;
···
30
30
}
31
31
:root {
32
32
color-scheme: light dark;
33
-
--dark-background: #1e1e2e;
34
-
--dark-crust: #11111b;
35
-
--dark-text: #cdd6f4;
36
-
--dark-subtext: #45475a;
37
-
--dark-divider: #313244;
38
-
--dark-accent: #cba6f7;
39
-
--light-background: #eff1f5;
40
-
--light-crust: #dce0e8;
41
-
--light-text: #4c4f69;
42
-
--light-subtext: #7c7f93;
43
-
--light-divider: #9ca0b0;
44
-
--light-accent: #8839ef;
33
+
--background: light-dark(#eff1f5, #1e1e2e);
34
+
--crust: light-dark(#dce0e8, #11111b);
35
+
--foreground: light-dark(#4c4f69, #cdd6f4);
36
+
--subtext: light-dark(#7c7f93, #45475a);
37
+
--divider-color: light-dark(#8839ef, #9ca0b0);
38
+
--accent: light-dark(#8839ef, #cba6f7);
45
39
}
46
40
button {
47
41
font-family: "Iosevka Aile", monospace;
···
50
44
}
51
45
body {
52
46
display: table;
53
-
background-color: light-dark(var(--light-background), var(--dark-background));
54
-
color: light-dark(var(--light-text), var(--dark-text));
47
+
background-color: var(--background);
48
+
color: var(--foreground);
55
49
font-family: "Iosevka Aile", monospace;
56
50
margin: 10px auto;
57
51
max-width: 1200px;
···
59
53
}
60
54
.divider {
61
55
border-top: 2px dashed;
62
-
border-color: light-dark(var(--light-divider), var(--dark-divider));
56
+
border-color: var(--divider-color);
63
57
margin: 20px auto;
64
58
}
65
59
.main {
66
-
background-color: light-dark(var(--light-crust), var(--dark-crust));
60
+
background-color: var(--crust);
67
61
margin-top: 20px;
68
62
outline: 2px solid;
69
-
outline-color: light-dark(var(--light-accent), var(--dark-accent));
63
+
outline-color: var(--accent);
70
64
border-radius: 25px;
71
65
padding: 20px;
72
66
opacity: 0.7;
73
-
box-shadow: 10px 5px 10px light-dark(var(--light-crust), var(--dark-crust));
67
+
box-shadow: 10px 5px 10px var(--crust);
74
68
}
75
69
.main:hover {
76
70
outline: 5px dashed;
77
-
outline-color: light-dark(var(--light-accent), var(--dark-accent));
71
+
outline-color: var(--accent);
78
72
opacity: 1;
79
73
transform: scale(1.01, 1.01);
80
74
transition: ease-in-out 0.3s;
81
75
}
82
76
footer {
83
77
font-family: "Iosevka Aile", monospace;
84
-
color: light-dark(var(--light-text), var(--dark-text));
78
+
color: var(--foreground);
85
79
font-size: 20px;
86
-
background-color: light-dark(var(--light-crust), var(--dark-crust));
80
+
background-color: var(--crust);
87
81
padding: 15px;
88
82
outline: 2px solid;
89
-
outline-color: light-dark(var(--light-accent), var(--dark-accent));
83
+
outline-color: var(--accent);
90
84
border-radius: 25px;
91
85
margin-top: 10px;
92
86
opacity: 0.7;
93
87
width: 1200px;
94
-
box-shadow: 10px 5px 10px light-dark(var(--light-crust), var(--dark-crust));
88
+
box-shadow: 10px 5px 10px var(--crust);
95
89
}
96
90
footer:hover {
97
91
outline: 5px dashed;
98
-
outline-color: light-dark(var(--light-accent), var(--dark-accent));
92
+
outline-color: var(--accent);
99
93
opacity: 1;
100
94
transform: scale(1.01, 1.01);
101
95
transition: ease-in-out 0.3s;
···
108
102
.form-input_message {
109
103
display: block;
110
104
margin-top: 10px;
111
-
color: light-dark(var(--light-accent), var(--dark-accent));
105
+
color: var(--accent);
112
106
border: 1px solid;
113
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
107
+
border-color: var(--accent);
114
108
border-radius: 10px;
115
-
background: light-dark(var(--light-background), var(--dark-background));
109
+
background: var(--background);
116
110
padding: 10px;
117
111
resize: both;
118
112
overflow: hidden;
···
128
122
129
123
/* button */
130
124
.dropbtn {
131
-
color: light-dark(var(--light-accent), var(--dark-accent));
125
+
color: var(--accent);
132
126
border: 2px dashed;
133
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
127
+
border-color: var(--accent);
134
128
border-radius: 15px;
135
-
background: light-dark(var(--light-background), var(--dark-background));
129
+
background: var(--background);
136
130
padding: 8px;
137
131
}
138
132
.input {
139
-
color: light-dark(var(--light-accent), var(--dark-accent));
133
+
color: var(--accent);
140
134
border: 1px solid;
141
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
135
+
border-color: var(--accent);
142
136
border-radius: 10px;
143
-
background: light-dark(var(--light-background), var(--dark-background));
137
+
background: var(--background);
144
138
padding: 7px;
145
139
font-family: "Iosevka Aile", monospace;
146
140
}
147
141
148
142
.guest {
149
143
border: 2px dashed;
150
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
144
+
border-color: var(--accent);
151
145
padding: 10px;
152
-
color: #ca9ee6;
153
-
background: #1e1e2e;
146
+
color: var(--accent);
147
+
background: var(--background);
154
148
font-family: "Iosevka Aile", monospace;
155
149
}
156
150
···
160
154
top: 50%;
161
155
margin-top: 8px;
162
156
border: 2px solid;
163
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
157
+
border-color: var(--accent);
164
158
border-radius: 15px;
165
-
background-color: light-dark(var(--light-background), var(--dark-background));
159
+
background-color: var(--background);
166
160
min-width: 100%;
167
161
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
168
162
visibility: hidden;
169
163
opacity: 0;
170
164
transition: 0.2s ease-in-out;
171
-
z-index: 2;
172
165
}
173
166
.dropdown-content a {
174
-
color: light-dark(var(--light-background), var(--dark-background));
167
+
color: var(--background);
175
168
padding: 6px 10px;
176
169
display: block;
177
170
text-decoration: none;
···
179
172
text-align: center;
180
173
}
181
174
.dropdown-content a:hover {
182
-
background-color: light-dark(var(--light-subtext), var(--dark-subtext));
175
+
background-color: var(--background);
183
176
}
184
177
.web-buttons:hover .web-button {
185
178
transition: ease-in-out 0.2s;
···
190
183
transition: ease-in-out 0.3s;
191
184
outline: solid 2px;
192
185
border-radius: 10px;
193
-
outline-color: light-dark(var(--light-accent), var(--dark-accent));
186
+
outline-color: var(--accent);
194
187
filter: blur(0);
195
-
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
188
+
box-shadow: 0px 0px 10px var(--foreground);
196
189
transform: scale(1.3, 1.3) translateX(-10px) translateY(-2px);
197
190
display: inline-block;
198
191
}
···
205
198
transition: ease-in-out 0.3s;
206
199
outline: solid 2px;
207
200
border-radius: 10px;
208
-
outline-color: light-dark(var(--light-accent), var(--dark-accent));
201
+
outline-color: var(--accent);
209
202
filter: blur(0);
210
-
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
203
+
box-shadow: 0px 0px 10px var(--foreground);
211
204
transform: scale(1.3, 1.3) translateX(-10px) translateY(-2px);
212
205
display: inline-block;
213
206
}
···
215
208
transition: ease-in-out 0.3s;
216
209
outline: solid 2px;
217
210
border-radius: 10px;
218
-
outline-color: light-dark(var(--light-accent), var(--dark-accent));
211
+
outline-color: var(--foreground);
219
212
filter: blur(0);
220
-
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
213
+
box-shadow: 0px 0px 10px var(--foreground);
221
214
transform: scale(1.4, 1.4);
222
215
display: inline-block;
223
216
}
···
225
218
.pfp {
226
219
border-radius: 15px;
227
220
border: 2px solid;
228
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
221
+
border-color: var(--foreground);
229
222
width: 70px;
230
223
height: auto;
231
224
}
···
242
235
outline: none;
243
236
transform: translateY(18px);
244
237
visibility: visible;
245
-
opacity: 0.9;
238
+
z-index: 100 !important;
239
+
opacity: 0.9 !important;
246
240
}
247
241
248
242
.dropbtn:hover, .dropdown:focus .dropbtn {
249
-
background-color: light-dark(var(--light-accent), var(--dark-accent));
250
-
color: light-dark(var(--light-background), var(--dark-background));
251
-
border-color: light-dark(var(--light-background), var(--dark-background));
243
+
background-color: var(--accent);
244
+
color: var(--background);
245
+
border-color: var(--background);
252
246
transition: ease-in-out 0.5s;
253
247
position: relative;
254
248
transform: scale(2);