mirror of
https://codeberg.org/cyrneko/pages.git
synced 2025-05-04 18:13:07 +00:00
huge redesign!
This commit is contained in:
cyrneko
parent
60b997cba3
commit
8003633ff0
8 changed files with 226 additions and 378 deletions
18
assets/favicon-dark.svg
Normal file
18
assets/favicon-dark.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512" id="svg2">
|
||||
<defs id="defs4"/>
|
||||
<g transform="translate(0,-540.36215)" id="layer1" style="display:inline"/>
|
||||
<g id="layer4">
|
||||
<path d="m 99.642857,372.89287 21.785713,-32.85716 c 49.03143,108.53575 146.58861,97.78673 182.04755,84.05832 l 65.98417,0.6325 c -70.38465,58.2847 -200.42147,64.88342 -269.817433,-51.83366 z" id="path3617" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="M 262.0447,110.10073 281.74984,144.682 C 163.23941,132.87659 121.62689,223.45238 115.78657,261.02493 L 82.246722,317.85265 C 66.963016,227.7554 126.26677,111.84086 262.0447,110.10073 z" id="path3617-1" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 409.18551,382.16109 -42.02656,-0.47411 c 69.479,-96.73034 14.07005,-177.80711 -15.54857,-201.65125 l -32.44432,-57.46022 c 85.66836,31.81255 156.40142,141.12837 90.01945,259.58558 z" id="path3617-1-6" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 203.66909,268.68016 0.40989,39.4014 5.12362,0 -0.40989,-7.73068 90.58557,0 0,7.98003 5.53351,0 -0.40989,-39.65075 -5.32856,0 0,9.47627 -90.38063,-1.24686 0,-8.22941 -5.12362,0 z" id="path3590" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.33818781;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"/>
|
||||
</g>
|
||||
<g id="layer2" style="display:inline"/>
|
||||
<g id="layer3" style="display:inline">
|
||||
<path d="m 100.76752,386.39291 c 10.60392,14.4029 20.29646,25.9683 26.89531,31.69354 L 28.536809,418.05581 176.95001,171.94625 c 16.11058,-7.71372 32.21323,-15.64157 48.48733,-18.94036 l -140.331988,233.23012 15.662168,0.1569 z" id="path3610" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 211.96428,111.46428 c 21.1726,-5.85415 27.84675,-4.45908 40.53572,-6.07143 l 7.85714,-11.964279 130.35715,228.749999 c 5.32435,-16.37343 5.43563,-36.35592 4.64286,-56.96428 L 261.07143,30.214285 211.96428,111.46428 z" id="path3613" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 433.35544,330.17255 c -3.0644,16.05129 -8.25496,28.154 -13.63706,39.90102 l 8.5863,16.41498 -269.96327,0.25253 c 12.58134,13.10651 26.90429,23.16519 42.17387,31.56727 l 283.09525,-0.25254 -50.25509,-87.88326 z" id="path3615" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
18
assets/favicon.svg
Normal file
18
assets/favicon.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512" id="svg2">
|
||||
<defs id="defs4"/>
|
||||
<g transform="translate(0,-540.36215)" id="layer1" style="display:inline"/>
|
||||
<g id="layer4">
|
||||
<path d="m 99.642857,372.89287 21.785713,-32.85716 c 49.03143,108.53575 146.58861,97.78673 182.04755,84.05832 l 65.98417,0.6325 c -70.38465,58.2847 -200.42147,64.88342 -269.817433,-51.83366 z" id="path3617" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="M 262.0447,110.10073 281.74984,144.682 C 163.23941,132.87659 121.62689,223.45238 115.78657,261.02493 L 82.246722,317.85265 C 66.963016,227.7554 126.26677,111.84086 262.0447,110.10073 z" id="path3617-1" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 409.18551,382.16109 -42.02656,-0.47411 c 69.479,-96.73034 14.07005,-177.80711 -15.54857,-201.65125 l -32.44432,-57.46022 c 85.66836,31.81255 156.40142,141.12837 90.01945,259.58558 z" id="path3617-1-6" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 203.66909,268.68016 0.40989,39.4014 5.12362,0 -0.40989,-7.73068 90.58557,0 0,7.98003 5.53351,0 -0.40989,-39.65075 -5.32856,0 0,9.47627 -90.38063,-1.24686 0,-8.22941 -5.12362,0 z" id="path3590" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.33818781;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"/>
|
||||
</g>
|
||||
<g id="layer2" style="display:inline"/>
|
||||
<g id="layer3" style="display:inline">
|
||||
<path d="m 100.76752,386.39291 c 10.60392,14.4029 20.29646,25.9683 26.89531,31.69354 L 28.536809,418.05581 176.95001,171.94625 c 16.11058,-7.71372 32.21323,-15.64157 48.48733,-18.94036 l -140.331988,233.23012 15.662168,0.1569 z" id="path3610" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 211.96428,111.46428 c 21.1726,-5.85415 27.84675,-4.45908 40.53572,-6.07143 l 7.85714,-11.964279 130.35715,228.749999 c 5.32435,-16.37343 5.43563,-36.35592 4.64286,-56.96428 L 261.07143,30.214285 211.96428,111.46428 z" id="path3613" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
<path d="m 433.35544,330.17255 c -3.0644,16.05129 -8.25496,28.154 -13.63706,39.90102 l 8.5863,16.41498 -269.96327,0.25253 c 12.58134,13.10651 26.90429,23.16519 42.17387,31.56727 l 283.09525,-0.25254 -50.25509,-87.88326 z" id="path3615" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
BIN
assets/neocat_floof.png
Normal file
BIN
assets/neocat_floof.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
|
|
@ -1,45 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Donations</title>
|
||||
<link rel="stylesheet" href="/styles/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Donations</h1>
|
||||
<p>I accept donations on:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/sponsors/cyrneko">GitHub Sponsors</a></li>
|
||||
<li><a href="https://ko-fi.com/cyrneko">Ko-Fi</a></li>
|
||||
<li>Monero (see below)</li>
|
||||
</ul>
|
||||
<p>I also take commissions for small websites,
|
||||
primarily through <strong>Ko-Fi</strong>, but you can
|
||||
also contact me personally and pay with Monero or through GitHub Sponsors.</p>
|
||||
<p>When paying with Monero or through GitHub Sponsors, please note that
|
||||
you have to pay up-front (e.g before you get the product) and get less protections
|
||||
than through Ko-Fi.</p>
|
||||
<!-- <p> -->
|
||||
<!-- I accept donations through -->
|
||||
<!-- <a href="https://ko-fi.com/cyrneko">Ko-Fi</a> and also through the -->
|
||||
<!-- monero wallet listed below. I also take -->
|
||||
<!-- <a href="https://ko-fi.com/cyrneko/commissions" -->
|
||||
<!-- >commissions on websites</a -->
|
||||
<!-- >. You can also commission me by contacting me directly and paying with -->
|
||||
<!-- Monero, but payment there has to be up-front and with no guarantees. -->
|
||||
<!-- </p> -->
|
||||
<!-- <p>I have also started accepting donations through -->
|
||||
<!-- <a href="https://github.com/sponsors/cyrneko">GitHub Sponsors</a></p> -->
|
||||
<p>Monero wallet address:</p>
|
||||
<div style="overflow: scroll; outline: 2px solid grey; padding-left: 8px">
|
||||
<code>
|
||||
<pre>
|
||||
87a8Ne2eX6tPqSzoLxHpmpAXihe86AwLiYQbP9g9Un4QJib3H62Phoed4zLK2A9tu8DcdENmnmFGc4MSVVUUU9M1DBfevk2</pre
|
||||
>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
71
dvd.html
71
dvd.html
|
|
@ -1,71 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>dvd</title>
|
||||
<style>
|
||||
:root {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
marquee {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: invert(100);
|
||||
}
|
||||
|
||||
div[id^="marquee"] {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#dvd {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
animation:
|
||||
marquee-horizontal 3s linear infinite alternate,
|
||||
marquee-vertical 3.5s linear infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes marquee-horizontal {
|
||||
from {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
left: calc(100vw - 88px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee-vertical {
|
||||
from {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
top: calc(100vh - 38.77px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="dvd">
|
||||
<img src="/assets/dvd.png" alt="the DVD logo" width="88px">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
54
fedi.html
54
fedi.html
|
|
@ -1,54 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Fediverse</title>
|
||||
<link rel="stylesheet" href="/styles/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>The Fediverse as a Standalone Place</h1>
|
||||
<hr>
|
||||
<p>The Fediverse is often pitched as an alternative to Twitter, or Bluesky,
|
||||
or Tumblr, or any number of other communities and other software. I reject
|
||||
this notion.</p>
|
||||
<p>Seeing the Fediverse as merely a clone of other existing platforms has
|
||||
limited us in what we can build as we view another platform's decisions as
|
||||
a blueprint for our own.</p>
|
||||
<!-- <blockquote>Especially the growing number of projects that are not
|
||||
microblogging,
|
||||
like Peertube, have had little attention given to them compared to other
|
||||
projects.</blockquote> -->
|
||||
<p>And so, I invite you, reader. I invite you to shape this shared space of
|
||||
ours.</p>
|
||||
<p><a href="https://joinmastodon.org" target="_blank"
|
||||
rel="noopener noreferrer">Join a Mastodon server</a>, <a
|
||||
href="https://fedidb.org/software" target="_blank"
|
||||
rel="noopener noreferrer">or any other
|
||||
myriad of projects</a>, no hard feelings
|
||||
if you end up not liking it.</p>
|
||||
<p>Whilst you're at it, go and follow <code>@cyrus@wetdry.world</code>!</p>
|
||||
<hr>
|
||||
<details>
|
||||
<summary>more...</summary>
|
||||
<p>This however, isn't the end of my thoughts.</p>
|
||||
<p>Over the past few years, development in and around the fediverse has
|
||||
massively accelerated. This is not just limited to Mastodon, but also
|
||||
other software like GoToSocial, NLNet grants for various
|
||||
ActivityPub-based projects, and even multi-protocol work.</p>
|
||||
<p>Over this time, a distinct culture has developed, especially so as
|
||||
people were looking for something to replace Twitter with. I believe
|
||||
however that we should never have focused so much on that aspect.</p>
|
||||
<p>Of course, I can't change the past, and the goal of a Twitter
|
||||
replacement is inevitably something that has fueled development. I only
|
||||
hope that in the future we are able to build software that transcends
|
||||
this goal, has it's own distinct identity, without having massive
|
||||
drawbacks in regards to it's speed, ease of use, or accessibility.</p>
|
||||
</details>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
196
index.html
196
index.html
|
|
@ -4,92 +4,126 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alexia's webplace</title>
|
||||
<link rel="stylesheet" href="/styles/styles.css">
|
||||
<link rel="stylesheet" id="stlyesheet" href="/styles/styles.css">
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
|
||||
<!-- <link rel="icon" href="/assets/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">
|
||||
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" media="(prefers-color-scheme: light)"> -->
|
||||
|
||||
<title>Alexia's Webplace</title>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var currentHueElement = document.getElementById('currentHue');
|
||||
currentHueElement.innerHTML = window.getComputedStyle(document.body).getPropertyValue('--hue');
|
||||
|
||||
// let value = 0;
|
||||
// function updateValue(increment) {
|
||||
// value = (value + increment) % 360;
|
||||
// document.documentElement.style.setProperty('--hue', `${value}`);
|
||||
// }
|
||||
// setInterval(() => {
|
||||
// updateValue(1);
|
||||
// }, 50);
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Alexia's webplace</h1>
|
||||
<p>Hello there, fellow traveller!</p>
|
||||
<p>you have stumbled upon my website, congrats!</p>
|
||||
<p>There is a couple of things you could be looking for:</p>
|
||||
<ul>
|
||||
<li><a href="#soziales">Socials / Contacts</a></li>
|
||||
<li><a target="_blank" rel="noopener noreferrer"
|
||||
href="https://whtwnd.com/alexia.bsky.cyrneko.eu">Blogposts</a>
|
||||
(external)</li>
|
||||
<li><a href="/donations.html">Donations and Commissions</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="https://art.cyrneko.eu" target="_blank"
|
||||
rel="noopener noreferrer">Art.</a></li>
|
||||
</ul>
|
||||
<p>Also check out <a href="/fedi.html">The Fediverse as a Standalone
|
||||
Place</a></p>
|
||||
|
||||
<!-- what part 3 -->
|
||||
<h2 id="soziales">Socials and Contacts</h2>
|
||||
<p>Socials: <a href="http://wetdry.world/@cyrus" target="_blank"
|
||||
rel="noopener noreferrer">Mastodon</a>, <a
|
||||
href="http://bsky.app/profile/cyrneko.eu" target="_blank"
|
||||
rel="noopener noreferrer">Bluesky</a>
|
||||
</p>
|
||||
<p>Contacts: <a target="_blank"
|
||||
href="https://signal.me/#eu/X7bBOAGEo-D2ddHAZSm96AxSeaNYsQXnVEW4FA2Mz34R4tcM7qhJSpjFPggdFRBb"
|
||||
rel="noopener noreferrer">Signal</a>, <a target="_blank"
|
||||
href="https://matrix.to/#/@alexia:thomcat.rocks"
|
||||
rel="noopener noreferrer">Matrix</a>, <a
|
||||
href="mailto:cyrus42@getgoogleoff.me">Email</a> (<a
|
||||
href="https://keys.openpgp.org/vks/v1/by-fingerprint/AD6FFD9A3C08C23A9CF03A50801B4BD878A984A4">PGP</a>)
|
||||
</p>
|
||||
<p>Misc. stuff: <a href="https://codeberg.org/cyrneko" target="_blank"
|
||||
rel="noopener noreferrer">Codeberg</a>, <a
|
||||
href="https://github.com/cyrneko" target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a>
|
||||
</p>
|
||||
<p>Minecraft: <code>cyrneko</code></p>
|
||||
|
||||
<h2 id="buttons">Buttons</h2>
|
||||
<!-- -->
|
||||
<h3>cool stuff</h3>
|
||||
<p>Some of these have links, hover them!</p>
|
||||
<a class="webButton" href="http://wetdry.world" target="_blank"
|
||||
rel="noopener noreferrer"><img loading="lazy"
|
||||
src="/assets/wetdryworld.png"
|
||||
alt="the wetdry world background from super mario 64 together with text saying wetdry.world"></a>
|
||||
<img loading="lazy" src="/assets/firefox.png"
|
||||
alt="Firefox: Take back the web">
|
||||
<img loading="lazy" src="/assets/discordnoway.gif" alt="Discord? No Way!">
|
||||
<a class="webButton" href="https://ublockorigin.com" target="_blank"
|
||||
rel="noopener noreferrer"><img loading="lazy" src="/assets/ublock.png"
|
||||
alt="uBlock Origin NOW!"></a>
|
||||
<img loading="lazy" src="/assets/fediverse.gif" alt="Join the Fediverse!!!">
|
||||
<!-- -->
|
||||
<h3>Creatures :3</h3>
|
||||
<a href="http://freeplay.floof.company" target="_blank"
|
||||
rel="noopener noreferrer" class="webButton"><img loading="lazy"
|
||||
src="/assets/free.gif"
|
||||
alt="freeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"></a>
|
||||
<a href="http://neil.cyrneko.eu" target="_blank" rel="noopener noreferrer"
|
||||
class="webButton"><img loading="lazy"
|
||||
src="https://neil.cyrneko.eu/button.png" alt="neil"></a>
|
||||
</a>
|
||||
<!-- -->
|
||||
<h3>My button</h3>
|
||||
<p>Thanks to <a href="http://kyropy.neocities.org" target="_blank"
|
||||
rel="noopener noreferrer">kyropy</a> for making this!</p>
|
||||
<img loading="lazy" src="/assets/88x31.png" alt="my own 88x31 button!">
|
||||
<p>You can embed this on your own website too!</p>
|
||||
<details>
|
||||
<summary>expand for HTML to embed</summary>
|
||||
<code><p>
|
||||
<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>
|
||||
</p></code>
|
||||
</details>
|
||||
<div class="secretlove">
|
||||
<a href="/manifest.html"><button type="button">!</button></a>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<div class="card">
|
||||
<p>
|
||||
<img src="/assets/neocat_floof.png" alt="Neocat" height="32" width="32" style="vertical-align: bottom;"> ←
|
||||
Decorative
|
||||
kitty
|
||||
</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>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -1,17 +1,46 @@
|
|||
:root {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: IBMWeb, monospace;
|
||||
font-size: 1.em;
|
||||
/* Variables */
|
||||
/* Used for padding and gap */
|
||||
--spacing: 10px;
|
||||
--spacing-medium: calc(var(--spacing) * 2);
|
||||
--spacing-large: calc(var(--spacing) * 4);
|
||||
--margin-inline-text: 0px;
|
||||
--margin-inline: 16px;
|
||||
--margin-block: var(--spacing);
|
||||
--foreground: hsl(0, 0%, 65%);
|
||||
color-scheme: light dark;
|
||||
--hue: 270;
|
||||
--background: light-dark(hsl(var(--hue), 100%, 97%), hsl(var(--hue), 40%, 6.5%));
|
||||
/* used for badges ↓ */
|
||||
--background-alt: light-dark(hsl(var(--hue), 75%, 88%), hsl(var(--hue), 20%, 20%));
|
||||
--foreground: light-dark(hsl(var(--hue), 100%, 25%), hsl(var(--hue), 100%, 90%));
|
||||
/* Used for links ↓ */
|
||||
--foreground-alt: light-dark(hsl(var(--hue), 100%, 35%), hsl(var(--hue), 65%, 70%));
|
||||
|
||||
--rounding: 16px;
|
||||
--rounding-big: calc(var(--rounding) * 2);
|
||||
|
||||
--spacing-base-val: 4px;
|
||||
--spacing: calc(var(--spacing-base-val) * 2);
|
||||
--spacing-large: calc(var(--spacing-base-val) * 4);
|
||||
--spacing-small: calc(var(--spacing-base-val) / 1.5);
|
||||
|
||||
background-color: var(--background);
|
||||
background: linear-gradient(to top, rgb(85, 205, 252), rgb(179, 157, 233), rgb(247, 168, 184), rgb(246, 216, 221), rgb(255, 255, 255) 45%, rgb(255, 255, 255), rgb(255, 255, 255) 55%, rgb(246, 216, 221), rgb(247, 168, 184), rgb(179, 157, 233), rgb(85, 205, 252));
|
||||
background-size: cover;
|
||||
background-repeat: none;
|
||||
background-attachment: fixed;
|
||||
color: var(--foreground);
|
||||
font-family: InterVariable, Inter, system-ui;
|
||||
font-feature-settings:
|
||||
'liga' 1,
|
||||
'calt' 1,
|
||||
'dlig' 1,
|
||||
'tnum' 1,
|
||||
'case' 1,
|
||||
'zero' 1,
|
||||
'ss01' 1,
|
||||
'ss02' 1;
|
||||
font-size: 1.2em;
|
||||
font-weight: 450;
|
||||
line-height: 1.55em;
|
||||
}
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root {
|
||||
font-family: InterVariable, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -19,32 +48,27 @@ body {
|
|||
padding: 0px;
|
||||
}
|
||||
|
||||
body div.wrapper {
|
||||
padding: var(--spacing-medium);
|
||||
margin: auto;
|
||||
max-width: 702px;
|
||||
box-shadow: 0px 0px 48px white;
|
||||
.wrapper {
|
||||
padding-inline: var(--spacing);
|
||||
}
|
||||
|
||||
body .love {
|
||||
text-shadow: 0px 0px 24px white;
|
||||
width: fit-content;
|
||||
padding: var(--spacing);
|
||||
div.card {
|
||||
background-color: var(--background);
|
||||
margin-inline: auto;
|
||||
margin-block: var(--spacing);
|
||||
width: max(fit-content, 800px);
|
||||
max-width: 800px;
|
||||
padding: var(--spacing-large);
|
||||
border-radius: var(--rounding);
|
||||
}
|
||||
|
||||
div.center {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (prefers-color-scheme: light) {
|
||||
div.card {
|
||||
/* To make the cards stand out better against the background. Effect is *very* slight */
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: IBMWeb;
|
||||
src: url('/fonts/ibm9x16.woff');
|
||||
}
|
||||
|
||||
/* Margin Normalisation */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -52,106 +76,30 @@ h4,
|
|||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin-inline: var(--margin-inline-text);
|
||||
margin-block: var(--margin-block);
|
||||
margin-block: var(--spacing-large);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-inline: var(--margin-inline);
|
||||
margin-inline: 0px;
|
||||
margin-block: var(--margin-block);
|
||||
border-left: 2px solid var(--foreground);
|
||||
font-style: italic;
|
||||
hr {
|
||||
border-color: var(--foreground);
|
||||
margin-block: var(--spacing);
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--foreground-alt);
|
||||
}
|
||||
|
||||
/* Font normalization */
|
||||
button,
|
||||
code {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-family: monospace;
|
||||
background-color: var(--background-alt);
|
||||
padding-block: var(--spacing-small);
|
||||
padding-inline: var(--spacing);
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
summary {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #287bff;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:hover:visited {
|
||||
color: white;
|
||||
background-color: #287bff;
|
||||
}
|
||||
|
||||
/* make sure the 88x31 buttons don't have a background color applied, lol */
|
||||
.webButton:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* actually did not look that good */
|
||||
/* a:visited {
|
||||
color: #e600ff;
|
||||
} */
|
||||
|
||||
button {
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
font-family: IBMWeb, monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #e443a9;
|
||||
}
|
||||
|
||||
code p {
|
||||
outline: 1px solid var(--foreground);
|
||||
width: fit-content;
|
||||
padding: var(--spacing-medium);
|
||||
color: #e443a9;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.secretlove {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
top: 92vh;
|
||||
right: 24px;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.secretlove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.secretlove a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
background-color: white;
|
||||
color: black;
|
||||
--foreground: hsl(0, 0%, 50%);
|
||||
}
|
||||
|
||||
body div.wrapper {
|
||||
box-shadow: 0px 0px 48px hsl(0, 0%, 35%);
|
||||
}
|
||||
|
||||
body .love {
|
||||
text-shadow: 0px 0px 24px hsl(0, 0%, 35%);
|
||||
}
|
||||
span.badge {
|
||||
padding-inline: var(--spacing);
|
||||
padding-block: var(--spacing-small);
|
||||
background-color: var(--background-alt);
|
||||
border-radius: var(--rounding-big);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue