This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226@import "tailwindcss";
@import "components/arrow-button.css" layer(components);@import "components/devicon.css" layer(components);@import "components/navbar.css" layer(components);@import "components/slide-gradient.css" layer(components);@import "components/splash.css" layer(components);@import "components/split-icon.css" layer(components);
@custom-variant dark (&:where([data-theme=neon], [data-theme=neon] *));
/* Default dark theme "Neon" */@theme { --color-brand: oklch(0.5867 0.1955 2.08); --color-brand-dark: oklch(0.5467 0.1955 2.08); --color-brand-darker: oklch(0.5067 0.1955 2.08); --color-brand-darkest: oklch(0.4667 0.1955 2.08);
--color-bg: oklch(0.1831 0.004 285.99); --color-bg-sub: oklch(0.1931 0.004 285.99); --color-main-bg: oklch(0.2031 0.004 285.99);
--color-fg: oklch(0.9911 0.004 285.99); --color-main-fg: var(--color-zinc-200); --color-main-fg-sub: var(--color-zinc-400); --color-main-border: var(--color-brand);
--font-sans: Atkinson Hyperlegible Next, WenYuan Sans SC VF, Noto Sans SC, sans-serif; --font-serif: Bitter, WenYuan Serif SC VF, Noto Serif SC, serif; --font-mono: Iosevka, monospace;
--spacing-content-width: 100ch; --spacing-main-screen: calc(100vh - 4 * var(--spacing-navbar)); --spacing-navbar: 3.5rem;
@keyframes bob { from { transform: translateY(0px); } to { transform: translateY(10px); } }}
@property --bg-transition { syntax: "<number>"; initial-value: 0; inherits: false;}
@utility align-icon-offset { /* Determined empirically. TODO: Why do I need to do this...? */ vertical-align: -3px;}
@layer base { :root { /* Default light theme "Strawberry Milkshake" */ /* TODO: `prefer-color-scheme` */ [data-theme="strawberry-milkshake"] { --color-bg: var(--color-stone-300); --color-bg-sub: var(--color-stone-200); --color-main-bg: var(--color-stone-200);
--color-fg: var(--color-stone-800); --color-main-fg: var(--color-stone-700); --color-main-fg-sub: var(--color-stone-500); } }
*:hover, *:focus, *.is-active { --bg-transition: 1; }
html { font-size: 18px; }
main { background: var(--color-main-bg); color: var(--color-main-fg); }
a.animated, .prose a[href] { /* adapted from https://stackoverflow.com/a/72459455 */ @apply text-brand ease-out bg-no-repeat bg-right-bottom bg-linear-to-r from-transparent to-brand-dark to-0%;
transition: 0.2s background-size; background-size: calc(var(--bg-transition) * 100%) 1.5px; text-decoration: none;
&:hover, &:focus, &.is-active { @apply bg-left-bottom; } }
.neon #theme-switcher .split-icon { --base-side: 0; } body.strawberry-milkshake #theme-switcher .split-icon { --base-side: 1; }}
/* Redefine the meaning of `em` to mean "use brand color". Only used on the splash screen and overall very niche.*/@utility em-brand { em { font-style: normal; color: var(--color-brand); }}
@utility grid-cols-main-screen { grid-template-columns: 20rem auto 20rem;}
@layer components { .prose { line-height: 2rem; max-width: 75ch; margin-inline: auto; display: flex; flex-direction: column; gap: 1.5rem;
font-weight: 320;
h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; }
h1 { font-size: 1.75rem; font-weight: 750; margin-top: 2rem; }
ol, ul { margin-inline-start: 2rem; display: flex; flex-direction: column; gap: 1rem; }
ul { list-style: outside; }
ol { list-style: number; }
li *:not(:first-child) { margin-top: 1rem; }
blockquote { padding-left: 1em; border-left: 2px solid var(--color-brand);
& *:not(:first-child) { margin-top: 1rem; } }
b, strong { font-weight: 600; }
code { padding-inline: 0.25rem; background: var(--color-bg);
/* If we don't add this then breaking across e.g. command flags would look really strange */ word-break: keep-all; }
pre { background: var(--color-bg); padding: 0.5rem 1rem; overflow: scroll;
/* Make Chromium/Webkit scrollbars look more like Firefox ones */ scrollbar-width: thin;
code { padding: 0; } }
section.footnotes::before { content: "Footnotes"; display: block; font-weight: 600; font-size: 1.25rem; font-family: var(--font-sans); color: var(--color-brand); border-bottom: 1px solid var(--color-brand); margin-bottom: 1rem; }
hr { border-color: var(--color-brand); margin-block: 1.5rem; }
figure { margin-inline: auto; margin-block: 1.5rem; } }
.inline-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; }}