restructure for cgit css

2 files changed, 79 insertions, 0 deletions

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; }