From 52cdeaf4cc9da9d32926821c78fd331bc8d2f14a Mon Sep 17 00:00:00 2001 From: Alexander Kassouni Date: Tue, 29 Sep 2026 23:29:28 -0700 Subject: restructure for cgit css --- style/_fonts.scss | 28 ++++++++++++++++++++++++++++ style/_palette.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 style/_fonts.scss create mode 100644 style/_palette.scss (limited to 'style') diff --git a/style/_fonts.scss b/style/_fonts.scss new file mode 100644 index 0000000..2299bca --- /dev/null +++ b/style/_fonts.scss @@ -0,0 +1,28 @@ +@use "sass:list"; + +$-faces: ( + 100: ("Thin", "ThinItalic"), + 200: ("ExtraLight", "ExtraLightItalic"), + 300: ("Light", "LightItalic"), + 400: ("Regular", "Italic"), + 450: ("Text", "TextItalic"), + 500: ("Medium", "MediumItalic"), + 600: ("SemiBold", "SemiBoldItalic"), + 700: ("Bold", "BoldItalic"), +); + +$-styles: normal italic; + +@each $weight, $names in $-faces { + @for $i from 1 through 2 { + @font-face { + font-family: "IBM Plex Mono"; + src: url("/fonts/mono/IBMPlexMono-#{list.nth($names, $i)}.woff2") format("woff2"); + font-weight: $weight; + font-style: list.nth($-styles, $i); + font-display: swap; + } + } +} + +$mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; diff --git a/style/_palette.scss b/style/_palette.scss new file mode 100644 index 0000000..b61eb94 --- /dev/null +++ b/style/_palette.scss @@ -0,0 +1,51 @@ +@mixin ayu-dark { + color-scheme: dark; + + --bg: #0F1419; // base00 default background + --bg-alt: #131721; // base01 raised background + --bg-sel: #272D38; // base02 selection background + --grey: #3E4B59; // base03 comments, invisibles + --fg-dim: #BFBDB6; // base04 muted foreground + --fg: #E6E1CF; // base05 default foreground + --fg-alt: #E6E1CF; // base06 + --fg-bright: #F3F4F5; // base07 brightest foreground + + --red: #F07178; // base08 + --orange: #FF8F40; // base09 + --yellow: #FFB454; // base0A + --green: #B8CC52; // base0B + --cyan: #95E6CB; // base0C + --blue: #59C2FF; // base0D + --purple: #D2A6FF; // base0E + --brown: #E6B673; // base0F +} + +@mixin ayu-light { + color-scheme: light; + + --bg: #FAFAFA; // base00 + --bg-alt: #F3F4F5; // base01 + --bg-sel: #F8F9FA; // base02 + --grey: #ABB0B6; // base03 + --fg-dim: #828C99; // base04 + --fg: #5C6773; // base05 + --fg-alt: #242936; // base06 + --fg-bright: #1A1F29; // base07 + + --red: #F07178; // base08 + --orange: #FA8D3E; // base09 + --yellow: #F2AE49; // base0A + --green: #86B300; // base0B + --cyan: #4CBF99; // base0C + --blue: #36A3D9; // base0D + --purple: #A37ACC; // base0E + --brown: #E6BA7E; // base0F +} + +:root { @include ayu-light; } +@media (prefers-color-scheme: dark) { + :root { @include ayu-dark; } +} + +:root[data-theme="dark"] { @include ayu-dark; } +:root[data-theme="light"] { @include ayu-light; } -- cgit v1.3.1