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

diff --git a/src/components/atoms/headings/heading.module.scss b/src/components/atoms/headings/heading.module.scss
new file mode 100644
index 0000000..a420bc1
--- /dev/null
+++ b/src/components/atoms/headings/heading.module.scss
@@ -0,0 +1,69 @@
+@use "@styles/abstracts/functions" as fun;
+
+.heading {
+  color: var(--color-primary-dark);
+  font-family: var(--font-family-secondary);
+  letter-spacing: 0.01ex;
+
+  &--regular {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  &--left {
+    text-align: left;
+  }
+
+  &--center {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--margin {
+    margin-top: 0;
+    margin-bottom: var(--spacing-sm);
+
+    & + & {
+      margin-top: var(--spacing-md);
+    }
+  }
+
+  &--1 {
+    font-size: var(--font-size-3xl);
+    font-weight: 500;
+  }
+
+  &--2 {
+    padding-bottom: fun.convert-px(3);
+    background: linear-gradient(
+        to top,
+        var(--color-primary-dark) 0.3rem,
+        transparent 0.3rem
+      )
+      0 0 / 3rem 100% no-repeat;
+    font-size: var(--font-size-2xl);
+    font-weight: 500;
+    text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
+  }
+
+  &--3 {
+    font-size: var(--font-size-xl);
+    font-weight: 500;
+  }
+
+  &--4 {
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+  }
+
+  &--5 {
+    font-size: var(--font-size-md);
+    font-weight: 600;
+  }
+
+  &--6 {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+  }
+}