website: initial ooknet website commit

outputs/pkgs/website/src/sass/abstracts/_colors.scss

@@ -0,0 +1,75 @@
+$themes: (
+  dark: (
+    crust: hsl(0, 0%, 15.69%),
+    mantle: hsl(20, 3.09%, 19.02%),
+    base: hsl(24, 4.5%, 21.76%),
+    surface-0: hsl(22.5, 6.15%, 25.49%),
+    surface-1: hsl(21.82, 7.38%, 29.22%),
+    surface-2: hsl(25.71, 8.43%, 32.55%),
+    overlay-0: hsl(26.25, 8.25%, 38.04%),
+    overlay-1: hsl(30, 9.8%, 40%),
+    overlay-2: hsl(27.5, 10.71%, 43.92%),
+    subtext-0: hsl(30, 12.1%, 51.37%),
+    subtext-1: hsl(35, 17.14%, 58.82%),
+    text: hsl(38, 41.1%, 71.37%),
+    bright-text: hsl(48.46, 86.67%, 88.24%),
+    red: hsl(3.09, 76.4%, 65.1%),
+    dull-red: hsl(3, 56.18%, 65.1%),
+    bright-red: hsl(2.75, 85.62%, 70%),
+    orange: hsl(23.53, 76.12%, 60.59%),
+    dull-orange: hsl(24.11, 56%, 60.78%),
+    bright-orange: hsl(23.76, 86.13%, 66.08%),
+    gold: hsl(36.74, 62.32%, 59.41%),
+    dull-gold: hsl(37.24, 41.63%, 59.02%),
+    bright-gold: hsl(37.27, 71.74%, 63.92%),
+    green: hsl(69.63, 35.68%, 55.49%),
+    dull-green: hsl(71.35, 16.16%, 55.1%),
+    bright-green: hsl(70.21, 46.08%, 60%),
+    cyan: hsl(111.6, 25%, 60.78%),
+    dull-cyan: hsl(112.17, 11.56%, 60.98%),
+    bright-cyan: hsl(112.13, 35.26%, 66.08%),
+    blue: hsl(166.53, 23.22%, 58.63%),
+    dull-blue: hsl(162.86, 3.35%, 59.02%),
+    bright-blue: hsl(167, 32.61%, 63.92%),
+    purple: hsl(343.64, 46.67%, 67.65%),
+    dull-purple: hsl(343.64, 26.83%, 67.84%),
+    bright-purple: hsl(343.85, 56.52%, 72.94%),
+  ),
+  light: (
+    //crust: hsl(46, 67%, 84%),
+    crust: hsl(40, 38%, 73%),
+    mantle: hsl(44, 60%, 82%),
+    base: hsl(43, 59%, 81%),
+    surface-0: hsl(42, 53%, 79%),
+    surface-1: hsl(41, 42%, 75%),
+    surface-2: hsl(40, 38%, 73%),
+    overlay-0: hsl(41, 29%, 66%),
+    overlay-1: hsl(43, 24%, 63%),
+    overlay-2: hsl(35, 17%, 59%),
+    subtext-0: hsl(30, 12%, 51%),
+    subtext-1: hsl(28, 11%, 44%),
+    text: hsl(22, 20%, 26%),
+    bright-text: hsl(22, 20%, 26%),
+    red: hsl(359, 65%, 42%),
+    dull-red: hsl(359, 54%, 40%),
+    bright-red: hsl(359, 68%, 47%),
+    orange: hsl(23, 93%, 38%),
+    dull-orange: hsl(23, 73%, 38%),
+    bright-orange: hsl(23, 88%, 43%),
+    gold: hsl(37, 86%, 38%),
+    dull-gold: hsl(37, 60%, 38%),
+    bright-gold: hsl(37, 91%, 45%),
+    green: hsl(63, 59%, 29%),
+    dull-green: hsl(63, 39%, 29%),
+    bright-green: hsl(63, 66%, 35%),
+    cyan: hsl(144, 26%, 38%),
+    dull-cyan: hsl(144, 10%, 38%),
+    bright-cyan: hsl(144, 36%, 45%),
+    blue: hsl(190, 52%, 31%),
+    dull-blue: hsl(190, 32%, 31%),
+    bright-blue: hsl(190, 62%, 36%),
+    purple: hsl(322, 30%, 44%),
+    dull-purple: hsl(322, 10%, 44%),
+    bright-purple: hsl(322, 35%, 54%),
+  ),
+);

outputs/pkgs/website/src/sass/abstracts/_typography.scss

@@ -0,0 +1,33 @@
+$paragraph-margin-bottom: 1rem;
+
+$border-solid: 1px solid var(--clr-text);
+$border-light: 1px solid var(--clr-subtext-0);
+
+$spacer: 1rem;
+$horizontal-rule: 1px solid var(--clr-overlay-2);
+
+$font-family-monospace: "Jetbrains Mono", system-ui, monospace;
+$font-family-sans: "Geist Sans", "Geist", system-ui, sans-serif;
+$font-family-title: "Geist Sans", "Geist", system-ui, sans-serif;
+$font-family-header: "Geist Sans", "Geist", system-ui, sans-serif;
+
+$font-family-base: $font-family-sans;
+$font-family-code: $font-family-monospace;
+
+$font-size-base: 1rem;
+$font-size-small: $font-size-base * 0.875;
+$font-size-medium: $font-size-base * 1.125;
+$font-size-large: $font-size-base * 1.25;
+$font-size-xl: $font-size-base * 2;
+
+$font-weight-thin: 200;
+$font-weight-regular: 400;
+$font-weight-bold: 700;
+$font-weight-bolder: 800;
+
+$font-color-text: var(--clr-text);
+$font-color-bright: var(--clr-bright-text);
+$font-color-link: var(--clr-blue);
+$font-color-link-hover: var(--clr-bright-blue);
+
+$font-style-link-hover: underline;

outputs/pkgs/website/src/sass/abstracts/_variables.scss

@@ -0,0 +1,16 @@
+@mixin min-screen($min-width: $body-width) {
+  @media screen and (min-width: $min-width) {
+    @content;
+  }
+}
+
+@mixin max-screen($max-width: $body-width) {
+  @media screen and (max-width: $max-width) {
+    @content;
+  }
+}
+
+$sidebar-width: 300px;
+$navbar-height: 50px;
+
+$solid-border: 1px solid var(--clr-text);

outputs/pkgs/website/src/sass/abstracts/index.scss

@@ -0,0 +1,3 @@
+@forward "colors";
+@forward "variables";
+@forward "typography";