chore: add styles

1 files changed, 137 insertions, 0 deletions

diff --git a/htdocs/src/scss/abstracts/_variables.scss b/htdocs/src/scss/abstracts/_variables.scss
new file mode 100644
index 0000000..a891bed
--- /dev/null
+++ b/htdocs/src/scss/abstracts/_variables.scss
@@ -0,0 +1,137 @@
+@use "sass:math";
+@use "../abstracts/functions" as fun;
+
+//===========================================================================
+// Ratios
+//===========================================================================
+
+/// Ratios map
+/// @prop {String} keys - Keys are identifiers mapped to a given ratio
+/// @prop {Map} value - Value is actual ratio
+$ratios: (
+  "minor-second": 1.067,
+  "major-second": 1.125,
+  "minor-third": 1.2,
+  "major-third": 1.25,
+  "perfect-fourth": 1.333,
+  "augmented-fourth": 1.414,
+  "perfect-fifth": 1.5,
+  "golden-number": 1.618,
+);
+
+// Cannot declare the following function in partials due to module loop.
+// Also, it will only be used in this file so it is not a problem.
+
+/// Get ratio
+/// @param {String} $name - Ratio name.
+/// @return {Integer} The ratio value.
+@function get-ratio($name) {
+  @return map-get($ratios, $name);
+}
+
+//===========================================================================
+// Layout
+//===========================================================================
+
+/// Breakpoints map
+/// @prop {String} keys - Keys are identifiers mapped to a given length
+/// @prop {Map} values - Values are actual breakpoints expressed in pixels
+$breakpoints: (
+  "xs": fun.convert-px(568, "em"),
+  "sm": fun.convert-px(768, "em"),
+  "md": fun.convert-px(1024, "em"),
+  "lg": fun.convert-px(1200, "em"),
+  "xl": fun.convert-px(1600, "em"),
+  "2xl": fun.convert-px(1920, "em"),
+);
+
+//===========================================================================
+// Fonts
+//===========================================================================
+
+/* stylelint-disable -- Fonts name are not keywords, lowercase is not needed. */
+/// Regular font family
+/// @type List
+$font-family_primary: ("Inter", "Liberation Sans", Arial, sans-serif);
+
+/// Alternative regular font family
+/// @type List
+$font-family_secondary: ("Kanit", "Liberation Sans", Arial, sans-serif);
+
+/// Monospace font family
+/// @type List
+$font-family_mono: (
+  "Cousine",
+  "Liberation Mono",
+  "DejaVu Sans Mono",
+  "Courier New",
+  monospace
+);
+/* stylelint-enable */
+
+$line-height: get-ratio("golden-number");
+
+$font-size_base: 16px;
+$font-size_base-rem: fun.convert-px(16); // font-size_base without unit
+$font-size_ratio: get-ratio("minor-third");
+$font-size_sm: $font-size_base-rem * math.pow($font-size_ratio, -1);
+$font-size_md: $font-size_base-rem * math.pow($font-size_ratio, 0);
+$font-size_lg: $font-size_base-rem * math.pow($font-size_ratio, 1);
+$font-size_xl: $font-size_base-rem * math.pow($font-size_ratio, 2);
+$font-size_2xl: $font-size_base-rem * math.pow($font-size_ratio, 3);
+$font-size_3xl: $font-size_base-rem * math.pow($font-size_ratio, 4);
+$font-size_4xl: $font-size_base-rem * math.pow($font-size_ratio, 5);
+$font-size_5xl: $font-size_base-rem * math.pow($font-size_ratio, 6);
+
+//============================================================================
+// Spacings
+//============================================================================
+
+$spacing_ratio: get-ratio("golden-number");
+$spacing_base: $spacing_ratio * 1rem;
+
+$spacing_3xs: math.div($spacing_base, 4);
+$spacing_2xs: math.div($spacing_base, 3);
+$spacing_xs: math.div($spacing_base, 2);
+$spacing_sm: math.div($spacing_base, 1.5);
+$spacing_md: $spacing_base;
+$spacing_lg: $spacing_base * 1.5;
+$spacing_xl: $spacing_base * 2;
+$spacing_2xl: $spacing_base * 3;
+$spacing_3xl: $spacing_base * 4;
+
+//============================================================================
+// Colors
+//============================================================================
+
+$color_black-squeeze: hsl(212, 55%, 97%);
+$color_black-squeeze-opacity-80: hsla(212, 55%, 97%, 0.8);
+$color_catskill-white: hsl(212, 53%, 92%);
+$color_link-water: hsl(212, 51%, 87%);
+$color_geyser: hsl(212, 27%, 83%);
+$color_gull-gray: hsl(212, 15%, 66%);
+$color_gull-gray-opacity: hsla(212, 15%, 66%, 0.55);
+$color_pale-sky: hsl(212, 13%, 46%);
+$color_fiord: hsl(212, 29%, 35%);
+$color_rhino: hsl(212, 33%, 28%);
+$color_cloud-burst: hsl(211, 36%, 12%);
+$color_mirage: hsl(211, 36%, 14%);
+$color_nile-blue: hsl(212, 47%, 19%);
+$color_big-stone: hsl(212, 45%, 15%);
+$color_firefly: hsl(212, 45%, 11%);
+$color_firefly-opacity-80: hsla(212, 45%, 11%, 0.8);
+$color_chambray: hsl(212, 45%, 40%);
+$color_chathams-blue: hsl(212, 65%, 28%);
+$color_chathams-blue-light: hsl(212, 90%, 30%);
+$color_chathams-blue-light-opacity-25: hsla(212, 90%, 30%, 0.25);
+$color_chathams-blue-dark: hsl(212, 70%, 25%);
+$color_russet: hsl(23, 65%, 31%);
+$color_russet-opacity-25: hsla(23, 65%, 31%, 0.25);
+$color_horizon: hsl(213, 30%, 54%);
+$color_kashmir-blue: hsl(212, 30%, 46%);
+$color_spindle: hsl(212, 56%, 75%);
+$color_spindle-light: hsl(212, 52%, 78%);
+$color_spindle-light-opacity-35: hsla(212, 52%, 78%, 0.35);
+$color_spindle-dark: hsl(213, 60%, 72%);
+$color_brandy: hsl(37, 51%, 74%);
+$color_brandy-opacity-40: hsla(37, 51%, 74%, 0.4);