Blog cards update (#1036)

* Update article cards to use card structure
Shopify · Dec 17, 2021 · 6f38ddd · 6f38ddd
1 parent d201f14
commit 6f38ddd
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 235 deletions.
diff --git a/assets/component-article-card.css b/assets/component-article-card.css
@@ -23,52 +23,10 @@
   padding: 0;
 }
 
-.article-card {
-  background-color: rgba(var(--color-foreground), 0.04);
-  align-self: flex-start;
-  flex: 0 1 100%;
-  display: flex;
-  align-items: flex-start;
-  height: 100%;
-}
-
 .grid--peek .article-card {
   box-sizing: border-box;
 }
 
-.article-card__info {
-  padding: 3rem;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.article-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  text-decoration: none;
-  color: inherit;
-}
-
-.article-content:hover .article-card__title {
-  text-decoration: underline;
-  text-underline-offset: 0.3rem;
-}
-
-.article-card__image {
-  overflow: hidden;
-}
-
-.article-content img {
-  transition: transform var(--duration-long) ease;
-}
-
-.article-content:hover img {
-  transform: scale(1.07);
-}
-
 .article-card__image-wrapper > a {
   display: block;
 }
@@ -78,6 +36,18 @@
   word-break: break-word;
 }
 
+.article-card__title a:after {
+  bottom: 0;
+  content: "";
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
 .article-card__link.link {
   padding: 0;
 }
@@ -86,30 +56,18 @@
   text-underline-offset: 0.3rem;
 }
 
