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

diff --git a/src/components/organisms/layout/header.module.scss b/src/components/organisms/layout/header.module.scss
new file mode 100644
index 0000000..a98cf45
--- /dev/null
+++ b/src/components/organisms/layout/header.module.scss
@@ -0,0 +1,50 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch)
+    minmax(0, 1fr);
+  align-items: center;
+  padding: var(--spacing-md) 0 var(--spacing-lg);
+
+  .toolbar {
+    justify-content: space-around;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    background: var(--color-bg);
+    border-top: fun.convert-px(4) solid;
+    border-image: radial-gradient(
+        ellipse at top,
+        var(--color-primary-lighter) 20%,
+        var(--color-primary) 100%
+      )
+      1;
+    box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
+      var(--color-shadow-dark);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("sm") {
+        justify-content: flex-end;
+        width: auto;
+        position: relative;
+        left: unset;
+        background: inherit;
+        border: none;
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.body {
+  grid-column: 2;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}