mirror of
https://codeberg.org/cyrneko/pages.git
synced 2025-05-04 18:13:07 +00:00
tap-able, JS-less tooltips on mobile!
This commit is contained in:
cyrneko
parent
049c8c6a56
commit
2200762412
2 changed files with 143 additions and 102 deletions
203
index.html
203
index.html
|
|
@ -32,114 +32,117 @@
|
|||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<section>
|
||||
<div class="card">
|
||||
<h1>Hello, traveller!</h1>
|
||||
<p>Welcome to my corner of the interwebs</p>
|
||||
<p>My name is Alexia <span class="badge">ΘΔ & 🏳️⚧️</span> you may know me from <a
|
||||
href="https://shrimp.starlightnet.work/@Alexia" target="_blank">the
|
||||
Fediverse</a>,
|
||||
<a href="https://bsky.app/profile/cyrneko.eu" target="_blank">Bluesky</a> or a joined project between me and my
|
||||
friend Nelson,
|
||||
<a href="https://starlightnet.work" target="_blank">The Starlight Network</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<h2>Contacts!</h2>
|
||||
<p>If ya ever wanna reach me, this is how</p>
|
||||
<p><small>in no particular order</small></p>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://i.delta.chat/#93165AE1841BF38DF9342883A4FDB054FC8259B9&a=ilhgt30oj%40arcanechat.me&n=Alexia&i=uTt5rrFhLCoQ8Kj3yYtCsl3k&s=OFxGAtBa-rNPCfVT6Dfa0I9N"
|
||||
target="_blank">Delta.chat</a>
|
||||
</li>
|
||||
<li><a href="https://signal.me/#eu/aaYm8Vi5kvfj1o__j6Sh17k2WkpH4KNc-TUGUZZa-PU1zvF2tqNFm6LKmNDSZDbb"
|
||||
target="_blank">Signal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://matrix.to/#/@alexia:thomcat.rocks" target="_blank">Matrix</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="xmpp:cyrus42@disroot.org">XMPP</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<h2>Stuff I do</h2>
|
||||
<ul>
|
||||
<li><a href="https://codeberg.org/cyrneko" target="_blank">rarely write code (codeberg)</a></li>
|
||||
<li><a href="https://github.com/cyrneko" target="_blank">↑ the same but on GitHub <strike>to abuse
|
||||
actions</strike></a></li>
|
||||
<li><a href="https://paper.wf/alexia" target="_blank">Blogposts!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<h2>Supporting me</h2>
|
||||
<p>If you ever wanna support me, I am on <a href="https://ko-fi.com/cyrneko" target="_blank">Ko-Fi</a>, <a
|
||||
href="https://github.com/sponsors/cyrneko" target="_blank">GitHub Sponsors</a>, and I have a Monero wallet you
|
||||
can send XMR
|
||||
to:</p>
|
||||
<details>
|
||||
<summary>Expand for wallet address...</summary>
|
||||
<p style="overflow-x:scroll">
|
||||
<code>87a8Ne2eX6tPqSzoLxHpmpAXihe86AwLiYQbP9g9Un4QJib3H62Phoed4zLK2A9tu8DcdENmnmFGc4MSVVUUU9M1DBfevk2</code>
|
||||
<div class="card">
|
||||
<h1>Hello, traveller!</h1>
|
||||
<p>Welcome to my corner of the interwebs</p>
|
||||
<p>My name is Alexia <span class="badge"><abbr tabindex="0" title="Therian, Plural and Trans.">ΘΔ &
|
||||
🏳️⚧️</abbr></span> you
|
||||
may know me from <a href="https://shrimp.starlightnet.work/@Alexia" target="_blank">the
|
||||
Fediverse</a>,
|
||||
<a href="https://bsky.app/profile/cyrneko.eu" target="_blank">Bluesky</a> or a joined project between me and
|
||||
my
|
||||
friend Nelson,
|
||||
<a href="https://starlightnet.work" target="_blank">The Starlight Network</a>
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<h2>Silly buttons :3</h2>
|
||||
<!-- a mess of buttons...who dropped them? -->
|
||||
<a href="https://freeplay.floof.company"><img src="/assets/free.gif" alt="Freeplay" width="88px"
|
||||
height="31px"></a> <img src="/assets/fediverse.gif" alt="Join the fediverse" width="88px" height="31px"> <img
|
||||
src="/assets/discordnoway.gif" alt="Discord? NO Way!" width="88px" height="31px"> <img src="/assets/firefox.png"
|
||||
alt="Firefox: Take back the web" width="88px" height="31px"> <a href="https://n.cyrneko.eu"><img
|
||||
src="https://n.kitsu.page/button.png" width="88" height="31" alt="n*"></a> <img src="/assets/wetdryworld.png"
|
||||
alt="WetDry.world" width="88px" height="31px"> <a
|
||||
href="https://www.youtube.com/channel/UC4rqhyiTs7XyuODcECvuiiQ"><img src="/assets/scotthere.gif"
|
||||
alt="Hey All, Scott Here!" width="88px" height="31px"></a> <img src="/assets/ublock.png" alt="uBlock Origin"
|
||||
width="88px" height="31px">
|
||||
<hr>
|
||||
<h3>My very own 88x31!</h3>
|
||||
<img src="/assets/88x31.png" alt="my own 88x31 courtesy of kuropy" width="88px" height="31px">
|
||||
<details>
|
||||
<summary>HTML to copy...</summary>
|
||||
<div class="card">
|
||||
<h2>Contacts!</h2>
|
||||
<p>If ya ever wanna reach me, this is how</p>
|
||||
<p><small>in no particular order</small></p>
|
||||
<ul>
|
||||
<li><a
|
||||
href="https://i.delta.chat/#93165AE1841BF38DF9342883A4FDB054FC8259B9&a=ilhgt30oj%40arcanechat.me&n=Alexia&i=uTt5rrFhLCoQ8Kj3yYtCsl3k&s=OFxGAtBa-rNPCfVT6Dfa0I9N"
|
||||
target="_blank">Delta.chat</a>
|
||||
</li>
|
||||
<li><a href="https://signal.me/#eu/aaYm8Vi5kvfj1o__j6Sh17k2WkpH4KNc-TUGUZZa-PU1zvF2tqNFm6LKmNDSZDbb"
|
||||
target="_blank">Signal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://matrix.to/#/@alexia:thomcat.rocks" target="_blank">Matrix</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="xmpp:cyrus42@disroot.org">XMPP</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<h2>Stuff I do</h2>
|
||||
<ul>
|
||||
<li><a href="https://codeberg.org/cyrneko" target="_blank">rarely write code (codeberg)</a></li>
|
||||
<li><a href="https://github.com/cyrneko" target="_blank">↑ the same but on GitHub <strike>to abuse
|
||||
actions</strike></a></li>
|
||||
<li><a href="https://paper.wf/alexia" target="_blank">Blogposts!</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<h2>Supporting me</h2>
|
||||
<p>If you ever wanna support me, I am on <a href="https://ko-fi.com/cyrneko" target="_blank">Ko-Fi</a>, <a
|
||||
href="https://github.com/sponsors/cyrneko" target="_blank">GitHub Sponsors</a>, and I have a Monero wallet
|
||||
you
|
||||
can send XMR
|
||||
to:</p>
|
||||
<details>
|
||||
<summary>Expand for wallet address...</summary>
|
||||
<p style="overflow-x:scroll">
|
||||
<code>87a8Ne2eX6tPqSzoLxHpmpAXihe86AwLiYQbP9g9Un4QJib3H62Phoed4zLK2A9tu8DcdENmnmFGc4MSVVUUU9M1DBfevk2</code>
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<h2>Silly buttons :3</h2>
|
||||
<!-- a mess of buttons...who dropped them? -->
|
||||
<a href="https://freeplay.floof.company"><img src="/assets/free.gif" alt="Freeplay" width="88px"
|
||||
height="31px"></a> <img src="/assets/fediverse.gif" alt="Join the fediverse" width="88px" height="31px">
|
||||
<img src="/assets/discordnoway.gif" alt="Discord? NO Way!" width="88px" height="31px"> <img
|
||||
src="/assets/firefox.png" alt="Firefox: Take back the web" width="88px" height="31px"> <a
|
||||
href="https://n.cyrneko.eu"><img src="https://n.kitsu.page/button.png" width="88" height="31" alt="n*"></a>
|
||||
<img src="/assets/wetdryworld.png" alt="WetDry.world" width="88px" height="31px"> <a
|
||||
href="https://www.youtube.com/channel/UC4rqhyiTs7XyuODcECvuiiQ"><img src="/assets/scotthere.gif"
|
||||
alt="Hey All, Scott Here!" width="88px" height="31px"></a> <img src="/assets/ublock.png" alt="uBlock Origin"
|
||||
width="88px" height="31px">
|
||||
<hr>
|
||||
<h3>My very own 88x31!</h3>
|
||||
<img src="/assets/88x31.png" alt="my own 88x31 courtesy of kuropy" width="88px" height="31px">
|
||||
<details>
|
||||
<summary>HTML to copy...</summary>
|
||||
<p>
|
||||
<code><a href="http://cyrneko.eu" target="_blank" rel="noopener noreferrer"><img src="https://cyrneko.eu/assets/88x31.png" alt="Alexia's button, featuring their character comet holding a non-binary pride flag"></a></code>
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<p>
|
||||
<code><a href="http://cyrneko.eu" target="_blank" rel="noopener noreferrer"><img src="https://cyrneko.eu/assets/88x31.png" alt="Alexia's button, featuring their character comet holding a non-binary pride flag"></a></code>
|
||||
<img src="/assets/neocat_floof.png" alt="Neocat" height="32" width="32" style="vertical-align: bottom;"> ←
|
||||
Decorative
|
||||
kitty
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
<p>
|
||||
<img src="/assets/neofox_floof.png" alt="Neofox" height="32" width="32" style="vertical-align: bottom;"> ← <a
|
||||
href="https://tasiaiso.vulpecula.zone">My favourite foxie <3 </a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<p>
|
||||
<img src="/assets/neocat_floof.png" alt="Neocat" height="32" width="32" style="vertical-align: bottom;"> ←
|
||||
Decorative
|
||||
kitty
|
||||
</p>
|
||||
<p>
|
||||
<img src="/assets/neofox_floof.png" alt="Neofox" height="32" width="32" style="vertical-align: bottom;"> ← <a
|
||||
href="https://tasiaiso.vulpecula.zone">My favourite foxie <3 </a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="card">
|
||||
<p>This website makes use of CSS variables and <code>hsl()</code> to achieve easily interchangeable colors!</p>
|
||||
<p>Sometimes I swap 'em out, you can see the current color below!</p>
|
||||
<noscript>
|
||||
The below snippet only works with Javascript enabled, sadly. The hue will show up empty, but I promise it
|
||||
isn't.
|
||||
</noscript>
|
||||
<p>Current Hue: <span id="currentHue"></span></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p>This website makes use of CSS variables and <code>hsl()</code> to achieve easily interchangeable colors!</p>
|
||||
<p>Sometimes I swap 'em out, you can see the current color below!</p>
|
||||
<noscript>
|
||||
The below snippet only works with Javascript enabled, sadly. The hue will show up empty, but I promise it
|
||||
isn't.
|
||||
</noscript>
|
||||
<p>Current Hue: <span id="currentHue"></span></p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -96,8 +96,10 @@ hr {
|
|||
margin-block: var(--spacing);
|
||||
}
|
||||
|
||||
a:hover:not(:has(img)), a:visited:hover:not(:has(img)),
|
||||
a:active:not(:has(img)), a:visited:active:not(:has(img)) {
|
||||
a:hover:not(:has(img)),
|
||||
a:visited:hover:not(:has(img)),
|
||||
a:active:not(:has(img)),
|
||||
a:visited:active:not(:has(img)) {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--foreground);
|
||||
box-shadow: 0px 0px 0px 5px var(--foreground);
|
||||
|
|
@ -124,4 +126,40 @@ span.badge {
|
|||
padding-block: var(--spacing-small);
|
||||
background-color: var(--background-alt);
|
||||
border-radius: var(--rounding-big);
|
||||
}
|
||||
|
||||
@media (pointer: coarse),
|
||||
(hover: none) {
|
||||
[title] {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[title]:focus::after,
|
||||
[title]:hover::after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-alt);
|
||||
width: max(100%, 50vw);
|
||||
padding: var(--spacing);
|
||||
z-index: 10;
|
||||
border-radius: var(--rounding);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
|
||||
animation: 0.3s slidein;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
opacity: 0;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
top: 120;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue