refactor(Style): add SASS to reduce style repetition

- Use list, maps and loops to reduce code duplication with small variations
- Use SASS functions for some extreme cases
- Keep native CSS variables to allow overriding/reference in other
  styles

refactor(Style): change css theme variables to SASS

add sass files from catppuccin to the project instead of importing it from NPM

refactor(Style): use SASS functions to reduce code boilerplate

package.json

@@ -17,6 +17,7 @@
     "astro": "^4.0.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "sass": "^1.71.1",
     "sharp": "^0.32.6"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -19,13 +19,16 @@ dependencies:
     version: 18.2.17
   astro:
     specifier: ^4.0.6
-    version: 4.0.6(typescript@5.2.2)
+    version: 4.0.6(sass@1.71.1)(typescript@5.2.2)
   react:
     specifier: ^18.0.0
     version: 18.2.0
   react-dom:
     specifier: ^18.0.0
     version: 18.2.0(react@18.2.0)
+  sass:
+    specifier: ^1.71.1
+    version: 1.71.1
   sharp:
     specifier: ^0.32.6
     version: 0.32.6
@@ -1142,7 +1145,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.0.7
+      vite: 5.0.7(sass@1.71.1)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -1372,7 +1375,7 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /astro@4.0.6(typescript@5.2.2):
+  /astro@4.0.6(sass@1.71.1)(typescript@5.2.2):
     resolution: {integrity: sha512-P7CfFqWKzkJozzF6IoOC6qoI2ONndV8P3ULhGDgMiXPL7xVkWI5haTBSpyrcjBx643tVXspIRsSV/v+Cx+CjGw==}
     engines: {node: '>=18.14.1', npm: '>=6.14.0'}
     hasBin: true
@@ -1433,7 +1436,7 @@ packages:
       tsconfck: 3.0.0(typescript@5.2.2)
       unist-util-visit: 5.0.0
       vfile: 6.0.1
-      vite: 5.0.7
+      vite: 5.0.7(sass@1.71.1)
       vitefu: 0.2.5(vite@5.0.7)
       which-pm: 2.1.1
       yargs-parser: 21.1.1
@@ -3198,6 +3201,10 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable@4.3.5:
+    resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
+    dev: false
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -5031,6 +5038,16 @@ packages:
       suf-log: 2.5.3
     dev: true
 
+  /sass@1.71.1:
+    resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.5
+      source-map-js: 1.0.2
+    dev: false
+
   /sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
     dev: false
@@ -5815,7 +5832,7 @@ packages:
       vfile-message: 4.0.2
     dev: false
 
-  /vite@5.0.7:
+  /vite@5.0.7(sass@1.71.1):
     resolution: {integrity: sha512-B4T4rJCDPihrQo2B+h1MbeGL/k/GMAHzhQ8S0LjQ142s6/+l3hHTT095ORvsshj4QCkoWu3Xtmob5mazvakaOw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -5846,6 +5863,7 @@ packages:
       esbuild: 0.19.8
       postcss: 8.4.32
       rollup: 4.7.0
+      sass: 1.71.1
     optionalDependencies:
       fsevents: 2.3.3
     dev: false
@@ -5858,7 +5876,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 5.0.7
+      vite: 5.0.7(sass@1.71.1)
     dev: false
 
   /vscode-languageserver-textdocument@1.0.11:

src/assets/style/_utils.scss

@@ -0,0 +1,256 @@
+@use './variables' as *;
+
+.d-none {
+  display: none;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.flex-eq > * {
+  flex: 100%;
+}
+
+.hstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+}
+
+.hstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.vstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  flex-direction: column;
+}
+
+.vstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@each $name, $size in $screen-sizes {
+  @media screen and (min-width: $size) {
+    .flex-#{$name}-wrap {
+      flex-wrap: wrap;
+    }
+
+    .flex-#{$name}-nowrap {
+      flex-wrap: nowrap;
+    }
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.grid {
+  --prj-gap: var(--prj-spacing-3);
+  --prj-columns: repeat(3, 1fr);
+  --prj-min-col-width: 150px;
+  display: grid;
+  grid-template-columns: var(--prj-columns);
+  gap: var(--prj-gap);
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    --prj-columns: repeat(#{$i}, minmax(var(--prj-min-col-width), 1fr));
+  }
+}
+
+@each $index, $variable, $value in $spacings {
+  .gap-#{$index} {
+    --prj-gap: var(#{$variable});
+  }
+}
+
+.list-unstyle {
+  list-style: none;
+}
+
+.text-justify {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.align-start {
+  vertical-align: start;
+}
+
+.align-center {
+  vertical-align: middle;
+}
+
+.align-end {
+  vertical-align: end;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.w-auto {
+  width: auto;
+}
+.h-auto {
+  height: auto;
+}
+@for $i from 0 through 100 {
+  .w-#{$i} {
+    width: percentage($i / 100);
+  }
+  .h-#{$i} {
+    height: percentage($i / 100);
+  }
+}
+
+.m-auto {
+  margin: auto !important;
+}
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+.mt-auto {
+  margin-top: auto !important;
+}
+.mb-auto {
+  margin-bottom: auto !important;
+}
+.ml-auto {
+  margin-left: auto !important;
+}
+.mr-auto {
+  margin-right: auto !important;
+}
+.p-auto {
+  padding: auto !important;
+}
+.px-auto {
+  padding-left: auto !important;
+  padding-right: auto !important;
+}
+.py-auto {
+  padding-top: auto !important;
+  padding-bottom: auto !important;
+}
+.pt-auto {
+  padding-top: auto !important;
+}
+.pb-auto {
+  padding-bottom: auto !important;
+}
+.pl-auto {
+  padding-left: auto !important;
+}
+.pr-auto {
+  padding-right: var(--prj-spacing-5) !important;
+}
+
+@each $index, $variable, $value in $spacings {
+  .m-#{$index} {
+    margin: var(#{$variable}) !important;
+  }
+  .mx-#{$index} {
+    margin-left: var(#{$variable}) !important;
+    margin-right: var(#{$variable}) !important;
+  }
+  .my-#{$index} {
+    margin-top: var(#{$variable}) !important;
+    margin-bottom: var(#{$variable}) !important;
+  }
+  .mt-#{$index} {
+    margin-top: var(#{$variable}) !important;
+  }
+  .mb-#{$index} {
+    margin-bottom: var(#{$variable}) !important;
+  }
+  .ml-#{$index} {
+    margin-left: var(#{$variable}) !important;
+  }
+  .mr-#{$index} {
+    margin-right: var(#{$variable}) !important;
+  }
+  .p-#{$index} {
+    padding: var(#{$variable}) !important;
+  }
+  .px-#{$index} {
+    padding-left: var(#{$variable}) !important;
+    padding-right: var(#{$variable}) !important;
+  }
+  .py-#{$index} {
+    padding-top: var(#{$variable}) !important;
+    padding-bottom: var(#{$variable}) !important;
+  }
+  .pt-#{$index} {
+    padding-top: var(#{$variable}) !important;
+  }
+  .pb-#{$index} {
+    padding-bottom: var(#{$variable}) !important;
+  }
+  .pl-#{$index} {
+    padding-left: var(#{$variable}) !important;
+  }
+  .pr-#{$index} {
+    padding-right: var(#{$variable}) !important;
+  }
+}
+
+.shadow-0 {
+  box-shadow: none;
+}
+
+.border-radius {
+  border-radius: var(--prj-border-radius);
+}

src/assets/style/_variables.scss

@@ -0,0 +1,67 @@
+@use 'sass:color';
+
+/* Using catppuccin for now, make a theme switcher later */
+@use './themes/catppuccin/catppuccin';
+
+@function getColor($color) {
+  $ctp-theme: map-get(catppuccin.$palette, 'macchiato');
+  @return map-get($ctp-theme, $color);
+}
+
+/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+$screen-sizes: (
+  'sm': 640px,
+  'md': 768px,
+  'lg': 1024px,
+  'xl': 1280px,
+  '2xl': 1536px,
+);
+
+$spacings: (
+  0 '--prj-spacing-0' 0,
+  1 '--prj-spacing-1' 0.25rem,
+  2 '--prj-spacing-2' 0.5rem,
+  3 '--prj-spacing-3' 1rem,
+  4 '--prj-spacing-4' 2rem,
+  5 '--prj-spacing-5' 3rem
+);
+
+$border-radius: 0.5rem;
+
+// Native CSS Variables to allow overridings and usage in external stylesheets
+:root {
+  /* Variables prefixed with prj to avoid collisions */
+
+  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
+  --prj-bg: #{getColor('mantle')};
+  --prj-shadow: #{getColor('crust')};
+  --prj-text: #{getColor('text')};
+
+  --prj-surface-1: #{getColor('base')};
+  --prj-surface-2: #{darken(getColor('surface0'), 2%)};
+  --prj-surface-3: #{getColor('surface1')};
+  --prj-surface-text: #{getColor('text')};
+
+  --prj-link-text: #{getColor('teal')};
+
+  --prj-accent-bg: #{getColor('teal')};
+  --prj-accent-text: #{getColor('base')};
+
+  --prj-primary: #{getColor('teal')};
+  --prj-primary-text: #{getColor('base')};
+
+  --prj-danger: #{getColor('red')};
+  --prj-danger-text: #{getColor('base')};
+
+  --prj-disabled: #{getColor('red')};
+  --prj-disabled-text: rgba(#{getColor('raw')}, 0.5);
+
+  --prj-input: #{getColor('text')};
+  --prj-input-text: #{getColor('base')};
+
+  @each $index, $variable, $value in $spacings {
+    #{$variable}: #{$value};
+  }
+
+  --prj-border-radius: #{$border-radius};
+}

src/assets/style/style.scss

@@ -1,5 +1,8 @@
-@import url('./themes.css');
+@use './variables.scss' as *;
-@import url('./utils.css');
+@use './utils.scss';
+
+// SASS variables are imported without namespace, but try to always use native
+// CSS variables when possible so they can be overrwritten by custom styles
 
 html {
   background-color: var(--prj-bg);
@@ -20,7 +23,7 @@ section:not(.clean) {
   padding: var(--prj-spacing-3);
   background-color: var(--prj-surface-1);
   box-shadow: 10px 10px 5px 0px var(--prj-shadow);
-  border-radius: var(--prj-border-radious);
+  border-radius: var(--prj-border-radius);
 }
 
 section:not(:first-child) {
@@ -67,30 +70,11 @@ p:last-child {
 }
 
 /* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
-
+@each $name, $size in $screen-sizes {
-@media screen and (min-width: 640px) {
+  @media screen and (min-width: $size) {
-  body {
+    body {
-    max-width: 640px;
+      max-width: $size;
-  }
+    }
-}
-@media screen and (min-width: 768px) {
-  body {
-    max-width: 768px;
-  }
-}
-@media screen and (min-width: 1024px) {
-  body {
-    max-width: 1024px;
-  }
-}
-@media screen and (min-width: 1280px) {
-  body {
-    max-width: 1280px;
-  }
-}
-@media screen and (min-width: 1536px) {
-  body {
-    max-width: 1536px;
   }
 }
 
@@ -150,10 +134,6 @@ li:not(:last-child) {
   }
 }
 
-.d-none {
-  display: none;
-}
-
 .bg-image {
   background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
     var(--bg-image);

src/assets/style/themes.css

@@ -1,33 +0,0 @@
-/* Reference: https://github.com/catppuccin/palette/blob/main/css/catppuccin.css */
-@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
-
-/* Variables prefixed with prj to avoid collisions */
-:root {
-  /* Using catppuccin for now, make a theme switcher later */
-  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
-  --prj-bg: var(--ctp-macchiato-mantle);
-  --prj-shadow: var(--ctp-macchiato-crust);
-  --prj-text: var(--ctp-macchiato-text);
-
-  --prj-surface-1: var(--ctp-macchiato-base);
-  --prj-surface-2: var(--ctp-mocha-surface0);
-  --prj-surface-3: var(--ctp-mocha-surface1);
-  --prj-surface-text: var(--ctp-macchiato-text);
-
-  --prj-link-text: var(--ctp-macchiato-teal);
-
-  --prj-accent-bg: var(--ctp-macchiato-teal);
-  --prj-accent-text: var(--ctp-macchiato-base);
-
-  --prj-primary: var(--ctp-macchiato-teal);
-  --prj-primary-text: var(--ctp-macchiato-base);
-
-  --prj-danger: var(--ctp-macchiato-red);
-  --prj-danger-text: var(--ctp-macchiato-base);
-
-  --prj-disabled: var(--ctp-macchiato-red);
-  --prj-disabled-text: rgba(var(--ctp-macchiato-base-raw), 0.5);
-
-  --prj-input: var(--ctp-macchiato-text);
-  --prj-input-text: var(--ctp-macchiato-base);
-}

src/assets/style/themes/catppuccin/_catppuccin.scss

@@ -0,0 +1,114 @@
+$palette: (
+  'latte': (
+    'rosewater': #dc8a78,
+    'flamingo': #dd7878,
+    'pink': #ea76cb,
+    'mauve': #8839ef,
+    'red': #d20f39,
+    'maroon': #e64553,
+    'peach': #fe640b,
+    'yellow': #df8e1d,
+    'green': #40a02b,
+    'teal': #179299,
+    'sky': #04a5e5,
+    'sapphire': #209fb5,
+    'blue': #1e66f5,
+    'lavender': #7287fd,
+    'text': #4c4f69,
+    'subtext1': #5c5f77,
+    'subtext0': #6c6f85,
+    'overlay2': #7c7f93,
+    'overlay1': #8c8fa1,
+    'overlay0': #9ca0b0,
+    'surface2': #acb0be,
+    'surface1': #bcc0cc,
+    'surface0': #ccd0da,
+    'base': #eff1f5,
+    'mantle': #e6e9ef,
+    'crust': #dce0e8,
+  ),
+  'frappe': (
+    'rosewater': #f2d5cf,
+    'flamingo': #eebebe,
+    'pink': #f4b8e4,
+    'mauve': #ca9ee6,
+    'red': #e78284,
+    'maroon': #ea999c,
+    'peach': #ef9f76,
+    'yellow': #e5c890,
+    'green': #a6d189,
+    'teal': #81c8be,
+    'sky': #99d1db,
+    'sapphire': #85c1dc,
+    'blue': #8caaee,
+    'lavender': #babbf1,
+    'text': #c6d0f5,
+    'subtext1': #b5bfe2,
+    'subtext0': #a5adce,
+    'overlay2': #949cbb,
+    'overlay1': #838ba7,
+    'overlay0': #737994,
+    'surface2': #626880,
+    'surface1': #51576d,
+    'surface0': #414559,
+    'base': #303446,
+    'mantle': #292c3c,
+    'crust': #232634,
+  ),
+  'macchiato': (
+    'rosewater': #f4dbd6,
+    'flamingo': #f0c6c6,
+    'pink': #f5bde6,
+    'mauve': #c6a0f6,
+    'red': #ed8796,
+    'maroon': #ee99a0,
+    'peach': #f5a97f,
+    'yellow': #eed49f,
+    'green': #a6da95,
+    'teal': #8bd5ca,
+    'sky': #91d7e3,
+    'sapphire': #7dc4e4,
+    'blue': #8aadf4,
+    'lavender': #b7bdf8,
+    'text': #cad3f5,
+    'subtext1': #b8c0e0,
+    'subtext0': #a5adcb,
+    'overlay2': #939ab7,
+    'overlay1': #8087a2,
+    'overlay0': #6e738d,
+    'surface2': #5b6078,
+    'surface1': #494d64,
+    'surface0': #363a4f,
+    'base': #24273a,
+    'mantle': #1e2030,
+    'crust': #181926,
+  ),
+  'mocha': (
+    'rosewater': #f5e0dc,
+    'flamingo': #f2cdcd,
+    'pink': #f5c2e7,
+    'mauve': #cba6f7,
+    'red': #f38ba8,
+    'maroon': #eba0ac,
+    'peach': #fab387,
+    'yellow': #f9e2af,
+    'green': #a6e3a1,
+    'teal': #94e2d5,
+    'sky': #89dceb,
+    'sapphire': #74c7ec,
+    'blue': #89b4fa,
+    'lavender': #b4befe,
+    'text': #cdd6f4,
+    'subtext1': #bac2de,
+    'subtext0': #a6adc8,
+    'overlay2': #9399b2,
+    'overlay1': #7f849c,
+    'overlay0': #6c7086,
+    'surface2': #585b70,
+    'surface1': #45475a,
+    'surface0': #313244,
+    'base': #1e1e2e,
+    'mantle': #181825,
+    'crust': #11111b,
+  ),
+);

src/assets/style/themes/catppuccin/_frappe.scss

@@ -0,0 +1,26 @@
+$rosewater: #f2d5cf;
+$flamingo: #eebebe;
+$pink: #f4b8e4;
+$mauve: #ca9ee6;
+$red: #e78284;
+$maroon: #ea999c;
+$peach: #ef9f76;
+$yellow: #e5c890;
+$green: #a6d189;
+$teal: #81c8be;
+$sky: #99d1db;
+$sapphire: #85c1dc;
+$blue: #8caaee;
+$lavender: #babbf1;
+$text: #c6d0f5;
+$subtext1: #b5bfe2;
+$subtext0: #a5adce;
+$overlay2: #949cbb;
+$overlay1: #838ba7;
+$overlay0: #737994;
+$surface2: #626880;
+$surface1: #51576d;
+$surface0: #414559;
+$base: #303446;
+$mantle: #292c3c;
+$crust: #232634;

src/assets/style/themes/catppuccin/_latte.scss

@@ -0,0 +1,26 @@
+$rosewater: #dc8a78;
+$flamingo: #dd7878;
+$pink: #ea76cb;
+$mauve: #8839ef;
+$red: #d20f39;
+$maroon: #e64553;
+$peach: #fe640b;
+$yellow: #df8e1d;
+$green: #40a02b;
+$teal: #179299;
+$sky: #04a5e5;
+$sapphire: #209fb5;
+$blue: #1e66f5;
+$lavender: #7287fd;
+$text: #4c4f69;
+$subtext1: #5c5f77;
+$subtext0: #6c6f85;
+$overlay2: #7c7f93;
+$overlay1: #8c8fa1;
+$overlay0: #9ca0b0;
+$surface2: #acb0be;
+$surface1: #bcc0cc;
+$surface0: #ccd0da;
+$base: #eff1f5;
+$mantle: #e6e9ef;
+$crust: #dce0e8;

src/assets/style/themes/catppuccin/_macchiato.scss

@@ -0,0 +1,26 @@
+$rosewater: #f4dbd6;
+$flamingo: #f0c6c6;
+$pink: #f5bde6;
+$mauve: #c6a0f6;
+$red: #ed8796;
+$maroon: #ee99a0;
+$peach: #f5a97f;
+$yellow: #eed49f;
+$green: #a6da95;
+$teal: #8bd5ca;
+$sky: #91d7e3;
+$sapphire: #7dc4e4;
+$blue: #8aadf4;
+$lavender: #b7bdf8;
+$text: #cad3f5;
+$subtext1: #b8c0e0;
+$subtext0: #a5adcb;
+$overlay2: #939ab7;
+$overlay1: #8087a2;
+$overlay0: #6e738d;
+$surface2: #5b6078;
+$surface1: #494d64;
+$surface0: #363a4f;
+$base: #24273a;
+$mantle: #1e2030;
+$crust: #181926;

src/assets/style/themes/catppuccin/_mocha.scss

@@ -0,0 +1,26 @@
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;

src/assets/style/utils.css

@@ -1,622 +0,0 @@
-:root {
-  --prj-spacing-1: 0.25rem;
-  --prj-spacing-2: 0.5rem;
-  --prj-spacing-3: 1rem;
-  --prj-spacing-4: 2rem;
-  --prj-spacing-5: 3rem;
-
-  --prj-border-radious: 0.5rem;
-}
-
-.d-flex {
-  display: flex;
-}
-
-.flex-eq > * {
-  flex: 100%;
-}
-
-.hstack {
-  --prj-gap: var(--prj-spacing-3);
-  display: flex;
-  gap: var(--prj-gap);
-  align-items: center;
-}
-
-.hstack-reverse {
-  --prj-gap: var(--prj-spacing-3);
-  display: flex;
-  gap: var(--prj-gap);
-  align-items: center;
-  flex-direction: row-reverse;
-}
-
-.vstack {
-  --prj-gap: var(--prj-spacing-3);
-  display: flex;
-  flex-direction: column;
-}
-
-.vstack {
-  --prj-gap: var(--prj-spacing-3);
-  display: flex;
-  flex-direction: column-reverse;
-  flex-direction: column;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-@media screen and (min-width: 640px) {
-  .flex-sm-wrap {
-    flex-wrap: wrap;
-  }
-}
-@media screen and (min-width: 768px) {
-  .flex-md-wrap {
-    flex-wrap: wrap;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .flex-lg-wrap {
-    flex-wrap: wrap;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .flex-xl-wrap {
-    flex-wrap: wrap;
-  }
-}
-@media screen and (min-width: 1536px) {
-  .flex-2xl-wrap {
-    flex-wrap: wrap;
-  }
-}
-
-@media screen and (min-width: 640px) {
-  .flex-sm-nowrap {
-    flex-wrap: nowrap;
-  }
-}
-@media screen and (min-width: 768px) {
-  .flex-md-nowrap {
-    flex-wrap: nowrap;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .flex-lg-nowrap {
-    flex-wrap: nowrap;
-  }
-}
-@media screen and (min-width: 1280px) {
-  .flex-xl-nowrap {
-    flex-wrap: nowrap;
-  }
-}
-@media screen and (min-width: 1536px) {
-  .flex-2xl-nowrap {
-    flex-wrap: nowrap;
-  }
-}
-
-.flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.justify-content-center {
-  justify-content: center !important;
-}
-
-.grid {
-  --prj-gap: var(--prj-spacing-3);
-  --prj-columns: repeat(3, 1fr);
-  --prj-min-col-width: 150px;
-  display: grid;
-  grid-template-columns: var(--prj-columns);
-  gap: var(--prj-gap);
-}
-
-.grid-cols-1 {
-  --prj-columns: repeat(1, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-2 {
-  --prj-columns: repeat(2, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-3 {
-  --prj-columns: repeat(3, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-4 {
-  --prj-columns: repeat(4, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-5 {
-  --prj-columns: repeat(5, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-6 {
-  --prj-columns: repeat(6, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-7 {
-  --prj-columns: repeat(7, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-8 {
-  --prj-columns: repeat(8, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-9 {
-  --prj-columns: repeat(9, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-10 {
-  --prj-columns: repeat(10, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-11 {
-  --prj-columns: repeat(11, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.grid-cols-12 {
-  --prj-columns: repeat(12, minmax(var(--prj-min-col-width), 1fr));
-}
-
-.gap-0 {
-  --prj-gap: 0;
-}
-
-.gap-1 {
-  --prj-gap: var(--prj-spacing-1);
-}
-
-.gap-2 {
-  --prj-gap: var(--prj-spacing-2);
-}
-
-.gap-3 {
-  --prj-gap: var(--prj-spacing-3);
-}
-
-.gap-4 {
-  --prj-gap: var(--prj-spacing-4);
-}
-
-.gap-5 {
-  --prj-gap: var(--prj-spacing-5);
-}
-
-.list-unstyle {
-  list-style: none;
-}
-
-.text-justify {
-  text-align: justify;
-  text-justify: inter-word;
-}
-
-.text-start {
-  text-align: start;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-end {
-  text-align: end;
-}
-
-.align-start {
-  vertical-align: start;
-}
-
-.align-center {
-  vertical-align: middle;
-}
-
-.align-end {
-  vertical-align: end;
-}
-
-.overflow-scroll {
-  overflow: scroll;
-}
-.overflow-x-scroll {
-  overflow-x: scroll;
-}
-.overflow-y-scroll {
-  overflow-y: scroll;
-}
-
-/* Start Width */
-.w-auto {
-  width: auto;
-}
-.w-10 {
-  width: 10%;
-}
-.w-20 {
-  width: 20%;
-}
-.w-30 {
-  width: 30%;
-}
-.w-40 {
-  width: 40%;
-}
-.w-50 {
-  width: 50%;
-}
-.w-60 {
-  width: 60%;
-}
-.w-70 {
-  width: 70%;
-}
-.w-80 {
-  width: 80%;
-}
-.w-90 {
-  width: 90%;
-}
-.w-100 {
-  width: 100%;
-}
-/* End Width */
-
-/* Start Height */
-.h-auto {
-  height: auto;
-}
-.h-10 {
-  height: 10%;
-}
-.h-20 {
-  height: 20%;
-}
-.h-30 {
-  height: 30%;
-}
-.h-40 {
-  height: 40%;
-}
-.h-50 {
-  height: 50%;
-}
-.h-60 {
-  height: 60%;
-}
-.h-70 {
-  height: 70%;
-}
-.h-80 {
-  height: 80%;
-}
-.h-90 {
-  height: 90%;
-}
-.h-100 {
-  height: 100%;
-}
-/* End Width */
-
-/* Start Margins */
-.m-0 {
-  margin: 0 !important;
-}
-.m-1 {
-  margin: var(--prj-spacing-1) !important;
-}
-.m-2 {
-  margin: var(--prj-spacing-2) !important;
-}
-.m-3 {
-  margin: var(--prj-spacing-3) !important;
-}
-.m-4 {
-  margin: var(--prj-spacing-4) !important;
-}
-.m-5 {
-  margin: var(--prj-spacing-5) !important;
-}
-.m-auto {
-  margin: auto !important;
-}
-.mx-1 {
-  margin-right: var(--prj-spacing-1) 0 !important;
-}
-.mx-2 {
-  margin-right: var(--prj-spacing-2) 0 !important;
-}
-.mx-3 {
-  margin-right: var(--prj-spacing-3) 0 !important;
-}
-.mx-4 {
-  margin-right: var(--prj-spacing-4) 0 !important;
-}
-.mx-5 {
-  margin-right: var(--prj-spacing-5) 0 !important;
-}
-.mx-auto {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-.my-0 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-.my-1 {
-  margin-top: var(--prj-spacing-1) !important;
-  margin-bottom: var(--prj-spacing-1) !important;
-}
-.my-2 {
-  margin-top: var(--prj-spacing-2) !important;
-  margin-bottom: var(--prj-spacing-2) !important;
-}
-.my-3 {
-  margin-top: var(--prj-spacing-3) !important;
-  margin-bottom: var(--prj-spacing-3) !important;
-}
-.my-4 {
-  margin-top: var(--prj-spacing-4) !important;
-  margin-bottom: var(--prj-spacing-4) !important;
-}
-.my-5 {
-  margin-top: var(--prj-spacing-5) !important;
-  margin-bottom: var(--prj-spacing-5) !important;
-}
-.my-auto {
-  margin-top: auto !important;
-  margin-bottom: auto !important;
-}
-.mt-0 {
-  margin-top: 0 !important;
-}
-.mt-1 {
-  margin-top: var(--prj-spacing-1) !important;
-}
-.mt-2 {
-  margin-top: var(--prj-spacing-2) !important;
-}
-.mt-3 {
-  margin-top: var(--prj-spacing-3) !important;
-}
-.mt-4 {
-  margin-top: var(--prj-spacing-4) !important;
-}
-.mt-5 {
-  margin-top: var(--prj-spacing-5) !important;
-}
-.mt-auto {
-  margin-top: auto !important;
-}
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-.mb-1 {
-  margin-bottom: var(--prj-spacing-1) !important;
-}
-.mb-2 {
-  margin-bottom: var(--prj-spacing-2) !important;
-}
-.mb-3 {
-  margin-bottom: var(--prj-spacing-3) !important;
-}
-.mb-4 {
-  margin-bottom: var(--prj-spacing-4) !important;
-}
-.mb-5 {
-  margin-bottom: var(--prj-spacing-5) !important;
-}
-.mb-auto {
-  margin-bottom: auto !important;
-}
-.ml-1 {
-  margin-left: var(--prj-spacing-1) !important;
-}
-.ml-2 {
-  margin-left: var(--prj-spacing-2) !important;
-}
-.ml-3 {
-  margin-left: var(--prj-spacing-3) !important;
-}
-.ml-4 {
-  margin-left: var(--prj-spacing-4) !important;
-}
-.ml-5 {
-  margin-left: var(--prj-spacing-5) !important;
-}
-.ml-auto {
-  margin-left: auto !important;
-}
-.mr-1 {
-  margin-right: var(--prj-spacing-1) !important;
-}
-.mr-2 {
-  margin-right: var(--prj-spacing-2) !important;
-}
-.mr-3 {
-  margin-right: var(--prj-spacing-3) !important;
-}
-.mr-4 {
-  margin-right: var(--prj-spacing-4) !important;
-}
-.mr-5 {
-  margin-right: var(--prj-spacing-5) !important;
-}
-.mr-auto {
-  margin-right: var(--prj-spacing-5) !important;
-}
-/* End Margins */
-
-/* Start paddings */
-.p-0 {
-  padding: 0 !important;
-}
-.p-1 {
-  padding: var(--prj-spacing-1) !important;
-}
-.p-2 {
-  padding: var(--prj-spacing-2) !important;
-}
-.p-3 {
-  padding: var(--prj-spacing-3) !important;
-}
-.p-4 {
-  padding: var(--prj-spacing-4) !important;
-}
-.p-5 {
-  padding: var(--prj-spacing-5) !important;
-}
-.p-auto {
-  padding: auto !important;
-}
-.px-1 {
-  padding-left: var(--prj-spacing-1) !important;
-  padding-right: var(--prj-spacing-1) !important;
-}
-.px-2 {
-  padding-left: var(--prj-spacing-2) !important;
-  padding-right: var(--prj-spacing-2) !important;
-}
-.px-3 {
-  padding-left: var(--prj-spacing-3) !important;
-  padding-right: var(--prj-spacing-3) !important;
-}
-.px-4 {
-  padding-left: var(--prj-spacing-4) !important;
-  padding-right: var(--prj-spacing-4) !important;
-}
-.px-5 {
-  padding-left: var(--prj-spacing-5) !important;
-  padding-right: var(--prj-spacing-5) !important;
-}
-.px-auto {
-  padding-left: auto !important;
-  padding-right: auto !important;
-}
-.py-0 {
-  padding-top: var(--prj-spacing-1) !important;
-  padding-bottom: var(--prj-spacing-1) !important;
-}
-.py-1 {
-  padding-top: var(--prj-spacing-1) !important;
-  padding-bottom: var(--prj-spacing-1) !important;
-}
-.py-2 {
-  padding-top: var(--prj-spacing-2) !important;
-  padding-bottom: var(--prj-spacing-2) !important;
-}
-.py-3 {
-  padding-top: var(--prj-spacing-3) !important;
-  padding-bottom: var(--prj-spacing-3) !important;
-}
-.py-4 {
-  padding-top: var(--prj-spacing-4) !important;
-  padding-bottom: var(--prj-spacing-4) !important;
-}
-.py-5 {
-  padding-top: var(--prj-spacing-5) !important;
-  padding-bottom: var(--prj-spacing-5) !important;
-}
-.py-auto {
-  padding-top: auto !important;
-  padding-bottom: auto !important;
-}
-.pt-1 {
-  padding-top: var(--prj-spacing-1) !important;
-}
-.pt-2 {
-  padding-top: var(--prj-spacing-2) !important;
-}
-.pt-3 {
-  padding-top: var(--prj-spacing-3) !important;
-}
-.pt-4 {
-  padding-top: var(--prj-spacing-4) !important;
-}
-.pt-5 {
-  padding-top: var(--prj-spacing-5) !important;
-}
-.pt-auto {
-  padding-top: auto !important;
-}
-.pb-0 {
-  padding-bottom: 0 !important;
-}
-.pb-1 {
-  padding-bottom: var(--prj-spacing-1) !important;
-}
-.pb-2 {
-  padding-bottom: var(--prj-spacing-2) !important;
-}
-.pb-3 {
-  padding-bottom: var(--prj-spacing-3) !important;
-}
-.pb-4 {
-  padding-bottom: var(--prj-spacing-4) !important;
-}
-.pb-5 {
-  padding-bottom: var(--prj-spacing-5) !important;
-}
-.pb-auto {
-  padding-bottom: auto !important;
-}
-.pl-1 {
-  padding-left: var(--prj-spacing-1) !important;
-}
-.pl-2 {
-  padding-left: var(--prj-spacing-2) !important;
-}
-.pl-3 {
-  padding-left: var(--prj-spacing-3) !important;
-}
-.pl-4 {
-  padding-left: var(--prj-spacing-4) !important;
-}
-.pl-5 {
-  padding-left: var(--prj-spacing-5) !important;
-}
-.pl-auto {
-  padding-left: auto !important;
-}
-.pr-1 {
-  padding-right: var(--prj-spacing-1) !important;
-}
-.pr-2 {
-  padding-right: var(--prj-spacing-2) !important;
-}
-.pr-3 {
-  padding-right: var(--prj-spacing-3) !important;
-}
-.pr-4 {
-  padding-right: var(--prj-spacing-4) !important;
-}
-.pr-5 {
-  padding-right: var(--prj-spacing-5) !important;
-}
-.pr-auto {
-  padding-right: var(--prj-spacing-5) !important;
-}
-/* End paddings */
-
-.shadow-0 {
-  box-shadow: none;
-}
-
-.border-radius {
-  border-radius: var(--prj-border-radious);
-}

src/components/Card.astro

@@ -23,7 +23,7 @@ export interface Props {
     background-color: var(--prj-surface-2);
     color: var(--prj-surface-text);
     border: 1px solid var(--prj-surface-2);
-    border-radius: var(--prj-border-radious);
+    border-radius: var(--prj-border-radius);
     box-shadow: 5px 5px 5px 5px var(--prj-shadow);
 
     padding: var(--prj-spacing-2) var(--prj-spacing-3);

src/layouts/Layout.astro

@@ -4,7 +4,7 @@ export interface Props {
   title: string;
 }
 
-import '../assets/style/global.css';
+import '../assets/style/style.scss';
 import Navbar from '../components/Navbar.astro';
 import Spinner from '../components/Spinner.astro';