just learned about anchors

This commit is contained in:
Ruben 2023-11-06 09:09:58 -06:00
commit 2669399259
No known key found for this signature in database
2 changed files with 43 additions and 25 deletions

View file

@ -22,14 +22,14 @@
<h1 class="site-intro">hey, i'm ruben.</h1>
<h2 class="site-subtitle">welcome to my site.</h2>
<nav>
<small class="navnt">~/links <span class="arrow"></span> ~/about-me <span class="arrow"></span> ~/fun-facts <span class="arrow"></span> etc.</small>
<small class="nav"><a href="#links">~/links</a> <span class="arrow"></span> <a href="#about-me">~/about-me</a> <span class="arrow"></span> <a href="#fun-facts">~/fun-facts</a> <span class="arrow"></span> etc.</small>
</nav>
</header>
</div>
</div>
<div class="pixel-corners">
<article class="links-n-socials">
<article id="links" class="links-n-socials">
<h1>~/links-n-socials</h1>
<small>(in order of most prefered to least prefered! <span class="dot"></span> some of these have extra info you can find by clicking their icons)</small>
@ -41,7 +41,7 @@
<p>@sneexy<small><a href="https://lea.pet/@sneexy" target="_blank">@lea.pet</a></small></p>
</section>
<span class="dot2"></span>
<span class="dot"></span>
<section class="akkoma">
<a href="https://akkoma.social" target="_blank">
@ -63,7 +63,7 @@
<p>Sneexy#3963<small><a href="https://revolt.chat" target="_blank">@revolt.chat</a></small></p>
</section>
<span class="dot2"></span>
<span class="dot"></span>
<section class="matrix">
<a href="https://matrix.org" target="_blank">
@ -72,7 +72,7 @@
<p>@sneexy<small><a href="https://matrix.to/#/@sneexy:tchncs.de" target="_blank">:tchncs.de</a></small></p>
</section>
<span class="dot2"></span>
<span class="dot"></span>
<section class="xmpp">
<a href="https://xmpp.org" target="_blank">
@ -94,7 +94,7 @@
<p>Sneexy<small><a href="https://listenbrainz.org/user/Sneexy" target="_blank">@listenbrainz.org</a></small></p>
</section>
<span class="dot2"></span>
<span class="dot"></span>
<section class="gitgay">
<a href="https://git.gay" target="_blank">
@ -103,7 +103,7 @@
<p>Sneexy<small><a href="https://git.gay/sneexy" target="_blank">@git.gay</a></small></p>
</section>
<span class="dot2"></span>
<span class="dot"></span>
<section class="github">
<a href="https://github.com" target="_blank">
@ -125,7 +125,7 @@
<p>@Sneexy<small><a href="https://retrospring.net/@Sneexy" target="_blank">@retrospring.net</a></small></p>
</section>
<span class="dot2"></span>
<span class="dot"></span>
<section class="archiveorg">
<a href="https://archive.org" target="_blank">
@ -134,16 +134,7 @@
<p>@sneexy<small><a href="https://archive.org/details/@sneexy" target="_blank">@archive.org</a></small></p>
</section>
<span class="dot2"></span>
<section class="dotfiles">
<a href="https://hyprland.org" target="_blank">
<img class="idle" src="/assets/socials/idle.apng" alt="Hyprland"/>
</a>
<p><a href="https://git.gay/sneexy/el-dotfiles" target="_blank">el-dotfiles</a></p>
</section>
<span class="dot2"></span>
<span class="dot"></span>
<section class="shitposts">
<a href="https://nextcloud.com" target="_blank">
@ -158,7 +149,7 @@
</div>
<div class="pixel-corners">
<article class="about-me">
<article id="about-me" class="about-me">
<h1>~/about-me</h1>
<p>i'm your "average" 17 year old <a href="https://en.wikipedia.org/wiki/Gay_men" target="_blank">gay</a> foss enjoyer.</p>
<p>i enjoy messing around with random technology things, especially retro and unique things. modern tech things too depending on how much i can actually do with them.</p>
@ -172,18 +163,26 @@
</div>
<div class="pixel-corners">
<article class="fun-facts">
<article id="fun-facts" class="fun-facts">
<h1>~/fun-facts</h1>
<ul>
<li>my profile pictures are usually random characters from different types of media that i grayscale and use as my profile picture. my current phase is <a href="https://www.mariowiki.com/Yoshi" target="_blank">yoshi</a>.</li>
<li>i used to have a joke where i loved cheese, in a "i cannot live with cheese, give me the cheese or i die" way. technically the joke does still exist to some extent in a friend group, but otherwise has mostly died out. 🧀</li>
<li>originally starting interneting 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.</li>
<li>joined <a href="https://fediverse.info" target="_blank">fedi</a> around 2020 or so, originally on <a href="https://mas.to" target="_blank">mas.to</a> before closing shop and moving to <a href="https://types.pl" target="_blank">types.pl</a> which has a nice local community, before moving to <a href="https://miruku.cafe" target="_blank">miruku.cafe</a> for a short while before finally landing at <a href="https://lea.pet" target="_blank">lea.pet</a>.</li>
<li>i prefer lowercase when possible. it just seems more natural.</li>
<li>i prefer lowercase when possible. it just feels more natural.</li>
<li>i am <i>terrible</i> at spelling. i had to at least search up like 10 words when typing this entire site out to make sure i didn't misspell anything.</li>
<li>this is the third <i>real</i> site that i've made.</li>
</ul>
</article>
</div>
<footer>
<a href="https://git.gay/sneexy/pages" target="_blank">site source</a>
<span class="dot"></span>
<p>nuts</p>
</footer>
<img class="yoshi" src="/assets/yoshi.gif" alt="GIF of a dancing yoshi" />
</div>

