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

diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
new file mode 100644
index 0000000..b09bb12
--- /dev/null
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -0,0 +1,62 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.section {
+  &:not(:last-of-type) {
+    margin-bottom: var(--spacing-md);
+  }
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      display: grid;
+      grid-template-columns: fun.convert-px(150) minmax(0, 1fr);
+      align-items: first baseline;
+      margin-left: fun.convert-px(-150);
+    }
+  }
+}
+
+.list {
+  @extend %reset-ordered-list;
+
+  .item {
+    border-bottom: fun.convert-px(1) solid var(--color-border);
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-md);
+    }
+  }
+}
+
+.year {
+  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);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 1;
+      justify-self: end;
+      padding-right: var(--spacing-lg);
+      position: sticky;
+      top: var(--spacing-xs);
+    }
+
+    @include mix.dimensions("lg") {
+      padding-right: var(--spacing-xl);
+    }
+  }
+}
+
+.btn {
+  display: flex;
+  margin: auto;
+}