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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import DateTime from "$lib/components/DateTime.svelte";
|
||||
import { getPages } from "$lib/pages";
|
||||
import {getPages} from "$lib/pages";
|
||||
import contributions from "../data/contributions.json"
|
||||
import links from "../data/links.json";
|
||||
import projects from "../data/projects.json";
|
||||
|
|
@ -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}
|
||||
|
|
@ -147,7 +149,7 @@
|
|||
<p>
|
||||
<small>
|
||||
Published:
|
||||
<DateTime datetime={page.published} />
|
||||
<DateTime datetime={page.published}/>
|
||||
{#if page.edited}
|
||||
• Last edited:
|
||||
<DateTime
|
||||
|
|
@ -162,29 +164,130 @@
|
|||
{/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>
|
||||
<a href="/" title="pancakes">
|
||||
<img src="/assets/88x31.png" alt="pancakes" />
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<p>Other people and entities</p>
|
||||
<div class="foreground card">
|
||||
<h3>Other sites</h3>
|
||||
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
|
|
@ -219,26 +322,26 @@
|
|||
/>
|
||||
</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://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/"
|
||||
|
|
@ -281,7 +384,7 @@
|
|||
target="_blank"
|
||||
title="microsite"
|
||||
>
|
||||
<img src="/assets/buttons/micro.png" alt="Micro" />
|
||||
<img src="/assets/buttons/micro.png" alt="Micro"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -291,7 +394,7 @@
|
|||
title="nelle.observer"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</a>
|
||||
|
|
@ -308,18 +411,18 @@
|
|||
/>
|
||||
</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://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"
|
||||
|
|
@ -357,119 +460,9 @@
|
|||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>Cool things</p>
|
||||
|
||||
<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>
|
||||
<h2 id="webrings">Webrings</h2>
|
||||
|
||||
<p>Adjacent websites</p>
|
||||
|
||||
|
|
@ -498,41 +491,25 @@
|
|||
<label for="ntfy-message" id="ntfy-char-count" style="color: var(--error);">
|
||||
128
|
||||
</label>
|
||||
<br />
|
||||
<button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
|
||||
<br/>
|
||||
<button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send</button>
|
||||
</main>
|
||||
|
||||
<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