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

diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
new file mode 100644
index 0000000..1080732
--- /dev/null
+++ b/src/components/templates/layout/layout.module.scss
@@ -0,0 +1,53 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.header {
+  border-bottom: fun.convert-px(3) solid var(--color-border-light);
+}
+
+.main {
+  flex: 1;
+}
+
+.article {
+  &--grid {
+    @extend %grid;
+
+    grid-auto-flow: column dense;
+    align-items: baseline;
+  }
+
+  &--padding {
+    padding-bottom: var(--spacing-lg);
+  }
+}
+
+.footer {
+  border-top: fun.convert-px(3) solid var(--color-border-light);
+}
+
+.back-to-top {
+  &--hidden {
+    opacity: 0;
+    transform: translateY(calc(var(--button-size) + var(--spacing-md)));
+    visibility: hidden;
+  }
+
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+}
+
+.noscript-spacing {
+  width: 100%;
+  height: fun.convert-px(75);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("xs") {
+      height: fun.convert-px(50);
+    }
+  }
+}