my personal website!
meowing.zip
website
added an auto light and dark mode theme
+82
-59
+18
-18
about-me.html
+18
-18
about-me.html
···
8
8
</head>
9
9
<footer>
10
10
<div style="display: flex;">
11
-
<img style="border-radius: 15px; border: 2px solid #ca9ee6; width: 70px; height: auto" src="./assets/images/pfp.jpg" alt="fursona">
12
-
<a style=" padding: 20px; text-align: center">about me!<small style="color: #9399b2 ;margin-left: 10px; font-size: 12px;">gayfamicom's cool and awesome website!~</small></a>
11
+
<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">
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;">gayfamicom'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;">
···
26
26
<i class="db2" tabindex="1"></i>
27
27
<a style="margin-left: 5px;" class="dropbtn">follow me on socials</a>
28
28
<div class="dropdown-content">
29
-
<a style="color: #89b4fa; border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:web:gayfamicom.lol" target="_blank">bluesky</a>
30
-
<a style="color: #94e2d5; border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://hero.chaogarden.social/@gayfamicom" target="_blank">fediverse</a>
31
-
<a style="color: #f38ba8; border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@gayfamicom" target="_blank">youtube</a>
29
+
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:web:gayfamicom.lol" target="_blank">bluesky</a>
30
+
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://hero.chaogarden.social/@gayfamicom" target="_blank">fediverse</a>
31
+
<a style="color: light-dark(#d20f39, #f38ba8); border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@gayfamicom" target="_blank">youtube</a>
32
32
</div>
33
33
</div>
34
34
<div class="dropdown" tabindex="1">
35
35
<i class="db2" tabindex="1"></i>
36
36
<a style="margin-left: 5px;" class="dropbtn">add me!</a>
37
37
<div class="dropdown-content">
38
-
<a style="color: #89dceb; border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/gayfamicom/" target="_blank">steam</a>
38
+
<a style="color: light-dark(#04a5e5, #89dceb); border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/gayfamicom/" target="_blank">steam</a>
39
39
</div>
40
40
</div>
41
41
<div class="dropdown" tabindex="1">
42
42
<i class="db2" tabindex="1"></i>
43
43
<a style="margin-left: 5px;" class="dropbtn">contact info</a>
44
44
<div class="dropdown-content">
45
-
<a style="color: #b4befe; border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
46
-
<a style="color: #89b4fa; border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/xhGmxYVp-uOwNmQMWmpPv_O3NvCOA6pH7O1FOt_C1VG3Wkd-9TxAdr1qkhvumTX1" target="_blank">signal</a>
47
-
<a style="color: #94e2d5; border: 0px soild transparent; border-radius: 20px;" href="xmpp:gayfamicom@synth.download">xmpp</a>
48
-
<a style="color: #eba0ac; border: 0px soild transparent; border-radius: 20px;" href="mailto:mail@gayfamicom.lol">email</a>
45
+
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/xhGmxYVp-uOwNmQMWmpPv_O3NvCOA6pH7O1FOt_C1VG3Wkd-9TxAdr1qkhvumTX1" target="_blank">signal</a>
46
+
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" href="xmpp:gayfamicom@synth.download">xmpp</a>
47
+
<a style="color: light-dark(#7287fd, #b4befe); border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
48
+
<a style="color: light-dark(#e64553, #eba0ac); border: 0px soild transparent; border-radius: 20px;" href="mailto:mail@gayfamicom.lol">email</a>
49
49
</div>
50
50
</div>
51
-
<a style="margin-left: 15px; font-size: 12px; color: #6c7086;">gallery (under construction)</a>
51
+
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">gallery (under construction)</a>
52
52
</div>
53
53
</footer>
54
54
<body>
···
60
60
im a biromantic, asexual, genderfluid individual who suffers with a schizoaffective disorder <small style="font-size: 10px;">(more specfically the bipolar type)</small>
61
61
<br><br>i like 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>!!
62
62
</a>
63
-
<div style="margin-top: 20px; color: #f38ba8; font-size: 15px;"">
63
+
<div style="margin-top: 20px; color: light-dark(#d20f39, #f38ba8); font-size: 15px;"">
64
64
im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me,
65
65
its not that i dont care!!
66
66
</div>
···
68
68
<div class="main">
69
69
<h3>what do u use for video editing?</h3>
70
70
<div class="divider"></div>
71
-
<a style="color: #b4befe; font-size: 13px;">
71
+
<a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;">
72
72
adobe premiere pro (SORRY)
73
73
</a>
74
74
<a>-</a>
75
-
<a style="color: #b4befe; font-size: 13px;">
75
+
<a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;">
76
76
adobe after effects (SORRY)
77
77
</a>
78
78
<a>-</a>
79
-
<a style="color: #89b4fa; font-size: 13px;">
79
+
<a style="color: light-dark(#1e66f5, #89b4fa); font-size: 13px;">
80
80
adobe photoshop (SORRY)
81
81
</a>
82
82
<div class="divider"></div>
83
83
<h3>what about audio stuff?</h3>
84
84
<div class="divider"></div>
85
-
<a style="color: #a6e3a1; font-size: 13px;">just reaper...</a>
85
+
<a style="color: light-dark(#40a02b, #a6e3a1); font-size: 13px;">just reaper...</a>
86
86
</div>
87
-
<a style="color: #9399b2; padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
88
-
<a style="color: #9399b2; padding: 10px;"><small>last modified: 2026-02-25T01:31:08Z</small></a>
87
+
<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>
88
+
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;"><small>last modified: 2026-03-24T00:24:23Z</small></a>
89
89
</body>
90
90
</html>
+17
-17
index.html
+17
-17
index.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 #ca9ee6; width: 70px; height: auto" src="./assets/images/pfp.jpg" alt="fursona">
11
-
<a style=" padding: 20px; text-align: center">gayfamicom's cool and awesome website!<small style="color: #9399b2 ;margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a>
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">gayfamicom'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>
12
12
<div style="display: flex; place-items: center; gap: 1rem;">
13
13
<a style="font-size: 14px;">visitor count: </a>
14
14
<a href="https://nixie.starlightnet.work">
15
-
<img style="border-radius: 15px; border: 2px solid #ca9ee6;" src="https://nixie.starlightnet.work/?fg=%23926eaf&bg=%231b151e&pixel=1" alt="view counter" referrerpolicy="no-referrer-when-downgrade"/></a>
15
+
<img style="border-radius: 15px; border: 2px solid; border-color: light-dark(var(--light-accent), var(--dark-accent));" src="https://nixie.starlightnet.work/?fg=%23926eaf&bg=%231b151e&pixel=1" alt="view counter" referrerpolicy="no-referrer-when-downgrade"/></a>
16
16
</div>
17
17
</div>
18
18
<div class="divider"></div>
···
27
27
<i class="db2" tabindex="1"></i>
28
28
<a style="margin-left: 5px;" class="dropbtn">follow me on socials</a>
29
29
<div class="dropdown-content">
30
-
<a style="color: #89b4fa; border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:web:gayfamicom.lol" target="_blank">bluesky</a>
31
-
<a style="color: #94e2d5; border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://hero.chaogarden.social/@gayfamicom" target="_blank">fediverse</a>
32
-
<a style="color: #f38ba8; border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@gayfamicom" target="_blank">youtube</a>
30
+
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:web:gayfamicom.lol" target="_blank">bluesky</a>
31
+
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://hero.chaogarden.social/@gayfamicom" target="_blank">fediverse</a>
32
+
<a style="color: light-dark(#d20f39, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@gayfamicom" target="_blank">youtube</a>
33
33
</div>
34
34
</div>
35
35
<div class="dropdown" tabindex="1">
36
36
<i class="db2" tabindex="1"></i>
37
37
<a style="margin-left: 5px;" class="dropbtn">add me!</a>
38
38
<div class="dropdown-content">
39
-
<a style="color: #89dceb; border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/gayfamicom/" target="_blank">steam</a>
39
+
<a style="color: light-dark(#04a5e5, #89dceb); border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/gayfamicom/" target="_blank">steam</a>
40
40
</div>
41
41
</div>
42
42
<div class="dropdown" tabindex="1">
43
43
<i class="db2" tabindex="1"></i>
44
44
<a style="margin-left: 5px;" class="dropbtn">contact info</a>
45
45
<div class="dropdown-content">
46
-
<a style="color: #89b4fa; border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/xhGmxYVp-uOwNmQMWmpPv_O3NvCOA6pH7O1FOt_C1VG3Wkd-9TxAdr1qkhvumTX1" target="_blank">signal</a>
47
-
<a style="color: #94e2d5; border: 0px soild transparent; border-radius: 20px;" href="xmpp:gayfamicom@synth.download">xmpp</a>
48
-
<a style="color: #b4befe; border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
49
-
<a style="color: #eba0ac; border: 0px soild transparent; border-radius: 20px;" href="mailto:mail@gayfamicom.lol">email</a>
46
+
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/xhGmxYVp-uOwNmQMWmpPv_O3NvCOA6pH7O1FOt_C1VG3Wkd-9TxAdr1qkhvumTX1" target="_blank">signal</a>
47
+
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" href="xmpp:gayfamicom@synth.download">xmpp</a>
48
+
<a style="color: light-dark(#7287fd, #b4befe); border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
49
+
<a style="color: light-dark(#e64553, #eba0ac); border: 0px soild transparent; border-radius: 20px;" href="mailto:mail@gayfamicom.lol">email</a>
50
50
</div>
51
51
</div>
52
-
<a style="margin-left: 15px; font-size: 12px; color: #6c7086;">gallery (under construction)</a>
53
-
<a style="margin-left: 15px; font-size: 12px; color: #6c7086;">guestbook (under construction)</a>
52
+
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">gallery (under construction)</a>
53
+
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">guestbook (under construction)</a>
54
54
</div>
55
55
</footer>
56
56
···
58
58
<div class="main">
59
59
<div style="margin-bottom: 10px">
60
60
<a>a collections of buttons!</a>
61
-
<a style="color: #9399b2;"><small>sorted alphabetically by domain name</small></a>
61
+
<a style="color: light-dark(var(--light-subtext), var(--dark-subtext));"><small>sorted alphabetically by domain name</small></a>
62
62
</div>
63
63
<div class="divider"></div>
64
64
<div style="margin-bottom: 10px;">
65
65
<a style="font-size: 14px">friends</a>
66
-
<a style="font-size: 12px; color: #9399b2;"><small>let me know if you want urs added here!</small></a>
66
+
<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>
67
67
</div>
68
68
<div style="padding: 5px; margin-bottom: 10px">
69
69
<a href="https://aquamarine.gay"><img alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
···
105
105
<a href="https://gayfamicom.lol"><img src="./assets/88x31/gayfamicom.png" alt="my cool ass button"></a>
106
106
</div>
107
107
</div>
108
-
<a style="color: #9399b2; padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
109
-
<a style="color: #9399b2; padding: 10px;"><small>last modified: 2026-02-25T06:04:22Z</small></a>
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-03-24T00:24:23Z</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
-24
styles.css
+47
-24
styles.css
···
1
+
:root {
2
+
color-scheme: light dark;
3
+
--dark-background: #1e1e2e;
4
+
--dark-crust: #11111b;
5
+
--dark-text: #cdd6f4;
6
+
--dark-subtext: #45475a;
7
+
--dark-divider: #313244;
8
+
--dark-accent: #cba6f7;
9
+
--light-background: #eff1f5;
10
+
--light-crust: #dce0e8;
11
+
--light-text: #4c4f69;
12
+
--light-subtext: #7c7f93;
13
+
--light-divider: #9ca0b0;
14
+
--light-accent: #8839ef;
15
+
}
1
16
button {
2
17
font-family: "Iosevka Aile", monospace;
3
18
font-size: 17px;
4
19
border-radius: 10px;
5
20
}
6
21
body {
7
-
background-color: #1e1e2e;
8
-
color: #cdd6f4;
22
+
background-color: light-dark(var(--light-background), var(--dark-background));
23
+
color: light-dark(var(--light-text), var(--dark-text));
9
24
font-family: "Iosevka Aile", monospace;
10
25
margin: 10px auto;
11
26
max-width: 1200px;
12
27
min-width: 400px;
13
28
}
14
29
.divider {
15
-
border-top: 2px dashed #313244;
30
+
border-top: 2px dashed;
31
+
border-color: light-dark(var(--light-divider), var(--dark-divider));
16
32
margin: 20px auto;
17
33
}
18
34
.main {
19
-
background-color: #11111b;
35
+
background-color: light-dark(var(--light-crust), var(--dark-crust));
20
36
margin-top: 20px;
21
-
border: 4px solid #ca9ee6;
37
+
border: 4px solid;
38
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
22
39
border-radius: 25px;
23
40
padding: 20px;
24
41
box-shadow: 10px 5px 10px #11111b;
25
42
}
26
43
footer {
27
44
font-family: "Iosevka Aile", monospace;
28
-
color: #cdd6f4;
45
+
color: light-dark(var(--light-text), var(--dark-text));
29
46
font-size: 20px;
30
-
background-color: #11111b;
47
+
background-color: light-dark(var(--light-crust), var(--dark-crust));
31
48
padding: 15px;
32
-
border: 4px solid #ca9ee6;
49
+
border: 4px solid;
50
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
33
51
border-radius: 25px;
34
52
margin-top: 10px;
35
53
box-shadow: 10px 5px 10px #11111b;
···
42
60
.form-input_message {
43
61
display: block;
44
62
margin-top: 10px;
45
-
color: #ca9ee6;
46
-
border: 1px solid #ca9ee6;
63
+
color: light-dark(var(--light-accent), var(--dark-accent));
64
+
border: 1px solid;
65
+
border-color: light-dark(var(--light-accent), var(--dark-accent))
47
66
border-radius: 10px;
48
-
background: #1e1e2e;
67
+
background: light-dark(var(--light-background), var(--dark-background));
49
68
padding: 10px;
50
69
resize: both;
51
70
overflow: hidden;
···
61
80
62
81
/* button */
63
82
.dropbtn {
64
-
color: #ca9ee6;
65
-
border: 2px dashed #ca9ee6;
83
+
color: light-dark(var(--light-accent), var(--dark-accent));
84
+
border: 2px dashed;
85
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
66
86
border-radius: 15px;
67
-
background: #1e1e2e;
87
+
background: light-dark(var(--light-background), var(--dark-background));
68
88
padding: 8px;
69
89
}
70
90
.input {
71
-
color: #ca9ee6;
72
-
border: 1px solid #ca9ee6;
91
+
color: light-dark(var(--light-subtext), var(--dark-subtext));
92
+
border: 1px solid;
93
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
73
94
border-radius: 10px;
74
95
background: #1e1e2e;
75
96
padding: 7px;
···
77
98
}
78
99
79
100
.guest {
80
-
border: 2px dashed #ca9ee6;
101
+
border: 2px dashed;
102
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
81
103
padding: 10px;
82
104
color: #ca9ee6;
83
105
background: #1e1e2e;
···
89
111
position: absolute;
90
112
top: 50%;
91
113
margin-top: 6px;
92
-
border: 1px solid #cba6f7;
114
+
border: 1px solid;
115
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
93
116
border-radius: 15px;
94
-
background-color: #11111b;
117
+
background-color: light-dark(var(--light-background), var(--dark-background));
95
118
min-width: 100%;
96
119
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
97
120
z-index: 100000;
···
100
123
transition: 0.2s ease-in-out;
101
124
}
102
125
.dropdown-content a {
103
-
color: #cdd6f4;
126
+
color: light-dark(var(--light-background), var(--dark-background));
104
127
padding: 6px 10px;
105
128
display: block;
106
129
text-decoration: none;
···
108
131
text-align: center;
109
132
}
110
133
.dropdown-content a:hover {
111
-
background-color: #45475a;
134
+
background-color: light-dark(var(--light-subtext), var(--dark-subtext));
112
135
}
113
136
114
137
/* show dd content */
···
120
143
}
121
144
122
145
.dropbtn:hover, .dropdown:focus .dropbtn {
123
-
background-color: #cba6f7;
124
-
color: #1e1e2e;
125
-
border-color: #1e1e2e;
146
+
background-color: light-dark(var(--light-accent), var(--dark-accent));
147
+
color: light-dark(var(--light-background), var(--dark-background));
148
+
border-color: light-dark(var(--light-background), var(--dark-background));
126
149
height: auto;
127
150
transition: ease-in-out 0.5s;
128
151
padding: 10px;