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--> | 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--> | 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=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
|
### Iceshrimp
|
||||||
|
|
||||||
|
|
@ -621,4 +622,19 @@ Brief descriptions of each feature listed above. I'm keeping them vague as they
|
||||||
img.icon {
|
img.icon {
|
||||||
width: 2em;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -65,12 +65,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--foreground);
|
color: var(--text);
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
background-color: var(--foreground);
|
|
||||||
color: var(--background);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
|
|
@ -81,15 +76,8 @@
|
||||||
border-radius: 20%;
|
border-radius: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand > a,
|
.brand > a {
|
||||||
.brand > a:visited {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration-color: var(--accent);
|
text-decoration: none;
|
||||||
text-decoration-style: wavy;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand > a:hover {
|
|
||||||
background-color: var(--accent);
|
|
||||||
color: var(--background);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import DateTime from "$lib/components/DateTime.svelte";
|
import DateTime from "$lib/components/DateTime.svelte";
|
||||||
import { getPages } from "$lib/pages";
|
import {getPages} from "$lib/pages";
|
||||||
import contributions from "../data/contributions.json"
|
import contributions from "../data/contributions.json"
|
||||||
import links from "../data/links.json";
|
import links from "../data/links.json";
|
||||||
import projects from "../data/projects.json";
|
import projects from "../data/projects.json";
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
const pages = getPages();
|
const pages = getPages();
|
||||||
|
|
||||||
let ntfyLock = $state(false);
|
let ntfyLock = $state(false);
|
||||||
|
|
||||||
async function sendNtfyMessage() {
|
async function sendNtfyMessage() {
|
||||||
if (ntfyLock) return;
|
if (ntfyLock) return;
|
||||||
ntfyLock = true;
|
ntfyLock = true;
|
||||||
|
|
@ -46,7 +47,8 @@
|
||||||
<h1 id="about-me">About Me</h1>
|
<h1 id="about-me">About Me</h1>
|
||||||
<p>
|
<p>
|
||||||
I'm a 22 year old enby (<em>they/it</em>) from Australia (it's
|
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
|
cats, Linux, and programming in C# and Python (for now). You can
|
||||||
find my links, projects, and other pages here.
|
find my links, projects, and other pages here.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -81,7 +83,7 @@
|
||||||
|
|
||||||
<ul class="page-links">
|
<ul class="page-links">
|
||||||
{#each projects as project}
|
{#each projects as project}
|
||||||
<li>
|
<li class="foreground card">
|
||||||
<h3>
|
<h3>
|
||||||
<a href={project.href} target="_blank">
|
<a href={project.href} target="_blank">
|
||||||
{project.name}
|
{project.name}
|
||||||
|
|
@ -98,7 +100,7 @@
|
||||||
|
|
||||||
<ul class="page-links">
|
<ul class="page-links">
|
||||||
{#each contributions as contribution}
|
{#each contributions as contribution}
|
||||||
<li>
|
<li class="foreground card">
|
||||||
<h3>
|
<h3>
|
||||||
<a href={contribution.href} target="_blank">
|
<a href={contribution.href} target="_blank">
|
||||||
{contribution.name}
|
{contribution.name}
|
||||||
|
|
@ -136,7 +138,7 @@
|
||||||
|
|
||||||
<ol class="page-links">
|
<ol class="page-links">
|
||||||
{#each pages as page}
|
{#each pages as page}
|
||||||
<li>
|
<li class="foreground card">
|
||||||
<h3>
|
<h3>
|
||||||
<a href={"/" + page.slug + "/"}>
|
<a href={"/" + page.slug + "/"}>
|
||||||
{page.title}
|
{page.title}
|
||||||
|
|
@ -147,7 +149,7 @@
|
||||||
<p>
|
<p>
|
||||||
<small>
|
<small>
|
||||||
Published:
|
Published:
|
||||||
<DateTime datetime={page.published} />
|
<DateTime datetime={page.published}/>
|
||||||
{#if page.edited}
|
{#if page.edited}
|
||||||
• Last edited:
|
• Last edited:
|
||||||
<DateTime
|
<DateTime
|
||||||
|
|
@ -162,29 +164,130 @@
|
||||||
{/each}
|
{/each}
|
||||||
</ol>
|
</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">
|
<ul class="buttons">
|
||||||
<li>
|
<li>
|
||||||
<a href="/" title="pancakes">
|
<a href="/" title="pancakes">
|
||||||
<img src="/assets/88x31.png" alt="pancakes" />
|
<img src="/assets/88x31.png" alt="pancakes"/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://meow.company" target="_blank" title="meow.company">
|
|
||||||
<img
|
<img
|
||||||
src="https://meow.company/88x31.png"
|
src="/assets/buttons/anythingbutchrome.gif"
|
||||||
alt="meow dot company"
|
alt="Anything But Chrome"
|
||||||
|
title="Anything But Chrome"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://archlinux.org" target="_blank" title="arch linux">
|
||||||
|
<img src="/assets/buttons/archlinux.gif" alt="arch linux"/>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="/assets/buttons/emulate.gif"
|
||||||
|
alt="Emulate Now!"
|
||||||
|
title="Emulate Now!"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://www.mozilla.org/en-US/firefox/"
|
||||||
|
target="_blank"
|
||||||
|
title="Get Firefox"
|
||||||
|
>
|
||||||
|
<img src="/assets/buttons/getfirefox.gif" alt="Get Firefox"/>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://iceshrimp.dev/iceshrimp/Iceshrimp.NET"
|
||||||
|
target="_blank"
|
||||||
|
title="Iceshrimp.NET"
|
||||||
|
>
|
||||||
|
<img src="/assets/buttons/iceshrimp_now_dark.png" alt="Iceshrimp Now!"/>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="/assets/buttons/fediverse.gif"
|
||||||
|
alt="Join the Fediverse"
|
||||||
|
title="Join the Fediverse"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="/assets/buttons/xenia.gif"
|
||||||
|
alt="Linux Now!"
|
||||||
|
title="Linux Now!"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="/assets/buttons/paws.png"
|
||||||
|
alt="made with My Own Two Paws"
|
||||||
|
title="made with MY OWN TWO PAWS"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
src="/assets/buttons/nonbinary.png"
|
||||||
|
alt="Non-binary flag"
|
||||||
|
title="Non-binary"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://www.debian.org/"
|
||||||
|
target="_blank"
|
||||||
|
title="Powered by debian"
|
||||||
|
>
|
||||||
|
<img src="/assets/buttons/debian.png" alt="Powered by debian"/>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://scp-wiki.wikidot.com/" target="_blank" title="SCP">
|
||||||
|
<img src="/assets/buttons/scp.png" alt="SCP"/>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://store.steampowered.com/app/440/Team_Fortress_2/"
|
||||||
|
target="_blank"
|
||||||
|
title="Team Fortress GET IT!"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/buttons/team_fortress_get_it.gif"
|
||||||
|
alt="Team Fortress Get It!"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://ublockorigin.com/"
|
||||||
|
target="_blank"
|
||||||
|
title="uBlock Origin Now!"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/buttons/ublock.png"
|
||||||
|
alt="uBlock Origin Now!"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="/assets/buttons/wii.png" alt="Wii" title="Wii"/>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Other people and entities</p>
|
<div class="foreground card">
|
||||||
|
<h3>Other sites</h3>
|
||||||
|
|
||||||
<ul class="buttons">
|
<ul class="buttons">
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -219,26 +322,26 @@
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- <li>-->
|
<!-- <li>-->
|
||||||
<!-- <a-->
|
<!-- <a-->
|
||||||
<!-- href="https://blueb.pages.gay"-->
|
<!-- href="https://blueb.pages.gay"-->
|
||||||
<!-- target="_blank"-->
|
<!-- target="_blank"-->
|
||||||
<!-- title="blueb's website"-->
|
<!-- title="blueb's website"-->
|
||||||
<!-- >-->
|
<!-- >-->
|
||||||
<!-- <img-->
|
<!-- <img-->
|
||||||
<!-- src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
|
<!-- src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
|
||||||
<!-- alt="kattgutte er ikke ekte"-->
|
<!-- alt="kattgutte er ikke ekte"-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
<!-- </a>-->
|
<!-- </a>-->
|
||||||
<!-- </li>-->
|
<!-- </li>-->
|
||||||
<!-- <li>-->
|
<!-- <li>-->
|
||||||
<!-- <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
|
<!-- <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
|
||||||
<!-- <img-->
|
<!-- <img-->
|
||||||
<!-- src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
|
<!-- src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
|
||||||
<!-- alt="elke dot cafe"-->
|
<!-- alt="elke dot cafe"-->
|
||||||
<!-- />-->
|
<!-- />-->
|
||||||
<!-- </a>-->
|
<!-- </a>-->
|
||||||
<!-- </li>-->
|
<!-- </li>-->
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href="https://eris.meows.gay/"
|
href="https://eris.meows.gay/"
|
||||||
|
|
@ -281,7 +384,7 @@
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title="microsite"
|
title="microsite"
|
||||||
>
|
>
|
||||||
<img src="/assets/buttons/micro.png" alt="Micro" />
|
<img src="/assets/buttons/micro.png" alt="Micro"/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -291,7 +394,7 @@
|
||||||
title="nelle.observer"
|
title="nelle.observer"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="https://nelle.observer/assets/images/badges/mine/nelleobserver-gray.gif"
|
src="https://nelle.observer/assets/images/88by31/mine/site-badges/nelleobserver-gray.gif"
|
||||||
alt="nelle observer"
|
alt="nelle observer"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -308,18 +411,18 @@
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<!-- <li>-->
|
||||||
<a
|
<!-- <a-->
|
||||||
href="https://floof.gay/"
|
<!-- href="https://floof.gay/"-->
|
||||||
target="_blank"
|
<!-- target="_blank"-->
|
||||||
title="home - olivia"
|
<!-- title="home - olivia"-->
|
||||||
>
|
<!-- >-->
|
||||||
<img
|
<!-- <img-->
|
||||||
src="https://floof.gay/img/badges/oli.svg"
|
<!-- src="https://floof.gay/img/badges/oli.svg"-->
|
||||||
alt="oli"
|
<!-- alt="oli"-->
|
||||||
/>
|
<!-- />-->
|
||||||
</a>
|
<!-- </a>-->
|
||||||
</li>
|
<!-- </li>-->
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href="https://synth.download"
|
href="https://synth.download"
|
||||||
|
|
@ -357,119 +460,9 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Cool things</p>
|
<h2 id="webrings">Webrings</h2>
|
||||||
|
|
||||||
<ul class="buttons">
|
|
||||||
<li>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/anythingbutchrome.gif"
|
|
||||||
alt="Anything But Chrome"
|
|
||||||
title="Anything But Chrome"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://archlinux.org" target="_blank" title="arch linux">
|
|
||||||
<img src="/assets/buttons/archlinux.gif" alt="arch linux" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/emulate.gif"
|
|
||||||
alt="Emulate Now!"
|
|
||||||
title="Emulate Now!"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://www.mozilla.org/en-US/firefox/"
|
|
||||||
target="_blank"
|
|
||||||
title="Get Firefox"
|
|
||||||
>
|
|
||||||
<img src="/assets/buttons/getfirefox.gif" alt="Get Firefox" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://iceshrimp.dev/iceshrimp/Iceshrimp.NET"
|
|
||||||
target="_blank"
|
|
||||||
title="Iceshrimp.NET"
|
|
||||||
>
|
|
||||||
<img src="/assets/buttons/iceshrimp_now_dark.png" alt="Iceshrimp Now!" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/fediverse.gif"
|
|
||||||
alt="Join the Fediverse"
|
|
||||||
title="Join the Fediverse"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/xenia.gif"
|
|
||||||
alt="Linux Now!"
|
|
||||||
title="Linux Now!"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/paws.png"
|
|
||||||
alt="made with My Own Two Paws"
|
|
||||||
title="made with MY OWN TWO PAWS"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/nonbinary.png"
|
|
||||||
alt="Non-binary flag"
|
|
||||||
title="Non-binary"
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://www.debian.org/"
|
|
||||||
target="_blank"
|
|
||||||
title="Powered by debian"
|
|
||||||
>
|
|
||||||
<img src="/assets/buttons/debian.png" alt="Powered by debian" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://scp-wiki.wikidot.com/" target="_blank" title="SCP">
|
|
||||||
<img src="/assets/buttons/scp.png" alt="SCP" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://store.steampowered.com/app/440/Team_Fortress_2/"
|
|
||||||
target="_blank"
|
|
||||||
title="Team Fortress GET IT!"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/team_fortress_get_it.gif"
|
|
||||||
alt="Team Fortress Get It!"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://ublockorigin.com/"
|
|
||||||
target="_blank"
|
|
||||||
title="uBlock Origin Now!"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/assets/buttons/ublock.png"
|
|
||||||
alt="uBlock Origin Now!"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<img src="/assets/buttons/wii.png" alt="Wii" title="Wii" />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="webrings">Webrings</h3>
|
|
||||||
|
|
||||||
<p>Adjacent websites</p>
|
<p>Adjacent websites</p>
|
||||||
|
|
||||||
|
|
@ -498,41 +491,25 @@
|
||||||
<label for="ntfy-message" id="ntfy-char-count" style="color: var(--error);">
|
<label for="ntfy-message" id="ntfy-char-count" style="color: var(--error);">
|
||||||
128
|
128
|
||||||
</label>
|
</label>
|
||||||
<br />
|
<br/>
|
||||||
<button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
|
<button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send</button>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.page-links {
|
.page-links {
|
||||||
padding-left: 0.5rem;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-links li {
|
|
||||||
padding: 0.5rem;
|
|
||||||
|
|
||||||
background-color: var(--background-2);
|
|
||||||
border-left: 2px solid var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-links li {
|
.page-links li {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-links li > *:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-links li > *:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.buttons {
|
ul.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.25rem;
|
gap: 0.25rem;
|
||||||
justify-content: center;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,16 +6,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--accent: hsl(287, 50%, 59%);
|
--accent: #b462cbff;
|
||||||
--accent-2: light-dark(hsl(287, 50%, 39%), hsl(287, 50%, 79%));
|
--background: light-dark(#f3dffc, #16051d);
|
||||||
--background: light-dark(hsl(302, 69%, 95%), hsl(302, 69%, 10%));
|
--foreground: light-dark(#faf0ff, #08020b);
|
||||||
--background-2: light-dark(hsl(302, 69%, 90%), hsl(302, 69%, 5%));
|
--text: light-dark(#0f0f0f, #efefef);
|
||||||
--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%);
|
|
||||||
|
|
||||||
--radius: 12px;
|
--success: #9ece6a;
|
||||||
|
--warn: #e0af68;
|
||||||
|
--error: #f7768e;
|
||||||
|
|
||||||
|
--radius: 8px;
|
||||||
|
|
||||||
font-family: Inter, sans-serif;
|
font-family: Inter, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -35,7 +35,7 @@ body {
|
||||||
|
|
||||||
/* Colors */
|
/* Colors */
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
article:first-of-type,
|
article:first-of-type,
|
||||||
|
|
@ -86,57 +86,7 @@ h6 {
|
||||||
font-weight: bold;
|
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 {
|
a {
|
||||||
padding-left: 0.15em;
|
|
||||||
padding-right: 0.15em;
|
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-underline-offset: 0.15rem;
|
text-underline-offset: 0.15rem;
|
||||||
}
|
}
|
||||||
|
|
@ -146,50 +96,15 @@ a[target="_blank"]:not(:has(>img))::after {
|
||||||
display: inline-block;
|
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,
|
img,
|
||||||
video {
|
video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
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 {
|
code {
|
||||||
padding-left: 0.15em;
|
padding-left: 0.15em;
|
||||||
padding-right: 0.15em;
|
padding-right: 0.15em;
|
||||||
background-color: var(--background-2);
|
|
||||||
font-family: "Fira Code VF", monospace;
|
font-family: "Fira Code VF", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -198,71 +113,6 @@ pre code {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
overflow-x: scroll;
|
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] {
|
details[open] {
|
||||||
|
|
@ -282,38 +132,34 @@ details > summary {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
background-color: var(--accent-2);
|
|
||||||
color: var(--background);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
padding-right: 0.5em;
|
padding-right: 0.5em;
|
||||||
|
|
||||||
background-color: var(--background-2);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mark {
|
mark {
|
||||||
padding-left: 0.25em;
|
padding-left: 0.25em;
|
||||||
padding-right: 0.25em;
|
padding-right: 0.25em;
|
||||||
|
|
||||||
background-color: var(--accent);
|
|
||||||
color: var(--background);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
|
|
||||||
background-color: var(--accent-2);
|
background-color: color-mix(in srgb, var(--foreground) 70%, var(--accent));
|
||||||
color: var(--background);
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer;
|
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],
|
button[disabled],
|
||||||
|
|
@ -325,10 +171,11 @@ input[type="text"] {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--background-2);
|
background-color: var(--foreground);
|
||||||
color: var(--foreground);
|
color: var(--text);
|
||||||
border: 1px solid var(--foreground);
|
border: 1px solid color-mix(in srgb, var(--foreground) 70%, var(--accent));
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
|
transition: border 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]:focus {
|
input[type="text"]:focus {
|
||||||
|
|
@ -347,28 +194,13 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
table.rows tbody tr {
|
table.rows tbody tr {
|
||||||
background-color: var(--background-2);
|
background-color: var(--foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
table.rows tbody tr:nth-child(2n) {
|
table.rows tbody tr:nth-child(2n) {
|
||||||
background-color: transparent;
|
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 > a,
|
||||||
.icon-link > span {
|
.icon-link > span {
|
||||||
padding-left: 0.15rem;
|
padding-left: 0.15rem;
|
||||||
|
|
@ -383,39 +215,36 @@ table.rows tbody tr:nth-child(2n) {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice {
|
.upper {
|
||||||
display: block;
|
text-transform: uppercase;
|
||||||
padding: 0.5rem;
|
|
||||||
|
|
||||||
border: 2px dashed var(--warn);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice::before {
|
.foreground {
|
||||||
content: "🛈 Notice";
|
background: var(--foreground);
|
||||||
color: var(--warn);
|
|
||||||
font-size: larger;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice > p:first-child {
|
.card {
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > :first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice > p:last-child {
|
.card > :last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upper {
|
.card + .card {
|
||||||
text-transform: uppercase;
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invert {
|
||||||
|
filter: invert() hue-rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: var(--accent);
|
background-color: var(--accent);
|
||||||
color: var(--background);
|
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