refactor(components): rewrite Card component

* make the component more generic
* merge `<Summary />` and `<Comment />` styles into card component
to avoid repeating the same structure
* remove most of the props to use composition

However the CSS is a bit complex because of the two variants...

Also, the component should be refactored when the CSS pseudo-class
`:has` has enough support: the provider and the `cover` and `meta`
props should be removed.

1 files changed, 0 insertions, 90 deletions

diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
deleted file mode 100644
index 14a5baf..0000000
--- a/src/components/molecules/layout/card.module.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.footer {
-  margin-top: auto;
-}
-
-.wrapper {
-  --scale-up: 1.05;
-  --scale-down: 0.95;
-
-  display: flex;
-  flex-flow: column wrap;
-  max-width: var(--card-width, 40ch);
-  padding: 0;
-  text-align: center;
-
-  .article {
-    flex: 1;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-  }
-
-  .cover {
-    place-content: center;
-    height: fun.convert-px(150);
-    object-fit: scale-down;
-    margin: auto;
-    border-bottom: fun.convert-px(1) solid var(--color-border);
-  }
-
-  .title,
-  .tagline,
-  .footer {
-    padding: 0 var(--spacing-md);
-  }
-
-  .title {
-    width: fit-content;
-    margin: var(--spacing-sm) auto;
-  }
-
-  h2.title {
-    background: none;
-    text-shadow: none;
-  }
-
-  .tagline {
-    flex: 1;
-    margin-bottom: var(--spacing-md);
-    color: var(--color-fg);
-    font-weight: 400;
-  }
-
-  .list {
-    margin-bottom: var(--spacing-md);
-  }
-
-  .meta {
-    &__item {
-      flex-flow: row wrap;
-      place-content: center;
-      gap: var(--spacing-2xs);
-      margin: auto;
-    }
-
-    &__label {
-      flex: 0 0 100%;
-    }
-
-    &__value {
-      padding: fun.convert-px(2) var(--spacing-xs);
-      border: fun.convert-px(1) solid var(--color-primary-darker);
-      color: var(--color-fg);
-      font-weight: 400;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-
-  &:not(:disabled):focus {
-    text-decoration: none;
-
-    .title {
-      text-decoration: underline solid var(--color-primary) 0.3ex;
-    }
-  }
-}