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

src/assets/style/style.scss

@@ -0,0 +1,145 @@
+@use './variables.scss' as *;
+@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);
+  color: var(--prj-text);
+
+  /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
+  font-size: calc(15px + 0.390625vw);
+}
+
+body {
+  max-width: 95vw; /* leave some space in the end by default */
+  margin: auto;
+  padding: 15px 0;
+}
+
+section:not(.clean) {
+  /* outline: 1px solid var(--prj-accent-bg); */
+  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-radius);
+}
+
+section:not(:first-child) {
+  margin-top: var(--prj-spacing-4);
+}
+
+h1,
+.fs-1 {
+  font-size: 3rem !important;
+  margin-bottom: var(--prj-spacing-4);
+}
+h2,
+.fs-2 {
+  font-size: 2.5rem !important;
+  margin-bottom: var(--prj-spacing-3);
+}
+h3,
+.fs-3 {
+  font-size: 2rem !important;
+  margin-bottom: var(--prj-spacing-2);
+}
+h4,
+.fs-4 {
+  font-size: 1.5rem !important;
+  margin-bottom: var(--prj-spacing-2);
+}
+h5,
+.fs-5 {
+  font-size: 1.25rem !important;
+  margin-bottom: var(--prj-spacing-1);
+}
+h6,
+.fs-6 {
+  font-size: 1rem !important;
+  margin-bottom: var(--prj-spacing-1);
+}
+
+p {
+  margin-bottom: var(--prj-spacing-2);
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+/* 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: $size) {
+    body {
+      max-width: $size;
+    }
+  }
+}
+
+a {
+  color: var(--prj-link-text);
+}
+
+ul {
+  /* Make the marker position is inside the container */
+  list-style-position: inside;
+  margin: 0;
+}
+
+.list-unstyle {
+  list-style: none;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+img.respect-width,
+video.respect-width {
+  max-width: 100%;
+  height: auto;
+}
+
+img.respect-height,
+video.respect-height {
+  max-height: 100%;
+  width: auto;
+}
+
+li:not(:last-child) {
+  margin-bottom: var(--prj-spacing-1);
+}
+
+.btn {
+  padding: var(--prj-spacing-1);
+}
+
+.btn-primary {
+  background-color: var(--prj--primary-bg);
+  color: var(--prj--primary-text);
+}
+
+/* Lightgallery iframe fix */
+.lg-has-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  .lg-object {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.bg-image {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+    var(--bg-image);
+  background-position: center;
+  background-size: cover;
+  color: var(--prj-bg);
+
+  padding: var(--prj-spacing-3);
+}