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, 83 deletions

diff --git a/src/components/PostHeader/PostHeader.module.scss b/src/components/PostHeader/PostHeader.module.scss
deleted file mode 100644
index f813060..0000000
--- a/src/components/PostHeader/PostHeader.module.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  composes: grid from "@styles/layout/_grid.scss";
-  max-width: 100%;
-  position: relative;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      margin-bottom: var(--spacing-md);
-    }
-
-    @include mix.dimensions("lg") {
-      --grid-gap: var(--spacing-lg);
-    }
-  }
-
-  &::before,
-  &::after {
-    content: "";
-    width: 100%;
-    height: 100%;
-    background: var(--color-bg-secondary);
-    border-top: fun.convert-px(3) solid var(--color-border-light);
-    border-bottom: fun.convert-px(3) solid var(--color-border-light);
-  }
-
-  &::before {
-    grid-column: 1;
-    justify-self: start;
-    border-right: fun.convert-px(3) solid var(--color-border-light);
-  }
-
-  &::after {
-    grid-column: 3;
-    justify-self: end;
-    border-left: fun.convert-px(3) solid var(--color-border-light);
-  }
-}
-
-.body {
-  grid-column: 2;
-  background: var(--color-bg);
-}
-
-.title {
-  flex: 0 0 100%;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  margin: 0;
-  position: relative;
-  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
-
-  &::before,
-  &::after {
-    content: "";
-    width: 100%;
-    height: fun.convert-px(4);
-    background: radial-gradient(
-      ellipse at center,
-      var(--color-primary-light),
-      var(--color-primary-dark)
-    );
-  }
-}
-
-.cover {
-  display: block;
-  width: fun.convert-px(50);
-  height: fun.convert-px(50);
-  position: relative;
-  margin-right: var(--spacing-sm);
-}
-
-.intro {
-  margin: var(--spacing-sm) 0 0;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}