feat: implement barebone zola templates

_src/assets/style/_animations.scss

@@ -0,0 +1,60 @@
+@use './mixins';
+
+@include mixins.responsive using ($screen-size) {
+  .anim-#{$screen-size}-none {
+    animation: none !important;
+  }
+
+  .anim-group-#{$screen-size}-none > * {
+    animation: none !important;
+  }
+}
+
+@keyframes hover {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, var(--anim-translation-value));
+  }
+}
+
+$anim-base-offset: -1s;
+
+.anim-idle-hover {
+  --anim-translation-value: var(--prj-spacing-1);
+  --anim-offset: 0s;
+  animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
+}
+
+.anim-idle-hover-group {
+  & > * {
+    @extend .anim-idle-hover;
+  }
+
+  @for $index from 1 through 20 {
+    $anim-offset: $anim-base-offset * $index;
+    & > :nth-child(#{$index}n) {
+      --anim-offset: #{$anim-offset};
+    }
+  }
+}
+
+.anim-hover-zoom {
+  transition: scale 0.2s;
+  &:hover {
+    scale: 1.05;
+  }
+}
+
+.anim-hover-translate {
+  --anim-translation-value: -5px;
+  --anim-shadow-color: var(--prj-accent-bg);
+  transition: translate 0.2s;
+
+  &:hover {
+    translate: var(--anim-translation-value) var(--anim-translation-value);
+    box-shadow: calc(var(--anim-translation-value) * -1)
+      calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
+  }
+}

_src/assets/style/_mixins.scss

@@ -0,0 +1,17 @@
+@use './variables' as *;
+
+@mixin responsive {
+  @each $size-name, $size in $screen-sizes {
+    @media screen and (min-width: $size) {
+      @content ($size-name);
+    }
+  }
+}
+
+@mixin responsive-steps($from, $to) {
+  @include responsive using ($size-name) {
+    @for $index from $from through $to {
+      @content ($size-name, $index);
+    }
+  }
+}

_src/assets/style/_utils.scss

@@ -0,0 +1,329 @@
+@use './variables' as *;
+@use './mixins';
+
+.position-fixed {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.position-sticky {
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.d-none {
+  display: none;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.visually-hidden {
+  height: 0;
+  width: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+@include mixins.responsive using($screen-size) {
+  .d-#{$screen-size}-none {
+    display: none;
+  }
+  .d-#{$screen-size}-block {
+    display: block;
+  }
+
+  .d-#{$screen-size}-flex {
+    display: flex;
+  }
+}
+
+.flex-eq > * {
+  flex: 100%;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+.flex-row {
+  flex-direction: row !important;
+}
+
+@include mixins.responsive using($screen-size) {
+  .flex-#{$screen-size}-column {
+    flex-direction: column !important;
+  }
+  .flex-#{$screen-size}-row {
+    flex-direction: row !important;
+  }
+}
+
+.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;
+  gap: var(--prj-gap);
+  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;
+}
+
+@include mixins.responsive using($size-name) {
+  .flex-#{$size-name}-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-#{$size-name}-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.align-items-center {
+  align-items: 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);
+}
+
+@mixin grid-cols($amount) {
+  --prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr));
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    @include grid-cols($i);
+  }
+}
+
+@include mixins.responsive-steps(1, 12) using ($size-name, $index) {
+  .grid-#{$size-name}-cols-#{$index} {
+    @include grid-cols($index);
+  }
+}
+
+.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(calc($i / 100));
+  }
+  .h-#{$i} {
+    height: percentage(calc($i / 100));
+  }
+}
+
+@include mixins.responsive-steps(0, 100) using ($size-name, $index) {
+  .w-#{$size-name}-#{$index} {
+    width: percentage(calc($index / 100));
+  }
+
+  .h-#{$size-name}-#{$index} {
+    height: percentage(calc($index / 100));
+  }
+}
+
+@mixin spacing-utils($name, $value, $screen-size: false) {
+  @if $screen-size {
+    $name: '#{$screen-size}-#{$name}';
+  }
+
+  .m-#{$name} {
+    margin: $value !important;
+  }
+  .mx-#{$name} {
+    margin-left: $value !important;
+    margin-right: $value !important;
+  }
+  .my-#{$name} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+  .mt-#{$name} {
+    margin-top: $value !important;
+  }
+  .mb-#{$name} {
+    margin-bottom: $value !important;
+  }
+  .ml-#{$name} {
+    margin-left: $value !important;
+  }
+  .mr-#{$name} {
+    margin-right: $value !important;
+  }
+  .p-#{$name} {
+    padding: $value !important;
+  }
+  .px-#{$name} {
+    padding-left: $value !important;
+    padding-right: $value !important;
+  }
+  .py-#{$name} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+  .pt-#{$name} {
+    padding-top: $value !important;
+  }
+  .pb-#{$name} {
+    padding-bottom: $value !important;
+  }
+  .pl-#{$name} {
+    padding-left: $value !important;
+  }
+  .pr-#{$name} {
+    padding-right: $value !important;
+  }
+
+  .gap-#{$name} {
+    --prj-gap: #{$value};
+  }
+}
+
+@include spacing-utils(auto, auto);
+@include mixins.responsive using($screen-size) {
+  @include spacing-utils(auto, auto);
+}
+
+@each $index, $variable, $value in $spacings {
+  @include spacing-utils($index, var(#{$variable}));
+  @include mixins.responsive using($screen-size) {
+    @include spacing-utils($index, var(#{$variable}), $screen-size);
+  }
+}
+
+.shadow-0 {
+  box-shadow: none;
+}
+
+.shadow-1 {
+  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
+}
+
+.border-radius {
+  border-radius: var(--prj-border-radius);
+}
+
+.text-none {
+  text-transform: none;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}

_src/assets/style/_variables.scss

@@ -0,0 +1,71 @@
+@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-bg-transparent: #{color.scale(getColor('mantle'), $alpha: -10%)};
+  --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-secondary: #{getColor('mauve')};
+  --prj-secondary-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

@@ -0,0 +1,176 @@
+@use './variables.scss' as *;
+@use './utils.scss';
+@use './animations.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 > main {
+  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-of-type) {
+  margin-top: var(--prj-spacing-4);
+}
+
+h1,
+.fs-1 {
+  font-size: 3rem !important;
+  margin-top: 0;
+  margin-bottom: var(--prj-spacing-3);
+}
+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;
+}
+
+.container {
+  max-width: 100%;
+}
+
+/* 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 > main {
+      max-width: $size;
+    }
+
+    .container {
+      margin: auto;
+      max-width: $size;
+    }
+  }
+}
+
+a {
+  color: var(--prj-link-text);
+}
+
+ul {
+  /* Make the marker position is inside the container */
+  list-style-position: inside;
+  margin: 0;
+
+  ul {
+    margin-left: var(--prj-spacing-3);
+  }
+}
+
+.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.6), rgba(0, 0, 0, 0.6)),
+    var(--bg-image);
+  background-position: center;
+  background-size: cover;
+  color: var(--prj-text);
+
+  padding: var(--prj-spacing-3);
+
+  .text {
+    padding: var(--prj-spacing-2);
+    background-color: var(--prj-bg-transparent);
+
+    border-radius: var(--prj-border-radius);
+  }
+}
+
+a {
+  transition: text-shadow 0.2s;
+  --anim-shadow-color: var(--prj-accent-bg);
+
+  &:not(.clean):hover {
+    text-shadow: 1px 1px 8px var(--anim-shadow-color);
+  }
+}

_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;