-.article-content:hover .article-card__link {
-  text-decoration-thickness: 0.2rem;
-}
-
-.article-card__header {
-  line-height: calc(0.8 / var(--font-body-scale));
-  margin-bottom: 1.2rem;
-}
-
-.article-card__header h2 {
-  margin: 0 0 0.6rem;
-}
-
-.article-card__header h2:only-child {
-  margin: 0;
+.article-card .card__heading {
+  margin-bottom: 0.6rem;
 }
 
-.article-card__header h2:not(:first-child) {
-  margin-top: 1rem;
+.blog-articles .article-card .card__information,
+.blog__posts .article-card .card__information {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
-.article-card__header h2 + span {
-  display: inline-block;
-  margin-top: 0.4rem;
+.article-card__info {
+  padding-top: 0.4rem;
 }
 
 .article-card__footer {
@@ -127,6 +85,7 @@
 
 .article-card__excerpt {
   width: 100%;
+  margin-top: 1.2rem;
 }
 
 .article-card__link:not(:only-child) {
@@ -139,42 +98,42 @@
   }
 }
 
-.article-card__image--small {
+.article-card__image--small .ratio::before {
   padding-bottom: 11rem;
 }
 
-.article-card__image--medium {
+.article-card__image--medium .ratio::before {
   padding-bottom: 22rem;
 }
 
-.article-card__image--large {
+.article-card__image--large .ratio::before {
   padding-bottom: 33rem;
 }
 
 @media screen and (min-width: 750px) {
-  .article-card__image--small {
+  .article-card__image--small .ratio::before {
     padding-bottom: 14.3rem;
   }
 
-  .article-card__image--medium {
+  .article-card__image--medium .ratio::before {
     padding-bottom: 21.9rem;
   }
 
-  .article-card__image--large {
+  .article-card__image--large .ratio::before {
     padding-bottom: 27.5rem;
   }
 }
 
 @media screen and (min-width: 990px) {
-  .article-card__image--small {
+  .article-card__image--small .ratio::before {
     padding-bottom: 17.7rem;
   }
 
-  .article-card__image--medium {
+  .article-card__image--medium .ratio::before {
     padding-bottom: 30.7rem;
   }
 
-  .article-card__image--large {
+  .article-card__image--large .ratio::before {
     padding-bottom: 40.7rem;
   }
 }
diff --git a/assets/component-card.css b/assets/component-card.css
@@ -10,6 +10,10 @@
   text-decoration: none;
 }
 
+.card--card {
+  height: 100%;
+}
+
 .card--card,
 .card--standard .card__inner { 
   border-radius: var(--card-corner-radius);
@@ -193,7 +197,7 @@
 .card--standard.card--media .card__inner .card__information,
 .card--standard.card--text > .card__content .card__heading,
 .card--standard > .card__content .card__badge,
-.card--standard.card--text > .card__content .card-article-info,
+.card--standard.card--text.article-card > .card__content .card__information,
 .card--standard > .card__content .card__caption {
   display: none;
 }
@@ -213,23 +217,6 @@
   display: none;
 }
 
-.card--height-auto .card__inner:before,
-.card--height-auto.card--standard:before,
-.card--height-auto.card--text:before { 
-  display: none;
-}
-
-.card--height-auto {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.card--height-auto.card--text.card--card .card__content,
-.card--height-auto .card__inner { 
-  flex-grow: 1;
-}
-
 .card .icon-wrap {
   margin-left: 0.8rem;
   white-space: nowrap;

diff --git a/assets/section-featured-blog.css b/assets/section-featured-blog.css
@@ -68,11 +68,14 @@
   }
 }
 
-.background-secondary .article-card,
 .background-secondary .blog-placeholder__content {
   background-color: rgb(var(--color-background));
 }
 
+.blog__posts .card-wrapper {
+  width: 100%;
+}
+
 .blog__button {
   margin-top: 3rem;
 }

diff --git a/assets/section-main-blog.css b/assets/section-main-blog.css
@@ -5,6 +5,10 @@
   row-gap: var(--grid-mobile-vertical-spacing);
 }
 
+.blog-articles .card-wrapper {
+  width: 100%;
+}
+
 @media screen and (min-width: 750px) {
   .blog-articles {
     grid-template-columns: 1fr 1fr;
@@ -18,35 +22,40 @@
     text-align: center;
   }
 
-  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small,
-  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small {
+  .blog-articles--collage > *:nth-child(3n + 1) .card,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .card {
+    text-align: center;
+  }
+
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio::before {
     padding-bottom: 22rem;
   }
 
-  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium,
-  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium {
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
     padding-bottom: 44rem;
   }
 
-  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large,
-  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large {
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
     padding-bottom: 66rem;
   }
 }
 
 @media screen and (min-width: 990px) {
-  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small,
-  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small {
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio .ratio::before {
     padding-bottom: 27.5rem;
   }
 
-  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium,
-  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium {
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
     padding-bottom: 55rem;
   }
 
-  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large,
-  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large {
+  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
+  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
     padding-bottom: 82.5rem;
   }
 }
diff --git a/sections/featured-blog.liquid b/sections/featured-blog.liquid
@@ -51,7 +51,7 @@
         >
           {%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
             <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="blog__post grid__item article slider__slide slider__slide--full-width">
-              {% render 'article-card', blog: section.settings.blog, article: article, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author %}
+              {% render 'article-card', blog: section.settings.blog, article: article, media_aspect_ratio: 1.66, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author, show_excerpt: true %}
             </li>
           {%- endfor -%}
         </ul>

diff --git a/sections/main-blog.liquid b/sections/main-blog.liquid
@@ -11,7 +11,15 @@
     <div class="blog-articles {% if section.settings.layout == 'collage' %}blog-articles--collage{% endif %}">
       {%- for article in blog.articles -%}
         <div class="blog-articles__article article">
-          {%- render 'article-card', article: article, image_height: section.settings.image_height, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author -%}
+          {%- render 'article-card',
+            article: article,
+            media_height: section.settings.image_height,
+            media_aspect_ratio: article.image.aspect_ratio,
+            show_image: section.settings.show_image,
+            show_date: section.settings.show_date,
+            show_author: section.settings.show_author,
+            show_excerpt: true 
+          -%}
         </div>
       {%- endfor -%}
     </div>