Touch up styles and buttons layout
This commit is contained in:
parent
377ae9686f
commit
c0ff5af4bb
SSH key fingerprint:
SHA256:yrp4c4hhaPoPG07fb4QyQIgAdlbUdsJvUAydJEWnfTw
4 changed files with 374 additions and 564 deletions
|
|
@ -20,6 +20,7 @@ This page aims to provide a rough timeline of each notable fork and a comparison
|
|||
|  <!--rehype:class=icon--> | Firefish | v20241205 | [@firefish@info.firefish.dev](https://info.firefish.dev/@firefish) | None | <https://firefish.dev/firefish/firefish> |
|
||||
|  <!--rehype:class=icon--> | Iceshrimp (JS) | v2023.12.11 | None | None | <https://iceshrimp.dev/iceshrimp/iceshrimp> |
|
||||
|  <!--rehype:class=icon--> | Sharkey | 2024.11.2 | [@Sharkey@sharkey.team](https://sharkey.team/@Sharkey) | <https://joinsharkey.org/> | <https://activitypub.software/TransFem-org/Sharkey> |
|
||||
<!--rehype:class=rows-->
|
||||
|
||||
### Iceshrimp
|
||||
|
||||
|
|
@ -621,4 +622,19 @@ Brief descriptions of each feature listed above. I'm keeping them vague as they
|
|||
img.icon {
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
.table-y {
|
||||
background-color: var(--success);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.table-p {
|
||||
background-color: var(--warn);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.table-n {
|
||||
background-color: var(--error);
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,12 +65,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--foreground);
|
||||
color: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.brand {
|
||||
|
|
@ -81,15 +76,8 @@
|
|||
border-radius: 20%;
|
||||
}
|
||||
|
||||
.brand > a,
|
||||
.brand > a:visited {
|
||||
.brand > a {
|
||||
font-weight: bold;
|
||||
text-decoration-color: var(--accent);
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
|
||||
.brand > a:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
const pages = getPages();
|
||||
|
||||
let ntfyLock = $state(false);
|
||||
|
||||
async function sendNtfyMessage() {
|
||||
if (ntfyLock) return;
|
||||
ntfyLock = true;
|
||||
|
|
@ -46,7 +47,8 @@
|
|||
<h1 id="about-me">About Me</h1>
|
||||
<p>
|
||||
I'm a 22 year old enby (<em>they/it</em>) from Australia (it's
|
||||
<DateTime display="time" timeZone="Australia/Brisbane" />). I like
|
||||
<DateTime display="time" timeZone="Australia/Brisbane"/>
|
||||
). I like
|
||||
cats, Linux, and programming in C# and Python (for now). You can
|
||||
find my links, projects, and other pages here.
|
||||
</p>
|
||||
|
|
@ -81,7 +83,7 @@
|
|||
|
||||
<ul class="page-links">
|
||||
{#each projects as project}
|
||||
<li>
|
||||
<li class="foreground card">
|
||||
<h3>
|
||||
<a href={project.href} target="_blank">
|
||||
{project.name}
|
||||
|
|
@ -98,7 +100,7 @@
|
|||
|
||||
<ul class="page-links">
|
||||
{#each contributions as contribution}
|
||||
<li>
|
||||
<li class="foreground card">
|
||||
<h3>
|
||||
<a href={contribution.href} target="_blank">
|
||||
{contribution.name}
|
||||
|
|
@ -136,7 +138,7 @@
|
|||
|
||||
<ol class="page-links">
|
||||
{#each pages as page}
|
||||
<li>
|
||||
<li class="foreground card">
|
||||
<h3>
|
||||
<a href={"/" + page.slug + "/"}>
|
||||
{page.title}
|
||||
|
|
@ -162,11 +164,12 @@
|
|||
{/each}
|
||||
</ol>
|
||||
|
||||
<h2 id="more">More</h2>
|
||||
<h2 id="buttons">Buttons</h2>
|
||||
|
||||
<h3 id="buttons">Buttons</h3>
|
||||
<p>Click my buttons</p>
|
||||
|
||||
<p>pancakes (me)</p>
|
||||
<div class="foreground card">
|
||||
<h3>pancakes</h3>
|
||||
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
|
|
@ -174,193 +177,6 @@
|
|||
<img src="/assets/88x31.png" alt="pancakes"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://meow.company" target="_blank" title="meow.company">
|
||||
<img
|
||||
src="https://meow.company/88x31.png"
|
||||
alt="meow dot company"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Other people and entities</p>
|
||||
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
<a href="https://aagaming.me/" target="_blank" title="aagaming">
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVR4nO3XiU/TYBjH8f59xmjUaIxGjfeBCAIqarxiVETFA5HLKxqPP8ErSiQaTYz3EY+ojG3d0R2EwU73NW1f2nWHTNicW0fSvO3TbW/74dlvbyVJkqhvUjkN6sBSHViqyLdM/at3sFQHxuYxVAVf1chDiAxBZBgmnpj16AuIvoLoG4i+M+uxLxD/BvHvkBgx60kZkl5IKZAK6rVf45Ce0PfTCUs8ZEbE1H52PbOW79x/D8z4feuxAGbyubUefStwP1rriR9idFrrqYAAHhO4k2JM5qBOB56NXV3AkXtZwMMC+Jm1HntdAPi7GB3WelIR0GEBnb+LC8HVDvD4nQzsRxB5LICfmvXoSy0qdOD31vfHv+UAazGR9AnYkBgjAjhmL2BJg70LkQdif8isTzwzokJFNuqxDxD7BPHPEP9q1hMOSLgMZG1M6cDGa9JRAZUC0kVBVnUGS7P952QA/5P57Af8uQ4slRpVXbbF3uX84JWzawvEQ/EdjHsbyNsr3pFS9W1FAsuNYmwBua3SF03tAbu3Wo89Oyp94dQYcAO4G0FuykDeWfILInwTxm7bEXgLyA0ii5szkHeVBjZ0FULXBPItGwK7Noku3mrpYh25feawwQEIXrTWwjftCLxR72IVWW4Ed3MW8m7w7gXvfvAeAN9h8B0B37E/4Pbm1sLXIHzDjsDrRReryCpwRhbLf85i/B3g77TWAucLR0X4ul2BN4Jrs4gJPYuRW4ueDOUkKKdAOZP/fPAShK4YWWwz4LU6slvv4tlMitKVB3cwA/iqDYGda4wuLsXEKKezgPshNAihS5UGqQywjrwOXBuMLtaiwt2kPULjaf3rdTGBs2LsgWBf3hVFDWzToS4H50pwrioOzbMLvFMrin3gPTgN8jntB49Ar0AerE1gRubCyHxwLADHInAshtGlMLoMRlcI5NVmVKhd7Coui/EeMpdt/o48yN16F2vIA7UKPGdGH2A+QjeDpwU8baKL28G7R1sX57xHOQ7+E9qKQj82u/g/ACkPsHajP9UunlfySfCpDx4HtS7Oxe7SshilG4I9tQ1s3LQWFQvLMiFqVPiPgv94/vOBCxDoq21g42a1LF5Stsnxd+oPHv586+J+bUVB8HKlgWa1/QYdo4m5c/5ljgAAAABJRU5ErkJggg=="
|
||||
alt="AA gaming"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://astrid.tech/"
|
||||
target="_blank"
|
||||
title="astrid dot tech"
|
||||
>
|
||||
<img
|
||||
src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
|
||||
alt="astrid dot tech"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://atapi.space/"
|
||||
target="_blank"
|
||||
title="Atapi's Homepage"
|
||||
>
|
||||
<img
|
||||
src="https://atapi.space/assets/img/buttons/atapi.gif"
|
||||
alt="Atapi"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li>-->
|
||||
<!-- <a-->
|
||||
<!-- href="https://blueb.pages.gay"-->
|
||||
<!-- target="_blank"-->
|
||||
<!-- title="blueb's website"-->
|
||||
<!-- >-->
|
||||
<!-- <img-->
|
||||
<!-- src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
|
||||
<!-- alt="kattgutte er ikke ekte"-->
|
||||
<!-- />-->
|
||||
<!-- </a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
|
||||
<!-- <img-->
|
||||
<!-- src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
|
||||
<!-- alt="elke dot cafe"-->
|
||||
<!-- />-->
|
||||
<!-- </a>-->
|
||||
<!-- </li>-->
|
||||
<li>
|
||||
<a
|
||||
href="https://eris.meows.gay/"
|
||||
target="_blank"
|
||||
title="eris meow :3"
|
||||
>
|
||||
<img
|
||||
src="https://eris.meows.gay/images/badges/eris.png"
|
||||
alt="eris"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://houl.floof.company/"
|
||||
target="_blank"
|
||||
title="Houl Floof :3c"
|
||||
>
|
||||
<img
|
||||
src="https://houl.floof.company/assets/images/buttons/houl.png"
|
||||
alt="Houl"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://lilysthings.org/"
|
||||
target="_blank"
|
||||
title="Lily's Things at The Cool Site"
|
||||
>
|
||||
<img
|
||||
src="https://lilysthings.org/buttons/lilysthings.png"
|
||||
alt="lily!!"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://microspinny.zip/"
|
||||
target="_blank"
|
||||
title="microsite"
|
||||
>
|
||||
<img src="/assets/buttons/micro.png" alt="Micro" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://nelle.observer/"
|
||||
target="_blank"
|
||||
title="nelle.observer"
|
||||
>
|
||||
<img
|
||||
src="https://nelle.observer/assets/images/badges/mine/nelleobserver-gray.gif"
|
||||
alt="nelle observer"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://notfire.cc"
|
||||
target="_blank"
|
||||
title="home // notfire.cc"
|
||||
>
|
||||
<img
|
||||
src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
|
||||
alt="not fire dot CC"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://floof.gay/"
|
||||
target="_blank"
|
||||
title="home - olivia"
|
||||
>
|
||||
<img
|
||||
src="https://floof.gay/img/badges/oli.svg"
|
||||
alt="oli"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://synth.download"
|
||||
target="_blank"
|
||||
title="synth download!"
|
||||
>
|
||||
<img
|
||||
src="https://synth.download/assets/buttons/synth.download.svg"
|
||||
alt="Synth.Download!"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://void.rehab" target="_blank" title="void.rehab">
|
||||
<img
|
||||
src="https://void.rehab/88x31/void.rehab.png"
|
||||
alt="void dot rehab"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
|
||||
<img
|
||||
src="https://w.on-t.work/assets/88x31.png"
|
||||
alt="wont work"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zvava.org/" target="_blank" title="zvava.org">
|
||||
<img
|
||||
src="https://zvava.org/images/buttons/zvava.org.png"
|
||||
alt="zvava dot org"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Cool things</p>
|
||||
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
<img
|
||||
src="/assets/buttons/anythingbutchrome.gif"
|
||||
|
|
@ -468,8 +284,185 @@
|
|||
<img src="/assets/buttons/wii.png" alt="Wii" title="Wii"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 id="webrings">Webrings</h3>
|
||||
<div class="foreground card">
|
||||
<h3>Other sites</h3>
|
||||
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
<a href="https://aagaming.me/" target="_blank" title="aagaming">
|
||||
<img
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVR4nO3XiU/TYBjH8f59xmjUaIxGjfeBCAIqarxiVETFA5HLKxqPP8ErSiQaTYz3EY+ojG3d0R2EwU73NW1f2nWHTNicW0fSvO3TbW/74dlvbyVJkqhvUjkN6sBSHViqyLdM/at3sFQHxuYxVAVf1chDiAxBZBgmnpj16AuIvoLoG4i+M+uxLxD/BvHvkBgx60kZkl5IKZAK6rVf45Ce0PfTCUs8ZEbE1H52PbOW79x/D8z4feuxAGbyubUefStwP1rriR9idFrrqYAAHhO4k2JM5qBOB56NXV3AkXtZwMMC+Jm1HntdAPi7GB3WelIR0GEBnb+LC8HVDvD4nQzsRxB5LICfmvXoSy0qdOD31vfHv+UAazGR9AnYkBgjAjhmL2BJg70LkQdif8isTzwzokJFNuqxDxD7BPHPEP9q1hMOSLgMZG1M6cDGa9JRAZUC0kVBVnUGS7P952QA/5P57Af8uQ4slRpVXbbF3uX84JWzawvEQ/EdjHsbyNsr3pFS9W1FAsuNYmwBua3SF03tAbu3Wo89Oyp94dQYcAO4G0FuykDeWfILInwTxm7bEXgLyA0ii5szkHeVBjZ0FULXBPItGwK7Noku3mrpYh25feawwQEIXrTWwjftCLxR72IVWW4Ed3MW8m7w7gXvfvAeAN9h8B0B37E/4Pbm1sLXIHzDjsDrRReryCpwRhbLf85i/B3g77TWAucLR0X4ul2BN4Jrs4gJPYuRW4ueDOUkKKdAOZP/fPAShK4YWWwz4LU6slvv4tlMitKVB3cwA/iqDYGda4wuLsXEKKezgPshNAihS5UGqQywjrwOXBuMLtaiwt2kPULjaf3rdTGBs2LsgWBf3hVFDWzToS4H50pwrioOzbMLvFMrin3gPTgN8jntB49Ar0AerE1gRubCyHxwLADHInAshtGlMLoMRlcI5NVmVKhd7Coui/EeMpdt/o48yN16F2vIA7UKPGdGH2A+QjeDpwU8baKL28G7R1sX57xHOQ7+E9qKQj82u/g/ACkPsHajP9UunlfySfCpDx4HtS7Oxe7SshilG4I9tQ1s3LQWFQvLMiFqVPiPgv94/vOBCxDoq21g42a1LF5Stsnxd+oPHv586+J+bUVB8HKlgWa1/QYdo4m5c/5ljgAAAABJRU5ErkJggg=="
|
||||
alt="AA gaming"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://astrid.tech/"
|
||||
target="_blank"
|
||||
title="astrid dot tech"
|
||||
>
|
||||
<img
|
||||
src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
|
||||
alt="astrid dot tech"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://atapi.space/"
|
||||
target="_blank"
|
||||
title="Atapi's Homepage"
|
||||
>
|
||||
<img
|
||||
src="https://atapi.space/assets/img/buttons/atapi.gif"
|
||||
alt="Atapi"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li>-->
|
||||
<!-- <a-->
|
||||
<!-- href="https://blueb.pages.gay"-->
|
||||
<!-- target="_blank"-->
|
||||
<!-- title="blueb's website"-->
|
||||
<!-- >-->
|
||||
<!-- <img-->
|
||||
<!-- src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
|
||||
<!-- alt="kattgutte er ikke ekte"-->
|
||||
<!-- />-->
|
||||
<!-- </a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li>-->
|
||||
<!-- <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
|
||||
<!-- <img-->
|
||||
<!-- src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
|
||||
<!-- alt="elke dot cafe"-->
|
||||
<!-- />-->
|
||||
<!-- </a>-->
|
||||
<!-- </li>-->
|
||||
<li>
|
||||
<a
|
||||
href="https://eris.meows.gay/"
|
||||
target="_blank"
|
||||
title="eris meow :3"
|
||||
>
|
||||
<img
|
||||
src="https://eris.meows.gay/images/badges/eris.png"
|
||||
alt="eris"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://houl.floof.company/"
|
||||
target="_blank"
|
||||
title="Houl Floof :3c"
|
||||
>
|
||||
<img
|
||||
src="https://houl.floof.company/assets/images/buttons/houl.png"
|
||||
alt="Houl"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://lilysthings.org/"
|
||||
target="_blank"
|
||||
title="Lily's Things at The Cool Site"
|
||||
>
|
||||
<img
|
||||
src="https://lilysthings.org/buttons/lilysthings.png"
|
||||
alt="lily!!"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://microspinny.zip/"
|
||||
target="_blank"
|
||||
title="microsite"
|
||||
>
|
||||
<img src="/assets/buttons/micro.png" alt="Micro"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://nelle.observer/"
|
||||
target="_blank"
|
||||
title="nelle.observer"
|
||||
>
|
||||
<img
|
||||
src="https://nelle.observer/assets/images/88by31/mine/site-badges/nelleobserver-gray.gif"
|
||||
alt="nelle observer"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://notfire.cc"
|
||||
target="_blank"
|
||||
title="home // notfire.cc"
|
||||
>
|
||||
<img
|
||||
src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
|
||||
alt="not fire dot CC"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li>-->
|
||||
<!-- <a-->
|
||||
<!-- href="https://floof.gay/"-->
|
||||
<!-- target="_blank"-->
|
||||
<!-- title="home - olivia"-->
|
||||
<!-- >-->
|
||||
<!-- <img-->
|
||||
<!-- src="https://floof.gay/img/badges/oli.svg"-->
|
||||
<!-- alt="oli"-->
|
||||
<!-- />-->
|
||||
<!-- </a>-->
|
||||
<!-- </li>-->
|
||||
<li>
|
||||
<a
|
||||
href="https://synth.download"
|
||||
target="_blank"
|
||||
title="synth download!"
|
||||
>
|
||||
<img
|
||||
src="https://synth.download/assets/buttons/synth.download.svg"
|
||||
alt="Synth.Download!"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://void.rehab" target="_blank" title="void.rehab">
|
||||
<img
|
||||
src="https://void.rehab/88x31/void.rehab.png"
|
||||
alt="void dot rehab"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
|
||||
<img
|
||||
src="https://w.on-t.work/assets/88x31.png"
|
||||
alt="wont work"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://zvava.org/" target="_blank" title="zvava.org">
|
||||
<img
|
||||
src="https://zvava.org/images/buttons/zvava.org.png"
|
||||
alt="zvava dot org"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="webrings">Webrings</h2>
|
||||
|
||||
<p>Adjacent websites</p>
|
||||
|
||||
|
|
@ -504,35 +497,19 @@
|
|||
|
||||
<style>
|
||||
.page-links {
|
||||
padding-left: 0.5rem;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.page-links li {
|
||||
padding: 0.5rem;
|
||||
|
||||
background-color: var(--background-2);
|
||||
border-left: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.page-links li {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-links li > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.page-links li > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--accent: hsl(287, 50%, 59%);
|
||||
--accent-2: light-dark(hsl(287, 50%, 39%), hsl(287, 50%, 79%));
|
||||
--background: light-dark(hsl(302, 69%, 95%), hsl(302, 69%, 10%));
|
||||
--background-2: light-dark(hsl(302, 69%, 90%), hsl(302, 69%, 5%));
|
||||
--foreground: light-dark(hsl(302, 69%, 10%), hsl(302, 69%, 95%));
|
||||
--success: hsl(110, 50%, 59%);
|
||||
--warn: hsl(30, 50%, 59%);
|
||||
--error: hsl(0, 50%, 59%);
|
||||
--accent: #b462cbff;
|
||||
--background: light-dark(#f3dffc, #16051d);
|
||||
--foreground: light-dark(#faf0ff, #08020b);
|
||||
--text: light-dark(#0f0f0f, #efefef);
|
||||
|
||||
--radius: 12px;
|
||||
--success: #9ece6a;
|
||||
--warn: #e0af68;
|
||||
--error: #f7768e;
|
||||
|
||||
--radius: 8px;
|
||||
|
||||
font-family: Inter, sans-serif;
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ body {
|
|||
|
||||
/* Colors */
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
article:first-of-type,
|
||||
|
|
@ -86,57 +86,7 @@ h6 {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
article {
|
||||
counter-reset: h2 0;
|
||||
}
|
||||
|
||||
/*article h2 {*/
|
||||
/* counter-increment: h2 1;*/
|
||||
/* counter-reset: h3 0;*/
|
||||
/*}*/
|
||||
|
||||
/*article h2::before {*/
|
||||
/* content: counter(h2) ". ";*/
|
||||
/*}*/
|
||||
|
||||
/*article h3 {*/
|
||||
/* counter-increment: h3 1;*/
|
||||
/* counter-reset: h4 0;*/
|
||||
/*}*/
|
||||
|
||||
/*article h3::before {*/
|
||||
/* content: counter(h2) "." counter(h3) ". ";*/
|
||||
/*}*/
|
||||
|
||||
/*article h4 {*/
|
||||
/* counter-increment: h4 1;*/
|
||||
/* counter-reset: h5 0;*/
|
||||
/*}*/
|
||||
|
||||
/*article h4::before {*/
|
||||
/* content: counter(h2) "." counter(h3) "." counter(h4) ". ";*/
|
||||
/*}*/
|
||||
|
||||
/*article h5 {*/
|
||||
/* counter-increment: h5 1;*/
|
||||
/* counter-reset: h6 0;*/
|
||||
/*}*/
|
||||
|
||||
/*article h5::before {*/
|
||||
/* content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";*/
|
||||
/*}*/
|
||||
|
||||
/*article h6 {*/
|
||||
/* counter-increment: h6 1;*/
|
||||
/*}*/
|
||||
|
||||
/*article h6::before {*/
|
||||
/* content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";*/
|
||||
/*}*/
|
||||
|
||||
a {
|
||||
padding-left: 0.15em;
|
||||
padding-right: 0.15em;
|
||||
color: var(--accent);
|
||||
text-underline-offset: 0.15rem;
|
||||
}
|
||||
|
|
@ -146,50 +96,15 @@ a[target="_blank"]:not(:has(>img))::after {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
a:not(:has(>img)):hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not(:has(>img)):visited:hover {
|
||||
background-color: var(--accent-2);
|
||||
}
|
||||
|
||||
dt::after {
|
||||
content: ": ";
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
blockquote > :not(footer):first-of-type::before {
|
||||
content: open-quote;
|
||||
color: var(--accent);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
blockquote > :not(footer):last-of-type::after {
|
||||
content: close-quote;
|
||||
color: var(--accent);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
blockquote footer::before {
|
||||
content: "— ";
|
||||
}
|
||||
|
||||
code {
|
||||
padding-left: 0.15em;
|
||||
padding-right: 0.15em;
|
||||
background-color: var(--background-2);
|
||||
font-family: "Fira Code VF", monospace;
|
||||
}
|
||||
|
||||
|
|
@ -198,71 +113,6 @@ pre code {
|
|||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
overflow-x: scroll;
|
||||
|
||||
background-color: #1a1b26;
|
||||
color: #c0caf5;
|
||||
border: 1px solid #c0caf5;
|
||||
}
|
||||
|
||||
/* Code highlighting */
|
||||
.language-html,
|
||||
.language-md {
|
||||
color: #9aa5ce;
|
||||
}
|
||||
|
||||
.token.keyword,
|
||||
.token.tag {
|
||||
color: #f7768e;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #ff9e64;
|
||||
}
|
||||
|
||||
.token.parameter,
|
||||
.regex-source {
|
||||
color: #e0af68;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.selector {
|
||||
color: #9ece6a;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.regex-flags,
|
||||
.token.title {
|
||||
color: #7dcfff;
|
||||
}
|
||||
|
||||
.token.literal-property,
|
||||
.token.url {
|
||||
color: #73daca;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #7aa2f7;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.attr-name {
|
||||
color: #bb9af7;
|
||||
}
|
||||
|
||||
.token.constant,
|
||||
.token.environment,
|
||||
.token.class-name {
|
||||
color: #c0caf5;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
color: #565f89;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
details {
|
||||
border-left: 2px solid var(--accent-2);
|
||||
}
|
||||
|
||||
details[open] {
|
||||
|
|
@ -282,38 +132,34 @@ details > summary {
|
|||
padding: 0.5em;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: var(--accent-2);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
|
||||
background-color: var(--background-2);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
mark {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="submit"] {
|
||||
padding: 0.5em 1em;
|
||||
|
||||
background-color: var(--accent-2);
|
||||
color: var(--background);
|
||||
background-color: color-mix(in srgb, var(--foreground) 70%, var(--accent));
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input[type="submit"]:hover {
|
||||
background-color: color-mix(in srgb, var(--foreground) 40%, var(--accent));
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
|
|
@ -325,10 +171,11 @@ input[type="text"] {
|
|||
padding: 0.5em;
|
||||
|
||||
outline: none;
|
||||
background-color: var(--background-2);
|
||||
color: var(--foreground);
|
||||
border: 1px solid var(--foreground);
|
||||
background-color: var(--foreground);
|
||||
color: var(--text);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 70%, var(--accent));
|
||||
border-radius: var(--radius);
|
||||
transition: border 0.2s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
|
|
@ -347,28 +194,13 @@ table {
|
|||
}
|
||||
|
||||
table.rows tbody tr {
|
||||
background-color: var(--background-2);
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
table.rows tbody tr:nth-child(2n) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.table-y {
|
||||
background-color: var(--success);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.table-p {
|
||||
background-color: var(--warn);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.table-n {
|
||||
background-color: var(--error);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.icon-link > a,
|
||||
.icon-link > span {
|
||||
padding-left: 0.15rem;
|
||||
|
|
@ -383,39 +215,36 @@ table.rows tbody tr:nth-child(2n) {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.notice {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
|
||||
border: 2px dashed var(--warn);
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.notice::before {
|
||||
content: "🛈 Notice";
|
||||
color: var(--warn);
|
||||
font-size: larger;
|
||||
font-weight: bolder;
|
||||
.foreground {
|
||||
background: var(--foreground);
|
||||
}
|
||||
|
||||
.notice > p:first-child {
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.card > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.notice > p:last-child {
|
||||
.card > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
.card + .card {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.invert {
|
||||
filter: invert() hue-rotate(180deg);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.icon-link > img.invert {
|
||||
filter: hue-rotate(180deg) invert();
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue