kmoschcau/f1r3.xyz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: kmoschcau:f03aae2c03220c4141bb00bfeb931d27eb9b1592
Branches Tags
kmoschcau:main
..
compare: kmoschcau:d0c77a00d1c5b3ee7f93e79afdfb9025f81b2263
Branches Tags
kmoschcau:main

2 Commits
f03aae2c03 ... d0c77a00d1

Author SHA1 Message Date
Kai Moschcau
d0c77a00d1 feat: wrap all links in a nav-element 2026-03-08 15:43:01 +01:00
Kai Moschcau
70a5e4933c feat: add a link to my Keyoxide entry 2026-03-08 15:42:01 +01:00
4 changed files with 62 additions and 32 deletions
Expand all files Collapse all files

1
.cspell.yaml
View File

@@ -2,4 +2,5 @@
version: "0.2" version: "0.2"
language: "en" language: "en"
words: words:
- keyoxide
- markuplint - markuplint

7
src/images/keyoxide.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m14.662 2.7734c-0.86914 8.5e-6 -1.5742 0.70509-1.5742 1.5742 0 0.52528 0.26095 1.006 0.67773 1.2949 0.12007 0.083138 0.18912 0.092562 0.20508 0.22266 0.01604 0.13001-0.16211 0.25-0.16211 0.25l-3.3242 2.5859v-0.5293c0.14724-1.4561-0.83223-2.9405-2.2754-3.2793-1.719-0.502-3.7931 1.0298-3.7931 2.6452 0 1.9182 0.00778 8.9247 0.00211 13.429-0.00211 1.6772 1.3577 3.0332 3.0332 3.0332s3.0352-1.3576 3.0352-3.0332v-0.39648c1.365 0.90898 2.7303 1.8174 4.0938 2.7285 1.1299 0.93021 2.9078 0.93859 3.9902-0.07422 1.3712-1.1518 1.323-3.4999-0.0918-4.5957-1.935-1.3219-3.8897-2.6181-5.8418-3.916l5.7734-4.4883c1.1632-0.90466 1.4954-2.5005 0.83398-3.7832-0.04938-0.095755-0.06511-0.12998-0.16797-0.16992-0.10277-0.039938-0.18425 0.00439-0.28711 0.042969-0.14138 0.053062-0.29257 0.080078-0.44531 0.080078-0.69894 0-1.2656-0.56662-1.2656-1.2656 9.4e-5 -0.094853 0.01636-0.14996-0.01172-0.20898-0.02807-0.059023-0.10233-0.097092-0.17578-0.10547-0.12191-0.013926-0.24437-0.020476-0.36719-0.019531-0.12049 8.587e-4 -0.21169-0.00952-0.26367-0.097656-0.05189-0.088142-0.02344-0.18975-0.02344-0.34961 0-0.86915-0.70504-1.5742-1.5742-1.5742z"/>
<path d="m12.806 3.085a1.0735 1.0735 0 0 1-1.0735 1.0735 1.0735 1.0735 0 0 1-1.0735-1.0735 1.0735 1.0735 0 0 1 1.0735-1.0735 1.0735 1.0735 0 0 1 1.0735 1.0735z"/>
<path d="m13.458 1.0033a0.70038 0.70038 0 0 1-0.70038 0.70038 0.70038 0.70038 0 0 1-0.70038-0.70038 0.70038 0.70038 0 0 1 0.70038-0.70038 0.70038 0.70038 0 0 1 0.70038 0.70038z"/>
<path d="m11.339 0.48902a0.48902 0.48902 0 0 1-0.48902 0.48902 0.48902 0.48902 0 0 1-0.48902-0.48902 0.48902 0.48902 0 0 1 0.48902-0.48902 0.48902 0.48902 0 0 1 0.48902 0.48902z"/>
<path d="m19.203 5.1296a0.85797 0.85797 0 0 1-0.85797 0.85797 0.85797 0.85797 0 0 1-0.85797-0.85797 0.85797 0.85797 0 0 1 0.85797-0.85797 0.85797 0.85797 0 0 1 0.85797 0.85797z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

77
src/pages/index.astro
View File

