johnandersen777.bsky.social/knotless
git that lives in your Atmosphere account
Forked from chadtmiller.com/knotless
0
0
/* The design tokens every rule in app.css draws from: a value the pages
use goes here once, named for what it is for, and rules take it by name.
Colours change with the colour scheme; the scales do not.
The one breakpoint, which a custom property cannot name: 640px. */
:root,
[data-theme='light'],
[data-theme^='custom-'] {
color-scheme: light;
/* Hues, each meaning one thing wherever it shows. */
--green: #1a7f37;
--red: #cf222e;
--purple: #7048b5;
--yellow: #9a6700;
--gray: #636363;
/* Surfaces, from the page up: what is raised is darker in light, lighter in dark. */
--bg: #fff;
--panel: #fafafa;
--soft: #f4f4f4;
--hover: var(--soft);
--line: #e8e8e8;
/* Text: the body, then quieter for what is said about it, then quieter still. */
--fg: #171717;
--mute: #525252;
--faint: #6e6e6e;
/* A file's age, while it is fresh: hot when changed today, fading to --mute over three weeks. */
--heat: #bc4c00;
--on-solid: #fff;
/* What acts: a primary button's fill and the text on it, and the edge of
what has focus. Cobalt: blue is the one hue no state takes, and white
on it reads at 5.2:1. A link is underlined in --link-line. */
--primary: #2563eb;
--on-primary: #fff;
--link-line: #b4b4b4;
/* The accent: what marks or measures rather than acts, such as a
commit's hash, a ref, the tab one is on, a chart's line and bars. */
--accent: #2f5fb3;
--accent-soft: #eaeff7;
/* What is unread or new: a dot, not a fill. */
--unread: #e5484d;
/* A notice: what a reader should know before it bites, such as runner minutes running low. */
--notice: #fff8c5;
--notice-fg: #6b4a00;
--notice-track: #f0e2a0;
/* What a colour is for, as GitHub's Primer names it, over the hues
above, which each theme sets: the pages take these, never a hue, so
a theme may draw success in blue and nothing it says is wrong. */
--success: var(--green);
--danger: var(--red);
--attention: var(--yellow);
--done: var(--purple);
--neutral: var(--gray);
/* What a pull, an issue, a check or a line is in. */
--open: var(--success);
--merged: var(--done);
--closed-pull: var(--danger);
--closed-issue: var(--neutral);
--running: var(--attention);
--add: var(--success);
--rem: var(--danger);
/* Diffs: a line added or removed, its number, and the words that changed in it. */
--ins: #e6ffec;
--ins-n: #ccffd8;
--ins-x: #abf2bc;
--del: #ffebe9;
--del-n: #ffd7d5;
--del-x: #ffb8b0;
--hunk: #ddf4ff;
--target: #fff8c5;
--dir: #54aeff;
/* Highlighted code. */
--comment: #59636e;
--string: #0a3069;
--keyword: #cf222e;
--number: #0550ae;
--function: #6639ba;
--type: #953800;
--tag: #116329;
--attr: #0550ae;
--shadow-pop: 0 8px 24px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.06);
/* A badge's pin: the same in every theme, as an object is, but for its
edge and its shadow, which the colour scheme sets so it shows on any
page. Its rim is the tier's metal, light to dark, and its face the
badge's own enamel. */
--pin-edge: light-dark(rgb(0 0 0 / 0.14), rgb(255 255 255 / 0.38));
--pin-shadow: light-dark(rgb(0 0 0 / 0.18), transparent);
--pin-drop: 0 1px 1px;
--pin-glyph: #fff;
--pin-shine: rgb(255 255 255 / 0.22);
--pin-steel-hi: #f2f2f2;
--pin-steel: #c4c4c4;
--pin-steel-lo: #8a8a8a;
--pin-bronze-hi: #f0c39b;
--pin-bronze: #b06a32;
--pin-bronze-lo: #9a5a28;
--pin-silver-hi: #f7f8fa;
--pin-silver: #aeb4bc;
--pin-silver-lo: #666c75;
--pin-gold-hi: #fbe7a1;
--pin-gold: #d4a017;
--pin-gold-lo: #8a6400;
--pin-cobalt-hi: #a9c2ff;
--pin-cobalt: #3563d6;
--pin-cobalt-lo: #1d3c8f;
--pin-dash: rgb(255 255 255 / 0.95);
--pin-upstream: #6d4fc2;
--pin-second-pair: #0969da;
--pin-peacemaker: #1a7f37;
--pin-forked-and-fixed: #0e7490;
--pin-good-company: #bf3989;
--pin-smooth-landing: #3e4b9e;
--pin-bisected: #cf222e;
--pin-shipped: #9a6700;
--pin-stargazer: #b45309;
--pin-carry-your-own: #8a4600;
--pin-moved-house: #4b6b00;
--pin-first-light: #1f3a93;
/* A pin in the side of a profile, and in what it opens to. */
--pin: 40px;
--pin-lg: 56px;
--badge-card: 20rem;
/* The narrowest the last column of a table in prose gets, where what
each row says usually goes: a phrase per line, not a word, the table
scrolling sideways instead. */
--cell-min: 12rem;
/* Behind a dialog, over the page. */
--scrim: rgb(0 0 0 / 0.4);
--ring: 0 0 0 3px var(--ring-color);
--ring-color: rgb(37 99 235 / 0.2);
--border: 1px solid var(--line);
/* Type. */
--font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
--font-mono:
ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
--text-2xs: 11px;
--text-xs: 12px;
--text-sm: 13px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 16px;
--text-xl: 18px;
--text-2xl: 20px;
--text-3xl: 24px;
--text-display: 44px;
/* What is typed into a field: never under 16px on a phone, where iOS
zooms the page in on a field with smaller text, and leaves it so. */
--text-field: var(--text-base);
/* A field drawn small, as Markdown is typed: no smaller than --text-field on a phone. */
--text-field-sm: var(--text-sm);
--leading: 1.55;
/* A big title's lines, close enough to read as one. */
--leading-tight: 1.25;
--leading-prose: 1.65;
--leading-code: 20px;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--tracking-tight: -0.015em;
--tracking-tighter: -0.02em;
--tracking-display: -0.04em;
/* Space, on a 4px grid. */
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-16: 4rem;
--meter-width: 7.5rem;
/* A figure on the stats page, in its box. */
--stat-width: 9rem;
/* What a notice says, narrower than which its button goes under it. */
--notice-text: 16rem;
/* A theme to choose at /settings/appearance: the narrowest its card goes, and its little page's height. */
--theme-card: 10rem;
/* …and in the dialog that browses them all, two a row on a phone. */
--theme-card-tight: 8.5rem;
--theme-preview: 4.5rem;
/* Day's and night's themes, side by side while there are two: the narrowest each goes, and its little page's width. */
--theme-half: 14rem;
--theme-half-preview: 6rem;
/* A directory's columns: an entry's name, and its size. */
--file-name-width: 30%;
--file-size-width: 4rem;
/* What a pull's file not yet near the screen is taken to fill, until it is drawn and its own height is known. */
--diff-file-guess: 37.5rem;
/* A box's inner edge, and the height of a row in one. */
--pad-x: var(--space-4);
--row-y: var(--space-2-5);
/* Corners: small things, controls and boxes, and pills. */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
/* An app's icon. */
--radius-lg: 10px;
--radius-full: 999px;
/* Sizes. */
--control: 32px;
--control-sm: 28px;
--icon: 16px;
/* An icon inside a tag. */
--icon-sm: 12px;
--avatar: 20px;
/* The mark on a reviewer's face saying where they stand. */
--face-mark: 10px;
--avatar-md: 32px;
--avatar-lg: 88px;
--avatar-xl: 160px;
/* The apps the login dialog shows running past, and how long a lap takes. */
--app-icon: 40px;
--apps-run: 60s;
/* A feed line's time, wide enough for a span such as 17:42–45. */
--feed-time: 5.25rem;
--dot: 28px;
--header: 3.25rem;
--page: 58rem;
--measure: 40rem;
--side: 15rem;
/* The coloured edge of what a directory is written in, along its panel's
top; how far below it a segment still takes a pointer; and the edge on
a phone, drawn for a thumb. */
--edge: 4px;
--edge-hit: 8px;
--edge-phone: 6px;
/* How far a row that scrolls sideways fades at an edge with more past it. */
--row-fade: 2rem;
/* The least a comment's byline narrows to before what is beside it wraps. */
--byline-min: 12rem;
/* How far a list scrolling in a box of its own fades at an edge with more past it: a little, as it scrolls up and down. */
--list-fade: 0.75rem;
/* The most a repository's first link takes in its header, a longer one cut short; and the widest its list of links opens. */
--repo-link-width: 24rem;
--links-menu-width: 24rem;
--strip: 48px;
--underline-offset: 3px;
--z-menu: 5;
/* How much of a language's colour fills its row in a code search's
side, mixed into the page: picked, and each step hover and a press add. */
--lang-fill: 22%;
--lang-fill-picked: 36%;
--lang-fill-step: 14%;
--quick: 0.15s;
/* A diff still loading: its bars, as long as lines of code tend to
run, and how they pulse. */
--bar: var(--space-2-5);
--bar-1: 72%;
--bar-2: 48%;
--bar-3: 61%;
--pulse: 1.2s;
--pulse-low: 0.4;
/* A button's action under way: its spinner's stroke, and one turn. */
--spinner: 2px;
--spin: 0.8s;
/* The agent's conversation: the mark of a tool call, and how far apart its thinking dots pulse. */
--chat-mark: 6px;
--chat-beat: 0.2s;
/* Blame's column beside the code, and on a phone, where it shows when and
who alone; and the width of its times, so the subjects line up. */
--blame-width: 20rem;
--blame-width-phone: 7.5rem;
--side-width: 16rem;
--blame-when: 5.75rem;
}
/* Dark: as the system asks for it, where the viewer chose no theme. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
--green: #3fb950;
--red: #f85149;
--purple: #b39af0;
--yellow: #d29922;
--gray: #9198a1;
--bg: #111;
--panel: #161616;
--soft: #1a1a1a;
--line: #262626;
--fg: #ededed;
--mute: #a1a1a1;
--faint: #848484;
--heat: #f0883e;
--on-solid: #0d0e10;
--primary: #2563eb;
--on-primary: #fff;
--link-line: #5a5a5a;
--accent: #7aa7f0;
--accent-soft: #222935;
--unread: #ff6369;
--ring-color: rgb(37 99 235 / 0.4);
--shadow-pop: 0 8px 24px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.02);
--ins: rgb(46 160 67 / 0.15);
--ins-n: rgb(63 185 80 / 0.3);
--ins-x: rgb(46 160 67 / 0.4);
--del: rgb(248 81 73 / 0.1);
--del-n: rgb(248 81 73 / 0.3);
--del-x: rgb(248 81 73 / 0.4);
--hunk: rgb(56 139 253 / 0.1);
--target: #3b3313;
--notice: #3b3313;
--notice-fg: #e3b341;
--notice-track: #5c4a14;
--comment: #9198a1;
--string: #a5d6ff;
--keyword: #ff7b72;
--number: #79c0ff;
--function: #d2a8ff;
--type: #ffa657;
--tag: #7ee787;
--attr: #79c0ff;
--scrim: rgb(0 0 0 / 0.6);
}
}
/* The themes a viewer can choose at /settings/appearance, kept in the
cookie `theme` and written on <html> by the server (src/lib/theme.ts).
Light is :root's own, and dark the block above again: keep the two alike.
Each holds on any element it is set on, as the choices draw themselves.
A theme of someone's own (custom-dark) falls back on dark's. */
[data-theme='custom-dark'],
[data-theme='dark'] {
color-scheme: dark;
--green: #3fb950;
--red: #f85149;
--purple: #b39af0;
--yellow: #d29922;
--gray: #9198a1;
--bg: #111;
--panel: #161616;
--soft: #1a1a1a;
--line: #262626;
--fg: #ededed;
--mute: #a1a1a1;
--faint: #848484;
--heat: #f0883e;
--on-solid: #0d0e10;
--primary: #2563eb;
--on-primary: #fff;
--link-line: #5a5a5a;
--accent: #7aa7f0;
--accent-soft: #222935;
--unread: #ff6369;
--ring-color: rgb(37 99 235 / 0.4);
--shadow-pop: 0 8px 24px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.02);
--ins: rgb(46 160 67 / 0.15);
--ins-n: rgb(63 185 80 / 0.3);
--ins-x: rgb(46 160 67 / 0.4);
--del: rgb(248 81 73 / 0.1);
--del-n: rgb(248 81 73 / 0.3);
--del-x: rgb(248 81 73 / 0.4);
--hunk: rgb(56 139 253 / 0.1);
--target: #3b3313;
--notice: #3b3313;
--notice-fg: #e3b341;
--notice-track: #5c4a14;
--comment: #9198a1;
--string: #a5d6ff;
--keyword: #ff7b72;
--number: #79c0ff;
--function: #d2a8ff;
--type: #ffa657;
--tag: #7ee787;
--attr: #79c0ff;
--scrim: rgb(0 0 0 / 0.6);
}
/* The rest of the themes: each names its hues, surfaces and text, and what
is drawn over them (a diff's lines, a notice) is mixed from those here. */
[data-theme]:where(:not([data-theme='light'], [data-theme='dark'])) {
--on-solid: var(--bg);
--link-line: color-mix(in srgb, var(--fg) 35%, var(--bg));
--accent-soft: color-mix(in srgb, var(--accent) 15%, var(--bg));
--unread: var(--red);
--ring-color: color-mix(in srgb, var(--primary) 40%, transparent);
--ins: color-mix(in srgb, var(--green) 12%, transparent);
--ins-n: color-mix(in srgb, var(--green) 25%, transparent);
--ins-x: color-mix(in srgb, var(--green) 22%, transparent);
--del: color-mix(in srgb, var(--red) 10%, transparent);
--del-n: color-mix(in srgb, var(--red) 25%, transparent);
--del-x: color-mix(in srgb, var(--red) 20%, transparent);
--hunk: color-mix(in srgb, var(--accent) 12%, transparent);
--target: color-mix(in srgb, var(--yellow) 18%, var(--bg));
--notice: color-mix(in srgb, var(--yellow) 18%, var(--bg));
--notice-fg: var(--yellow);
--heat: var(--primary);
--notice-track: color-mix(in srgb, var(--yellow) 35%, var(--bg));
--dir: var(--accent);
--shadow-pop: 0 8px 24px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.02);
--scrim: rgb(0 0 0 / 0.6);
--tag: var(--green);
--attr: var(--number);
}
/* A theme of someone's own (dev.knotless.theme): light's or dark's colours,
as its name says, under its own, which are written on the element it is
drawn on (src/lib/theme.ts). The surfaces and texts it leaves out are
mixed from its background and text. */
[data-theme^='custom-'] {
--panel: color-mix(in srgb, var(--fg) 4%, var(--bg));
--soft: color-mix(in srgb, var(--fg) 8%, var(--bg));
--line: color-mix(in srgb, var(--fg) 18%, var(--bg));
--mute: color-mix(in srgb, var(--fg) 80%, var(--bg));
--faint: color-mix(in srgb, var(--fg) 70%, var(--bg));
--on-primary: var(--bg);
/* Drawn as text, so from colours a theme gives to be read: links, and the yellow pulled toward the text. */
--heat: var(--accent);
--notice-fg: color-mix(in srgb, var(--yellow) 60%, var(--fg));
--tag: color-mix(in srgb, var(--green) 70%, var(--fg));
/* Faint, so a link of any colour that reads on the page reads on it too. */
--accent-soft: color-mix(in srgb, var(--accent) 8%, var(--bg));
/* Its background darkened, so a shadow takes the theme's hue and is never a glow of its text; as strong as light's or dark's, as its scheme says. */
--shadow: color-mix(in srgb, var(--bg) 30%, black);
--shadow-pop:
0 8px 24px
light-dark(
color-mix(in srgb, var(--shadow) 12%, transparent),
color-mix(in srgb, var(--shadow) 50%, transparent)
),
0 1px 2px color-mix(in srgb, var(--shadow) 6%, transparent);
}
/* https://catppuccin.com/palette, its lightest flavour. */
[data-theme='latte'] {
color-scheme: light;
--green: #317c21;
--red: #d20f39;
--purple: #8839ef;
--yellow: #996214;
/* Mauve, as --primary is, a shade deeper to read on the panels. */
--heat: #7f2fe3;
--gray: #696c81;
--bg: #eff1f5;
--panel: #e6e9ef;
--soft: #dce0e8;
--line: #ccd0da;
--fg: #3c3f58;
--mute: #53566c;
--faint: #60626e;
--primary: #8839ef;
--on-primary: #fff;
--accent: #1955cc;
--notice-fg: #86510a;
--shadow-pop: 0 8px 24px rgb(76 79 105 / 0.15), 0 1px 2px rgb(76 79 105 / 0.08);
--scrim: rgb(76 79 105 / 0.4);
--comment: #5d5f6b;
--string: #2d701e;
--keyword: #7b33d7;
--number: #a64108;
--function: #1a58d5;
--type: #865511;
--tag: #c40e35;
}
/* https://catppuccin.com/palette, its darkest flavour. */
[data-theme='mocha'] {
color-scheme: dark;
--green: #a6e3a1;
--red: #f38ba8;
--purple: #cba6f7;
--yellow: #f9e2af;
--gray: #9399b2;
--bg: #1e1e2e;
--panel: #24243a;
--soft: #313244;
--line: #363749;
--fg: #cdd6f4;
--mute: #a6adc8;
--faint: #989caf;
--primary: #cba6f7;
--on-primary: #1e1e2e;
--accent: #89b4fa;
--comment: #9a9eb1;
--string: #a6e3a1;
--keyword: #cba6f7;
--number: #fab387;
--function: #89b4fa;
--type: #f9e2af;
--tag: #f38ba8;
}
/* https://draculatheme.com/contribute */
[data-theme='dracula'] {
color-scheme: dark;
--green: #50fa7b;
--red: #ff5555;
--purple: #bd93f9;
--yellow: #f1fa8c;
--gray: #a9adc9;
--bg: #282a36;
--panel: #2d2f3d;
--soft: #363849;
--line: #3c3f52;
--fg: #f8f8f2;
--mute: #b9bcd6;
--faint: #98a1c4;
--primary: #bd93f9;
--on-primary: #282a36;
--accent: #ff79c6;
--comment: #a1aac9;
--string: #f1fa8c;
--keyword: #ff92d1;
--number: #c9a7fa;
--function: #50fa7b;
--type: #8be9fd;
--attr: #50fa7b;
}
@media (max-width: 640px) {
:root {
--text-field: var(--text-lg);
--text-field-sm: var(--text-lg);
}
}
/* https://pckt.blog, as its front page draws it: Tailwind's darkest gray,
and its logo's four colours, as they are. */
[data-theme='pckt'] {
color-scheme: dark;
--green: #21dc66;
--red: #ff5d5b;
--purple: #b39dfa;
--yellow: #ffca46;
--gray: #99a1af;
--bg: #101828;
--panel: #172133;
--soft: #1e2939;
--line: #2b3648;
--fg: #f9fafb;
--mute: #b4bac5;
--faint: #8a92a0;
--primary: #58a7ff;
--on-primary: #101828;
--accent: #58a7ff;
--comment: #8a92a0;
--string: #21dc66;
--keyword: #ff5d5b;
--number: #ffca46;
--function: #58a7ff;
--type: #ffca46;
--tag: #ff5d5b;
--attr: #58a7ff;
}
/* https://plyr.fm, as its stylesheet draws it: near black, and its blue. */
[data-theme='plyr'] {
color-scheme: dark;
--green: #4ade80;
--red: #ef4444;
--purple: #a78bfa;
--yellow: #fbbf24;
--gray: #808080;
--bg: #0a0a0a;
--panel: #141414;
--soft: #1a1a1a;
--hover: #1f1f1f;
--line: #282828;
--fg: #e8e8e8;
--mute: #b0b0b0;
--faint: #848484;
--primary: #6a9fff;
--on-primary: #0a0a0a;
--accent: #6a9fff;
--comment: #888888;
--string: #4ade80;
--keyword: #6a9fff;
--number: #fbbf24;
--function: #8ab3ff;
--type: #a78bfa;
--tag: #f16060;
--attr: #fbbf24;
}
/* https://blacksky.community, as its app draws it dark: near black, its
periwinkle and its lime. */
[data-theme='blacksky'] {
color-scheme: dark;
--green: #d2fc51;
--red: #ff4b78;
--purple: #b0b3f0;
--yellow: #ffd166;
--gray: #9c9e9e;
--bg: #070c0c;
--panel: #0e1212;
--soft: #1f2020;
--line: #262828;
--fg: #f8faf9;
--mute: #c8cac9;
--faint: #9c9e9e;
--primary: #8686ff;
--on-primary: #070c0c;
--accent: #8686ff;
--comment: #9c9e9e;
--string: #d2fc51;
--keyword: #8686ff;
--number: #ff7396;
--function: #b0b3f0;
--type: #aefa59;
--tag: #ff7396;
--attr: #b0b3f0;
}