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, 105 insertions, 0 deletions

diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss
new file mode 100644
index 0000000..6121fa1
--- /dev/null
+++ b/src/components/molecules/layout/branding.module.scss
@@ -0,0 +1,105 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+@mixin typing-animation {
+  --typing-animation: none;
+
+  width: fit-content;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "|";
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: var(--color-bg);
+    color: var(--color-primary-darker);
+    font-weight: 400;
+    text-align: left;
+    visibility: hidden;
+    transform: translateX(100%);
+    transform-origin: right;
+    animation: var(--typing-animation);
+
+    :global {
+      animation: var(--typing-animation);
+    }
+  }
+}
+
+.wrapper {
+  --logo-size: #{clamp(fun.convert-px(90), 12vw, fun.convert-px(100))};
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  width: 100%;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("2xs") {
+      grid-template-columns:
+        var(--logo-size, fun.convert-px(100))
+        minmax(0, 1fr);
+      grid-template-rows: 1fr min-content;
+      align-items: center;
+      justify-items: left;
+      column-gap: var(--spacing-sm);
+      width: unset;
+    }
+  }
+
+  .logo {
+    grid-row: span 2;
+    margin-bottom: var(--spacing-sm);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("2xs") {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .title {
+    font-size: clamp(var(--font-size-xl), 8vw, var(--font-size-2xl));
+    text-align: center;
+
+    @include typing-animation;
+  }
+
+  .baseline {
+    color: var(--color-fg-light);
+    font-size: var(--font-size-lg);
+    text-align: center;
+
+    @include typing-animation;
+  }
+
+  .link {
+    background: linear-gradient(
+        to top,
+        var(--color-primary-light) fun.convert-px(5),
+        transparent fun.convert-px(5)
+      )
+      left / 0 100% no-repeat;
+    text-decoration: none;
+    transition: all 0.6s ease-out 0s;
+
+    &:hover,
+    &:focus {
+      background-size: 100% 100%;
+    }
+
+    &:focus {
+      color: var(--color-primary-light);
+    }
+
+    &:active {
+      background-size: 0 100%;
+      color: var(--color-primary-dark);
+    }
+  }
+}