my personal website! meowing.zip
website
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

added an auto light and dark mode theme

Niko 3f1ba3ed bd93f6fc

+82 -59
+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
··· 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
··· 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;