Merge pull request #25 from minimaldesign/components-cleanup

Replace ArticleCard/PostList with Card/CardList

Author: minimaldesign

dist/css/component.card.css

@@ -29,6 +29,9 @@ xxl: 1920px
   --loading-animation: 2s infinite ease-in-out;
 
   position: relative;
+  /* flex column so .card_byline can pin itself to the bottom */
+  display: flex;
+  flex-direction: column;
   padding: var(--card-spacing);
   color: var(--card-color);
   border-radius: var(--card-border-radius);
@@ -55,7 +58,12 @@ xxl: 1920px
   box-shadow: var(--card-shadow-hover);
 }
 
-.card_link {
+/* The card's single link, stretched over the whole card. Put .card_link on a
+   real anchor (usually the title link) so its text names the link. Positioned
+   parts later in the DOM (.card_actions) paint above the ::after and stay
+   clickable; parts before it need a z-index bump (.card_tags). */
+.card_link::after {
+  content: "";
   position: absolute;
   inset: 0;
 }
@@ -71,12 +79,23 @@ xxl: 1920px
   .card_header:has( + .card_media) {
     margin-bottom: var(--card-spacing);
   }
-  .card_header_text h2 {
-    font-size: var(--text-lg);
-    font-weight: var(--semi-bold);
-    margin-bottom: 0;
+
+.card_title {
+  margin-bottom: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--semi-bold);
+}
+
+  .card_title a {
+    color: var(--card-color);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    transition: color var(--transition);
   }
 
+    :is(.card_title a):hover {
+      color: var(--link-color);
+    }
   .card_header_text p {
     font-size: var(--text-lg);
     color: var(--card-secondary-text-color);
@@ -93,12 +112,26 @@ xxl: 1920px
 /* Badge visuals come from the .badge atom (atom.badge.css); the Card
    component renders class="badge card_badge" on each badge. */
 
+.card_tags {
+  /* keep the tags clickable above the stretched .card_link */
+  position: relative;
+  z-index: var(--z-1);
+  margin-bottom: var(--sm2);
+}
+
 .card_media {
   margin-bottom: var(--card-spacing);
   overflow: hidden;
   border-radius: var(--card-border-radius);
 }
 
+.card_media-flush {
+  /* edge-to-edge image on top of the card */
+  margin: calc(var(--card-spacing) * -1);
+  margin-bottom: var(--card-spacing);
+  border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
+}
+
 .card_image {
   width: 100%;
   object-fit: cover;
@@ -109,10 +142,35 @@ xxl: 1920px
     margin-bottom: 0;
   }
 
+  /* guaranteed gap before the byline even when nothing pins it down */
+  .card_content:has( + .card_byline) {
+    margin-bottom: var(--sm1);
+  }
+
+.card_byline {
+  /* margin-top: auto pins bylines to the bottom, so a row of cards lines up */
+  display: flex;
+  align-items: center;
+  gap: var(--xs2);
+  margin-top: auto;
+  font-size: var(--text-sm);
+}
+
+  .card_byline time {
+    color: var(--card-secondary-text-color);
+  }
+
+.card_author {
+  display: block;
+  font-weight: var(--semi-bold);
+}
+
 .card_actions {
   display: flex;
   justify-content: flex-end;
   gap: var(--xs3);
+  /* positioned and after .card_link in the DOM, so actions paint above the
+     stretched link and stay clickable */
   position: relative;
   margin-top: var(--card-spacing);
 }

dist/css/component.cardList.css

@@ -0,0 +1,41 @@
+/*! mCSS v0.9.0 | MIT | https://mcss.dev */
+/*
+SETTINGS MEDIA QUERIES
+
+https://github.com/argyleink/open-props/blob/main/src/props.media.css
+https://open-props.style/#media-queries
+
+Can't use var() inside media queries 🤦‍♂️
+https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
+so breakpoints are not in settings.tokens.css
+
+xxs: 240px
+xs: 360px
+sm: 480px
+md: 768px
+lg: 1024px
+xl: 1440px
+xxl: 1920px
+*/
+
+/* https://github.com/postcss/postcss-mixins */
+
+/* Example */
+
+/* truncate single line of text and adds … */
+
+@layer components {
+/* CARD LIST */
+
+.cardList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+  .cardList  > li {
+    /* grid items stretch, so cards in a row share the same height */
+    display: grid;
+  }
+
+}

dist/css/mcss.css

@@ -4,11 +4,11 @@
 @import url(./atom.button.css) layer(atoms);
 @import url(./atom.toggle.css) layer(atoms);
 @import url(./base.reset.css) layer(base);
-@import url(./component.articleCard.css) layer(components);
 @import url(./component.avatar.css) layer(components);
 @import url(./component.banner.css) layer(components);
 @import url(./component.breadcrumbs.css) layer(components);
 @import url(./component.card.css) layer(components);
+@import url(./component.cardList.css) layer(components);
 @import url(./component.faq.css) layer(components);
 @import url(./component.featureGrid.css) layer(components);
 @import url(./component.featureItem.css) layer(components);
@@ -19,7 +19,6 @@
 @import url(./component.hero.css) layer(components);
 @import url(./component.notice.css) layer(components);
 @import url(./component.pagination.css) layer(components);
-@import url(./component.postList.css) layer(components);
 @import url(./component.prevNext.css) layer(components);
 @import url(./component.pricing.css) layer(components);
 @import url(./component.readProgressBar.css) layer(components);

dist/css/settings.theme.default.css

@@ -401,12 +401,6 @@ xxl: 1920px
 
 /* COMPONENTS */
 
-/* ArticleCard */
-
-:root {
-  --articleCard-image-aspect-ratio: var(--ar-golden);
-}
-
 /* Avatar */
 
 :root {