refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 0 insertions, 242 deletions

diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
deleted file mode 100644
index f3e6c10..0000000
--- a/src/components/MainNav/MainNav.module.scss
+++ /dev/null
@@ -1,242 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
-  --icon-size: #{fun.convert-px(30)};
-
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  height: var(--btn-size);
-  width: calc(var(--btn-size) * 1.2);
-  background: var(--color-bg);
-  position: relative;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      background: inherit;
-    }
-
-    @include mix.dimensions("md") {
-      width: unset;
-      height: unset;
-    }
-  }
-}
-
-.label {
-  --draw-border-thickness: #{fun.convert-px(5)};
-  --draw-border-color1: var(--color-primary-light);
-  --draw-border-color2: var(--color-primary-lighter);
-
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  width: 100%;
-  padding: var(--spacing-2xs);
-
-  &:hover {
-    @extend %draw-borders;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      display: none;
-    }
-  }
-}
-
-.checkbox {
-  position: absolute;
-
-  // centered checkbox = btn-size - approximated checkbox size / 2
-  top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
-  left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2);
-  opacity: 0;
-  cursor: pointer;
-
-  &:hover {
-    ~ .label {
-      @extend %draw-borders;
-    }
-  }
-
-  &:focus {
-    ~ .label {
-      @extend %draw-borders;
-    }
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      display: none;
-    }
-  }
-}
-
-.nav {
-  display: flex;
-  flex-flow: column wrap;
-  place-content: center;
-  padding-bottom: var(--toolbar-size);
-  position: fixed;
-  bottom: 0;
-  z-index: -1;
-  background: var(--color-bg-opacity);
-  box-shadow: 0 0 fun.convert-px(3) 0 var(--color-shadow-dark);
-  text-align: center;
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  transition: all 0.8s ease-in-out 0s;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      padding-bottom: 0;
-      position: absolute;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: calc(var(--btn-size) + var(--spacing-sm));
-      z-index: unset;
-      border-bottom-width: fun.convert-px(5);
-      transform-origin: 50% -100%;
-    }
-
-    @include mix.dimensions("md") {
-      background: transparent;
-      border: none;
-      box-shadow: none;
-      position: relative;
-      top: 0;
-    }
-  }
-}
-
-.list {
-  @extend %reset-list;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      display: grid;
-      grid-template-columns: min-content min-content;
-      max-height: calc(100vh - var(--toolbar-size));
-    }
-
-    @include mix.dimensions("md") {
-      display: flex;
-      flex-flow: row wrap;
-      align-items: center;
-      gap: var(--spacing-2xs);
-    }
-  }
-}
-
-.link {
-  --draw-border-thickness: #{fun.convert-px(4)};
-  --draw-border-color1: var(--color-primary-light);
-  --draw-border-color2: var(--color-primary-lighter);
-
-  display: block;
-  min-width: fun.convert-px(85);
-  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
-  background: var(--color-bg);
-  background-repeat: no-repeat;
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 600;
-  text-decoration: none;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      margin: 0;
-      background-color: inherit;
-      border-radius: 8%;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    @extend %draw-borders;
-  }
-
-  &:focus {
-    color: var(--color-primary-light);
-  }
-
-  &:active {
-    --draw-border-color1: var(--color-primary-dark);
-    --draw-border-color2: var(--color-primary-light);
-
-    @extend %draw-borders;
-  }
-
-  &.current {
-    background-image: linear-gradient(to right, transparent, transparent),
-      linear-gradient(to bottom, transparent, transparent),
-      linear-gradient(
-        to left,
-        var(--color-primary-lighter),
-        var(--color-primary-light)
-      ),
-      linear-gradient(to top, transparent, transparent);
-    background-position: top left, top right, bottom center, bottom left;
-    background-size: 0% var(--draw-border-thickness),
-      var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness),
-      var(--draw-border-thickness) 0%;
-
-    &:hover,
-    &:focus {
-      --draw-border-color1: var(--color-primary-light);
-      --draw-border-color2: var(--color-primary-lighter);
-
-      @extend %draw-borders;
-    }
-
-    &:active {
-      --draw-border-color1: var(--color-primary-dark);
-      --draw-border-color2: var(--color-primary-light);
-
-      @extend %draw-borders;
-    }
-  }
-}
-
-.checkbox:not(:checked) {
-  ~ .nav {
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(100vw);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        transform: perspective(20rem) translate3d(0, 100%, -20rem);
-      }
-
-      @include mix.dimensions("md") {
-        opacity: 1;
-        visibility: visible;
-        transform: none;
-      }
-    }
-  }
-}
-
-.checkbox:checked {
-  ~ .label:hover {
-    span {
-      background: none;
-      box-shadow: none;
-    }
-  }
-
-  &:hover {
-    ~ .label {
-      span {
-        background: none;
-        box-shadow: none;
-      }
-    }
-  }
-}