feat: implement barebone zola templates

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