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

diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
deleted file mode 100644
index c30ab75..0000000
--- a/src/components/PostPreview/PostPreview.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  --icon-size: #{fun.convert-px(20)};
-
-  padding: var(--spacing-2xs) 0 var(--spacing-lg);
-  transition: all 0.3s ease-in-out 0s, border 0s;
-
-  &:hover {
-    --icon-size: #{fun.convert-px(25)};
-
-    a {
-      > svg {
-        :global {
-          animation: pulse 1.5s ease-in-out 0.5s infinite;
-        }
-      }
-
-      &:hover {
-        > svg {
-          animation: none;
-        }
-      }
-    }
-  }
-
-  &:active {
-    --icon-size: 0;
-  }
-}
-
-.cover {
-  width: auto;
-  height: fun.convert-px(100);
-  margin: 0 auto var(--spacing-sm);
-  position: relative;
-  border: fun.convert-px(1) solid var(--color-border);
-}
-
-h2.title {
-  background: none;
-  text-shadow: none;
-}
-
-@include mix.media("screen") {
-  @include mix.dimensions("xs") {
-    .wrapper {
-      margin: 0;
-      padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
-      border: fun.convert-px(1) solid var(--color-primary-dark);
-      border-radius: fun.convert-px(3);
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
-          var(--color-shadow),
-        fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1)
-          var(--color-shadow-light),
-        fun.convert-px(5) fun.convert-px(5) fun.convert-px(7) fun.convert-px(-1)
-          var(--color-shadow-light);
-    }
-
-    .read-more {
-      font-size: var(--font-size-sm);
-    }
-  }
-
-  @include mix.dimensions("sm") {
-    .wrapper {
-      display: grid;
-      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
-      grid-template-rows: repeat(3, max-content);
-      column-gap: var(--spacing-md);
-    }
-
-    .cover {
-      grid-column: 2;
-      grid-row: 1;
-      margin: 0 0 var(--spacing-sm);
-    }
-
-    .header {
-      grid-column: 1;
-      grid-row: 1;
-      align-self: center;
-    }
-
-    .meta {
-      grid-column: 2;
-      grid-row: 2 / 4;
-    }
-
-    .body {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .footer {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .read-more {
-      margin: 0;
-    }
-  }
-}