sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

revamp about page and use css methods to uncapitalize to improve accessibility
All checks were successful
/ build (push) Successful in 42s
Details

Browse source
This commit is contained in:
Ruben 2025-04-07 18:56:55 -05:00
commit c10e27b5bc
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
2 changed files with 38 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

71
me/index.html
View file

@ -69,7 +69,7 @@
<div aria-hidden="true">
<span class="tabler--user"></span>
</div>
<a href="#sneexy">sneexy info</a>
<a href="#sneexy">Sneexy info</a>
<div aria-hidden="true">
<span class="tabler--minimize"></span>
<span class="tabler--maximize"></span>
@ -82,28 +82,28 @@
<section>
<img id="logo" loading="lazy" src="/assets/sneexy.webp" alt="Sneexy" /> <br>
<audio controls loop src="/assets/ASimpleMachine.mp3"></audio> <br>
<small>theme song by <a href="https://wolfdo.gg/@ChalkLlate">ChalkLlate</a>!</small>
<small>Theme song by <a href="https://yeen.town/@ChalkLlate">ChalkLlate</a>!</small>
<h1><a href="./ruben"><img loading="lazy" id="pfp" src="/assets/synth tpose spin.gif" alt="3D Low poly model of my synth character. He's a pretty chubby synth with a belly and chest made entirely out of goo, his frame is mostly made with shades of grey with lime/pastel green accents."></a> hey, i'm <span class="rainbow">ruben!</span></h1>
<small>cheesed to meet ya.</small>
<p style="margin-bottom: -2px;">big fat gooey synth who is constantly tired.</p>
<p style="margin-bottom: -2px;">Big fat gooey synth who is constantly tired.</p>
<small style="font-size: 0.575rem;">...or <i>eepy</i>, but definitely more tired.</small>
<div class="selfinfo">
<div style="grid-area: pronouns;">
<p>pronouns</p>
<p>Pronouns</p>
<ul>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="preferred!"></span> he/him</li>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="preferred!"></span> it/its</li>
<li><span class="tabler--thumb-up" alt="acceptable,"></span> they/them</li>
<li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> anything else</small></li>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="Preferred!"></span> he/him</li>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="Preferred!"></span> it/its</li>
<li><span class="tabler--thumb-up" alt="Acceptable,"></span> they/them</li>
<li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> anything else</small></li>
</ul>
</div>
<div style="grid-area: names;">
<p>names</p>
<p>Names</p>
<ul>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="preferred!"></span> ruben</li>
<li><span class="tabler--thumb-up" alt="acceptable,"></span> sneexy, sneex*</li>
<li style="color: var(--yellow);"><small><span class="tabler--user-heart" alt="only if we're close friends!" style="transform: scale(.9) translateY(.2rem);"></span> rube, rubie (ruby)</small></li>
<li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> variations/anything else</small></li>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="Preferred!"></span> ruben</li>
<li><span class="tabler--thumb-up" alt="Acceptable,"></span> sneexy, sneex*</li>
<li style="color: var(--yellow);"><small><span class="tabler--user-heart" alt="Only if we're close friends!" style="transform: scale(.9) translateY(.2rem);"></span> rube, rubie (ruby)</small></li>
<li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> variations/anything else</small></li>
</ul>
</div>
</div>
@ -116,7 +116,7 @@
<div aria-hidden="true">
<span class="tabler--info-circle"></span>
</div>
<a href="#about-me">about me</a>
<a href="#about-me">About me</a>
<div aria-hidden="true">
<span class="tabler--minimize"></span>
<span class="tabler--maximize"></span>
@ -128,16 +128,17 @@
<section>
<h2><a href="#about-me">about me</a></h2>
<p>some <span class="rainbow">gay</span> 18 year old synth computer enjoyer with autism and adhd blended together, with access to the internet and nothing to do. i like big round things.</p>
<p>i consider myself to be a Professional Computer Toucher™, or at least try my best to contain the beasts within boxes that beep and error at me. i think i'm doing pretty well at that considering i'm running this domain <small>(synth.download, you're looking at it!)</small> with some services that friends rely on.</p>
<p>i'm a nerd into <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">free and open source</a> software and privacy stuff. i'm not a programmer or some IT guy or anything, though. i've tried, didn't work out.</p>
<p>also a nerd into <a href="https://www.redhat.com/en/topics/linux/what-is-linux">Linux</a> stuff, mostly touched <a href="https://archlinux.org">Arch</a> and a little bit of <a href="https://nixos.org">NixOS</a> but have found to stuck with <a href="https://fedoraproject.org">Fedora</a>.</p>
<p>enthusiast in open, <a href="https://en.wikipedia.org/wiki/Decentralization">decentralized</a> and <a href="https://www.techopedia.com/definition/2500/federation">federated</a> projects, networks or services. favorites include the <a href="https://fediverse.info">fediverse</a>, <a href="https://atproto.com">atproto</a> and <a href="https://listenbrainz.org">listenbrainz</a>.</p>
<p>i <i>absolutely</i> despise corporations and capitalism with every single fiber in my living synthentic body <span class="tabler--heart" style="background-color: var(--red) !important;"></span>
<p>very much a furry connoisseur and into other beings like protogens and other fellow synths. <small>being a human fucking SUCKS.</small></p>
<p>Certified™ idiot <small>(i think this one is obvious)</small></p>
<p>usually pretty tired and sometimes full of ideas that i just can't bring myself to execute.</p>
<p>sometimes makes things, but don't expect much. <small>i'll make some type of gallery page soon, i promise.</small></p>
<p>I'm just another <span class="rainbow">gay</span> Synth on the internet, <small>a zoomer, established 2006</small>. I'm autistic and have ADHD, and those two blended together are both a blessing and a curse. I like big round things, as in, bellies and such related content, but I'll try my best to minimize that here and/or content warn such things whenever I do bring them up. Don't worry, the rest of this page is safe for work</p>
<p>I sometimes have really bad mental health moments and intense mood swings, so please excuse me in those regards. Thanks. <span class="tabler--heart" style="background-color: var(--accent) !important;"></span></p>
<p>I consider myself to be a <span style="text-transform: capitalize;">professional computer toucher<span aria-hidden="true">™</span></span>, and try my best to poke at computers or anything related to weird tech that interest me. I would say I've messed enough in a good share of both software and hardware related things. <small>Probably not now that I think about it, but I'm willing to learn more... whenever I can.</small></p>
<p>I'm a nerd with <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">Free and Open Source</a> stuff and also caring about my privacy whenever possible <small>considering that it doesn't really seem to exist at all in the modern world, anyways</small>. I also like messing around with Linux, trying a bit of <a style="text-transform: none;" href="https://archlinux.org">Arch</a> and a little bit of <a style="text-transform: none;" href="https://nixos.org">NixOS</a>, but found comfort with <a style="text-transform: none;" href="https://fedoraproject.org">Fedora</a>. <small>If you're interested, I'm currently running my own customized varient of <a style="text-transform: none;" href="https://fedoraproject.org/atomic-desktops/kinoite">Fedora Kinoite</a> made with <a style="text-transform: none;" href="https://blue-build.org">BlueBuild</a> that <a href="https://github.com/sneexy-boi/bluebuild-custom">you can find here</a>.</small> I'm not going to shove these down anyone's throat, and if you're someone who does that, kindly get away from me.</p>
<p>Despite what is mentioned above, I'm not really a programmer, <span style="text-transform: none;">IT support</span> guy, some professional info-sec person or anything like that. My knowledge is honestly quite limited. At most, I personally mainly know just enough Bash to make jank scripts, HTML and CSS, and a good amount of Linux and Docker/Podman to let me survive. As much as I'd like to learn to expand, I've tried Python before with full intention and motivation of properly learning it to make things and it just didn't stick at all for me, and considering that was with <i>Python</i>, I'm goign to assume my limits in terms of handling things are pretty low.</p>
<p>I also run synth.download! The thing you're looking at! Made with love and containers. <span class="tabler--heart" style="background-color: var(--red) !important;"></span></p>
<p>I <i>absolutely</i> despise capitalism with every single fiber in my living synthentic body.</span>
<p>In case it wasn't obvious or clear somehow at this point, I'm a furry. Well, if I consider myself to even fit within that space or if I do want to participate within the "furry" community, but I think I fit into that label enough to be considered one. <small>Being a human fucking <span style="text-transform: none;">SUCKS</span>, although I don't think I fully consider myself "therian" exactly.</small></p>
<p><span style="text-transform: none;">Certified<span aria-hidden="true">™</span> idiot</span> <small>(although I think this one is obvious)</small></p>
<p>I'm usually pretty much both mentally and physically tired all of the time, while also usually being full of ideas that I try to execute and tire myself even more, making things even worse in the end.</p>
<p>With this, I do sometimes make things, but honestly don't expect much from me. <small>I'll make some type of gallery page soon for the things I <i>do</i> make and the things others do for me, I promise.</small></p>
</section>
</details>
@ -158,8 +159,8 @@
</summary>
<section>
<h2><a href="#links">links</a></h2>
<p>my links to all of my public facing socials and contacts. if i know you well, you may ask me for anything more private, like signal or matrix, etc. <small>fastest way to get this is by checking my pinned post if you follow me/we're mutuals on fedi.</small></span></p>
<h2><a href="#links">Links</a></h2>
<p>My links to all of my public facing socials and contacts. If I know you well, you may ask me for anything more private, like Signal or Matrix, etc. <small>The fastest way to get this is by checking my <i>followers only</i> pinned post if you follow me/we're mutuals on the Fediverse.</small></span></p>
<div class="socials-contacts-list">
<a class="fedi-icon" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--orange);" aria-label="Fediverse/Mastodon"><span class="tabler--universe" style="pointer-events: none;"></span></a>
<a class="fedi-icon-2" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--teal) 25%, transparent); color: var(--teal);" aria-label="Fediverse/Mastodon" aria-hidden="true"><span class="tabler--brand-mastodon" style="pointer-events: none;"></span></a>
@ -170,7 +171,7 @@
<a href="https://github.com/sneexy-boi" style="background-color: color-mix(in srgb, var(--lavender) 25%, transparent); color: var(--lavender);" aria-label="GitHub"><span class="tabler--brand-github" style="pointer-events: none;"></span></a>
<a href="https://archive.org/details/@sneexy" style="background-color: color-mix(in srgb, var(--foreground) 25%, transparent); color: var(--foreground);" aria-label="Internet Archive"><span class="tabler--building-bank" style="pointer-events: none;"></span></a>
</div>
<p><span class="tabler--corner-down-right"></span> you may observe my <small>somewhat public</small> fediverse activity below:</p>
<p><span class="tabler--corner-down-right"></span> You may observe my Fediverse activity below:</p>
<iframe aria-hidden="true" src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?header=false&maxHeight=800&rounded=false&border=false" data-misskey-embed-id="v1_902c0e81-d9d7-4c03-af0e-a6e71c21e95b" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
</section>
</details>
@ -181,7 +182,7 @@
<div aria-hidden="true">
<span class="tabler--mood-empty"></span>
</div>
<a href="#fun-facts">"fun" facts</a>
<a href="#fun-facts">"Fun" facts</a>
<div aria-hidden="true">
<span class="tabler--minimize"></span>
<span class="tabler--maximize"></span>
@ -192,14 +193,14 @@
</summary>
<section>
<h2><a href="#fun-facts">"fun" facts</a></h2>
<h2><a href="#fun-facts">"Fun" facts</a></h2>
<ul>
<li>my profile pictures used to be random characters from different types of media that i would just apply a grayscale onto. ever since then, i realized that i've very much enjoyed being a <a href="https://synthspecies.com/">synth</a> instead.</li>
<li>i used to have an inside joke with some old friends where i <i>loved</i> cheese. 🧀</li>
<li>originally starting going online when i was young and my only method of getting wifi was by using my netbook in the kitchen and connecting to a nearby stores local wifi connection. <small>apparently lowes wifi goes out VERY far.</small></li>
<li>joined <a href="https://fediverse.info">fedi</a> around 2020 or so, originally on <a href="https://mas.to">mas.to</a> before moving to <a href="https://types.pl">types.pl</a> which has a nice local community ignoring that i left the account to rot and die, before moving to <a href="https://miruku.cafe">miruku.cafe</a> for a short bit before setting home on <a href="https://lea.pet">lea.pet</a> for a nice while, before <i>finally</i> landing on my own self hosted instance at <a href="https://booping.synth.download">booping.synth.download</a>. <small>well. originally starting <a href="https://beeping.synth.download">beeping.synth.download</a>, but i realized i prefer the full brainrotting misskey experience anyways.</small></li>
<li>i prefer lowercase when possible and use spaces before <i>and</i> after punctionation, sometimes maybe a double space here and there, <small>although i attempt to avoid doing the latter on this website to not make it entirely inaccessible.</small> it just feels more natural.</li>
<li>i am <i>still</i> <b><i>terrible</i></b> at spelling. still made mistakes even when making this site. online dictionaries my beloved.</li>
<li>My profile pictures used to be random characters from different types of media that I would just apply a grayscale onto. Ever since then, I realized that I've very much enjoyed being a <a href="https://synthspecies.com/">Synth</a> instead.</li>
<li>I used to have an inside joke with some old friends where I <i>loved</i> cheese. 🧀</li>
<li>Originally starting going online when I was young and my only method of getting Wi-Fi was by using my netbook in the kitchen, stationed above the stove and connecting to a nearby stores local Wi-Fi connection. <small>apparently, Lowes Wi-Fi goes out VERY far.</small></li>
<li>Joined the <a href="https://fediverse.info">Fediverse</a> around 2020 or so, originally on <a href="https://mas.to">mas.to</a> before moving to <a href="https://types.pl">types.pl</a>, which has quite a nice local community <span style="text-decoration: line-through;">ignoring that I left the account to rot and die</span>, before moving to <a href="https://miruku.cafe">miruku.cafe</a> for a short bit, which introduced me to the <a href="https://misskey-hub.net">Misskey</a> software where I ended up starting to actually enjoy using the Fediverse, then moving to <a href="https://lea.pet">lea.pet</a> after some drama went down, before <i>finally</i> landing on my own self-hosted instance at <a href="https://booping.synth.download">booping.synth.download</a>. <small>Well, originally starting at <a href="https://beeping.synth.download">beeping.synth.download</a>, But I realized that <a href="https://iceshrimp.net">Iceshrimp.NET</a> is a bit <i>too</i> much in beta stage software for me.</small></li>
<li>I prefer lowercase when possible and use spaces before <i>and</i> after punctionation, sometimes maybe a double space here and there, <small>Although I attempt to avoid doing the latter on this website to try and prevent it from making it entirely inaccessible.</small> It just feels more natural for me.</li>
<li>I am <b><i>terrible</i></b> at spelling.</li>
</ul>
</section>
</details>

2
style.css
View file

@ -7,6 +7,7 @@ body {
min-height: calc(100vh - 4rem);
font-family: 'JetBrains Mono', monospace, system-ui, sans-serif;
font-size: 1.125rem;
text-transform: lowercase;
margin: unset !important; /* idk why it does that */
}
@ -383,6 +384,7 @@ details.styled[open] {
/* alt text popup */
.alt-popup {
position: fixed;
text-transform: none !important;
background-color: color-mix(in srgb, var(--background) 85%, transparent);
backdrop-filter: blur(.5rem);
color: var(--foreground);