View file

@ -295,6 +295,17 @@ a {
font-size: 20px;
}
footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 2rem;
}
footer > a, footer > p {
color: var(--header);
font-size: 16px;
}
/* -- end of usual css things -- */
/* -- styling the rest of the elements/custom stuff -- */
@ -315,8 +326,9 @@ a {
margin: -2px;
}
.navnt {
.nav, .nav > a {
color: var(--header-2);
font-size: 16px;
text-shadow: 0px 0px 8px var(--header-2);
}
@ -332,7 +344,7 @@ a {
font-size: 16px;
}
.dot2 {
.links-n-socials > .fedi > .dot, .links-n-socials > .messaging > .dot, .links-n-socials > .platforms > .dot, .links-n-socials > .misc > .dot {
color: var(--accent-1);
text-shadow: 0px 0px 8px var(--accent-1);
margin-top: 22px;
@ -340,6 +352,13 @@ a {
margin-right: 14px;
}
footer > .dot {
font-size: 16px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.separator {
display: flex;
margin-left: auto;
@ -378,14 +397,14 @@ a {
}
/* -- below is all the css used only for the social cards, and its probably Very Bad so get a puke bag or something read -- */
.fedi, .firefish, .firefish-icon, .akkoma, .akkoma-icon, .messaging, .revolt, .revolt-icon, .matrix, .matrix-icon, .xmpp, .xmpp-icon, .platforms, .listenbrainz, .listenbrainz-icon, .gitgay, .gitgay-icon, .github, .github-icon, .misc, .retrospring, .retrospring-icon, .archiveorg, .archive-icon, .dotfiles, .idle, .shitposts, .amoguscloud, .warning {
.fedi, .firefish, .firefish-icon, .akkoma, .akkoma-icon, .messaging, .revolt, .revolt-icon, .matrix, .matrix-icon, .xmpp, .xmpp-icon, .platforms, .listenbrainz, .listenbrainz-icon, .gitgay, .gitgay-icon, .github, .github-icon, .misc, .retrospring, .retrospring-icon, .archiveorg, .archive-icon, .shitposts, .amoguscloud, .warning {
display: flex;
flex-direction: row;
margin-left: auto;
margin-right: auto;
}
.firefish-icon, .akkoma-icon, .revolt-icon, .matrix-icon, .xmpp-icon, .listenbrainz-icon, .gitgay-icon, .github-icon, .retrospring-icon, .archive-icon, .idle, .amoguscloud {
.firefish-icon, .akkoma-icon, .revolt-icon, .matrix-icon, .xmpp-icon, .listenbrainz-icon, .gitgay-icon, .github-icon, .retrospring-icon, .archive-icon, .amoguscloud {
margin-top: 20px;
margin-right: 8px;
width: 30px;