@@ -5,6 +5,7 @@ import InlineImage from "../components/inline-image.astro";
import InlineSvg from "../components/inline-svg.astro"; import InlineSvg from "../components/inline-svg.astro";
import avatar from "../images/Icon Alec 150.png"; import avatar from "../images/Icon Alec 150.png";
import furAffinityLogo from "../images/fa-logo.webp"; import furAffinityLogo from "../images/fa-logo.webp";
import KeyoxideLogo from "../images/keyoxide.svg";
import MastodonLogo from "../images/mastodon-logo.svg"; import MastodonLogo from "../images/mastodon-logo.svg";
import MatrixLogo from "../images/matrix-logo.svg"; import MatrixLogo from "../images/matrix-logo.svg";
import "../styles/global.css"; import "../styles/global.css";
@@ -39,38 +40,50 @@ import "../styles/global.css";
<p>A zebra from Germany</p> <p>A zebra from Germany</p>
<p>(Web-)dev by day – furry, gamer and game master by night</p> <p>(Web-)dev by day – furry, gamer and game master by night</p>
</section> </section>
<ul class="flex flex-col gap-2"> <nav>
<li> <ul class="flex flex-col gap-2">
<ExternalLink <li>
cssClass="link-matrix" <ExternalLink
href="https://matrix.to/#/@f1r3w4rr10r:bark.lgbt" cssClass="link-matrix"
title="My matrix account" href="https://matrix.to/#/@f1r3w4rr10r:bark.lgbt"
> title="My matrix account"
<InlineSvg SvgComponent={MatrixLogo} slot="logo" /> >
<span>@f1r3w4rr10r:bark.lgbt</span> <InlineSvg SvgComponent={MatrixLogo} slot="logo" />
</ExternalLink> <span>@f1r3w4rr10r:bark.lgbt</span>
</li> </ExternalLink>
<li> </li>
<ExternalLink <li>
cssClass="link-mastodon" <ExternalLink
href="https://bark.lgbt/@f1r3w4rr10r" cssClass="link-mastodon"
title="My Mastodon account" href="https://bark.lgbt/@f1r3w4rr10r"
> title="My Mastodon account"
<InlineSvg SvgComponent={MastodonLogo} slot="logo" /> >
<span>@f1r3w4rr10r@bark.lgbt</span> <InlineSvg SvgComponent={MastodonLogo} slot="logo" />
</ExternalLink> <span>@f1r3w4rr10r@bark.lgbt</span>
</li> </ExternalLink>
<li> </li>
<ExternalLink <li>
cssClass="link-fur-affinity" <ExternalLink
href="https://www.furaffinity.net/user/f1r3w4rr10r/" cssClass="link-fur-affinity"
title="My Fur Affinity account" href="https://www.furaffinity.net/user/f1r3w4rr10r/"
> title="My Fur Affinity account"
<InlineImage src={furAffinityLogo} slot="logo" /> >
<span>f1r3w4rr10r</span> <InlineImage src={furAffinityLogo} slot="logo" />
</ExternalLink> <span>f1r3w4rr10r</span>
</li> </ExternalLink>
</ul> </li>
<li>
<ExternalLink
cssClass="link-keyoxide"
href="https://keyoxide.org/B73A94768A3D1C0BA02B2CC9D8DEF70F1E71C8CF"
title="My Keyoxide entry"
>
<InlineSvg SvgComponent={KeyoxideLogo} slot="logo" />
<span>Keyoxide</span>
</ExternalLink>
</li>
</ul>
</nav>
</article> </article>
</main> </main>
</body> </body>

9
src/styles/global.css
View File

@@ -11,6 +11,11 @@
from var(--color-fur-affinity) calc(l - var(--hover-darken)) c h from var(--color-fur-affinity) calc(l - var(--hover-darken)) c h
); );
--color-keyoxide: #6855c3;
--color-keyoxide-hover: oklch(
from var(--color-keyoxide) calc(l - var(--hover-darken)) c h
);
--color-mastodon: oklch(from #6364ff var(--link-bg-l) c h); --color-mastodon: oklch(from #6364ff var(--link-bg-l) c h);
--color-mastodon-hover: oklch( --color-mastodon-hover: oklch(
from var(--color-mastodon) calc(l - var(--hover-darken)) c h from var(--color-mastodon) calc(l - var(--hover-darken)) c h
@@ -37,6 +42,10 @@
@apply bg-fur-affinity hover:bg-fur-affinity-hover text-white; @apply bg-fur-affinity hover:bg-fur-affinity-hover text-white;
} }
.link-keyoxide {
@apply bg-keyoxide hover:bg-keyoxide-hover text-white;
}
.link-mastodon { .link-mastodon {
@apply bg-mastodon hover:bg-mastodon-hover text-white; @apply bg-mastodon hover:bg-mastodon-hover text-white;
} }