chore: add styles

7 files changed, 348 insertions, 0 deletions

diff --git a/htdocs/src/scss/base/_animations.scss b/htdocs/src/scss/base/_animations.scss
new file mode 100644
index 0000000..9ec8e9e
--- /dev/null
+++ b/htdocs/src/scss/base/_animations.scss
@@ -0,0 +1,89 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    margin-left: -100%;
+  }
+
+  100% {
+    margin-left: 0;
+    visibility: visible;
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    margin-left: 0;
+  }
+
+  100% {
+    margin-left: -100%;
+    visibility: hidden;
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    margin-bottom: -100%;
+  }
+
+  100% {
+    margin-bottom: 0;
+    visibility: visible;
+  }
+}
+
+@keyframes slideOutBottom {
+  0% {
+    margin-bottom: 0;
+  }
+
+  100% {
+    margin-bottom: -100%;
+    visibility: hidden;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.8s;
+}
+
+.fade-out {
+  animation: fadeOut 0.8s;
+}
+
+.slide-in--left {
+  animation: slideInLeft 0.8s;
+}
+
+.slide-out--left {
+  animation: slideOutLeft 0.8s;
+}
+
+.slide-in--up {
+  animation: slideInUp 0.8s;
+}
+
+.slide-out--bottom {
+  animation: slideOutBottom 0.8s;
+}
diff --git a/htdocs/src/scss/base/_base.scss b/htdocs/src/scss/base/_base.scss
new file mode 100644
index 0000000..4818120
--- /dev/null
+++ b/htdocs/src/scss/base/_base.scss
@@ -0,0 +1,6 @@
+@use "../abstracts/functions" as fun;
+@use "../abstracts/mixins" as mix;
+
+html {
+  overflow: hidden;
+}
diff --git a/htdocs/src/scss/base/_colors.scss b/htdocs/src/scss/base/_colors.scss
new file mode 100644
index 0000000..2160585
--- /dev/null
+++ b/htdocs/src/scss/base/_colors.scss
@@ -0,0 +1,27 @@
+@use "../abstracts/mixins" as mix;
+@use "../abstracts/variables" as var;
+@include mix.set-vars(
+  (
+    color-bg: #{var.$color_black-squeeze},
+    color-bg-opacity: #{var.$color_black-squeeze-opacity-80},
+    color-bg-secondary: #{var.$color_catskill-white},
+    color-bg-tertiary: #{var.$color_link-water},
+    color-fg: #{var.$color_firefly},
+    color-fg-inverted: #{var.$color_black-squeeze},
+    color-fg-secondary: #{var.$color_chathams-blue-dark},
+    color-fg-tertiary: #{var.$color_nile-blue},
+    color-border: #{var.$color_chathams-blue},
+    color-border-light: #{var.$color_geyser},
+    color-border-lighter: #{var.$color_link-water},
+    color-shadow-darker: #{var.$color_nile-blue},
+    color-shadow-dark: #{var.$color_pale-sky},
+    color-shadow: #{var.$color_chambray},
+    color-shadow-light: #{var.$color_gull-gray},
+    color-shadow-lighter: #{var.$color_geyser},
+    color-primary: #{var.$color_chathams-blue},
+    color-primary-light: #{var.$color_chathams-blue-light},
+    color-primary-light-opacity: #{var.$color_chathams-blue-light-opacity-25},
+    color-primary-dark: #{var.$color_chathams-blue-dark},
+    color-secondary: #{var.$color_russet},
+  )
+);
diff --git a/htdocs/src/scss/base/_fonts.scss b/htdocs/src/scss/base/_fonts.scss
new file mode 100644
index 0000000..3a0ee90
--- /dev/null
+++ b/htdocs/src/scss/base/_fonts.scss
@@ -0,0 +1,117 @@
+@use "../abstracts/functions" as fun;
+@use "../abstracts/mixins" as mix;
+@use "../abstracts/variables" as var;
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: normal;
+  font-weight: 700;
+  src: url("../fonts/Kanit/Kanit-Bold.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: italic;
+  font-weight: 700;
+  src: url("../fonts/Kanit/Kanit-BoldItalic.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: normal;
+  font-weight: 600;
+  src: url("../fonts/Kanit/Kanit-SemiBold.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: italic;
+  font-weight: 600;
+  src: url("../fonts/Kanit/Kanit-SemiBoldItalic.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-SemiBoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: normal;
+  font-weight: 500;
+  src: url("../fonts/Kanit/Kanit-Medium.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-Medium.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: italic;
+  font-weight: 500;
+  src: url("../fonts/Kanit/Kanit-MediumItalic.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/Kanit/Kanit-Regular.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/Kanit/Kanit-Italic.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: normal;
+  font-weight: 300;
+  src: url("../fonts/Kanit/Kanit-Light.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-Light.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Kanit;
+  font-style: italic;
+  font-weight: 300;
+  src: url("../fonts/Kanit/Kanit-LightItalic.woff2") format("woff2"),
+    url("../fonts/Kanit/Kanit-LightItalic.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter;
+  font-style: oblique 0deg 10deg;
+  font-weight: 100 900;
+  src: url("../fonts/Inter/Inter.woff2?v=3.18") format("woff2");
+}
+
+@include mix.set-vars(
+  (
+    font-family-primary: #{var.$font-family_primary},
+    font-family-secondary: #{var.$font-family_secondary},
+    font-family-mono: #{var.$font-family_mono},
+    font-size-sm: #{var.$font-size_sm},
+    font-size-md: #{var.$font-size_md},
+    font-size-lg: #{var.$font-size_lg},
+    font-size-xl: #{var.$font-size_xl},
+    font-size-2xl: #{var.$font-size_2xl},
+    font-size-3xl: #{var.$font-size_3xl},
+    font-size-4xl: #{var.$font-size_4xl},
+    line-height: #{var.$line-height},
+  )
+);
diff --git a/htdocs/src/scss/base/_helpers.scss b/htdocs/src/scss/base/_helpers.scss
new file mode 100644
index 0000000..2e85a51
--- /dev/null
+++ b/htdocs/src/scss/base/_helpers.scss
@@ -0,0 +1,44 @@
+@use "../abstracts/functions" as fun;
+@use "../abstracts/mixins" as mix;
+
+.hide {
+  display: none;
+}
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: fun.convert-px(1);
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: fun.convert-px(1);
+  word-break: normal;
+  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+
+  &:focus {
+    background: fun.get-var(color-bg);
+    border: fun.convert-px(3) solid fun.get-var(color-border);
+    box-shadow: 0 0 fun.convert-px(2) fun.convert-px(2)
+      fun.get-var(color-shadow-light);
+    clip: auto !important;
+    color: fun.get-var(color-primary);
+    display: block;
+    font-size: fun.get-var(font-size-md);
+    font-weight: 600;
+    height: auto;
+    left: 0;
+    padding: fun.get-var(spacing-sm) fun.get-var(spacing-md);
+    top: 0;
+    width: auto;
+    z-index: 100000;
+  }
+}
+
+@include mix.motion("reduce") {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
diff --git a/htdocs/src/scss/base/_spacings.scss b/htdocs/src/scss/base/_spacings.scss
new file mode 100644
index 0000000..9106c48
--- /dev/null
+++ b/htdocs/src/scss/base/_spacings.scss
@@ -0,0 +1,17 @@
+@use "../abstracts/functions" as fun;
+@use "../abstracts/mixins" as mix;
+@use "../abstracts/variables" as var;
+@include mix.set-vars(
+  (
+    spacing-3xs: var.$spacing_3xs,
+    spacing-2xs: var.$spacing_2xs,
+    spacing-xs: var.$spacing_xs,
+    spacing-sm: var.$spacing_sm,
+    spacing-md: var.$spacing_md,
+    spacing-lg: var.$spacing_lg,
+    spacing-xl: var.$spacing_xl,
+    spacing-2xl: var.$spacing_2xl,
+    spacing-3xl: var.$spacing_3xl,
+    toolbar-height: fun.convert-px(60),
+  )
+);
diff --git a/htdocs/src/scss/base/_typography.scss b/htdocs/src/scss/base/_typography.scss
new file mode 100644
index 0000000..cd553e8
--- /dev/null
+++ b/htdocs/src/scss/base/_typography.scss
@@ -0,0 +1,48 @@
+@use "../abstracts/functions" as fun;
+
+*::selection {
+  background: fun.get-var(color-primary-light-opacity);
+}
+
+body {
+  background: fun.get-var(color-bg-secondary);
+  color: fun.get-var(color-fg);
+  font-size: fun.get-var(font-size-md);
+  line-height: fun.get-var(line-height);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul {
+  margin: 0 0 fun.get-var(spacing-sm);
+}
+
+a {
+  color: fun.get-var(color-primary);
+  text-decoration-thickness: fun.convert-px(2);
+  text-underline-offset: fun.convert-px(3);
+  transition: all 0.3s ease-in-out 0s;
+
+  &:hover,
+  &:focus {
+    color: fun.get-var(color-primary-light);
+    text-decoration-color: fun.get-var(color-primary-light);
+    text-decoration-thickness: fun.convert-px(4);
+  }
+
+  &:focus {
+    outline: fun.get-var(color-primary) dotted fun.convert-px(1);
+  }
+
+  &:active {
+    color: fun.get-var(color-primary-dark);
+    outline: none;
+    text-decoration-color: fun.get-var(color-primary-dark);
+    text-decoration-thickness: fun.convert-px(2);
+  }
+}