a little animation

assets/css/components/card.css

@@ -7,6 +7,15 @@
   overflow: hidden;
   color: #fff;
   border-radius: var(--radius);
+  opacity: 0;
+  transition: opacity 0.2s linear;
+}
+
+@supports (prefers-reduced-motion: reduce) {
+  .sm-card {
+    opacity: 1;
+    transition: none;
+  }
 }
 
 .sm-card picture {
@@ -40,12 +49,6 @@
   text-wrap: balance;
 }
 
-.sm-card-tag {
-  font-size: var(--x-small);
-  text-transform: uppercase;
-  opacity: 0.8;
-}
-
 .sm-card-meta,
 .sm-card-meta > div {
   display: flex;
@@ -228,6 +231,7 @@
   color: var(--surface-dark);
   background-color: var(--primary);
   border-radius: var(--radius);
+  opacity: 0;
 }
 
 /* Featured card */
@@ -246,6 +250,8 @@
   color: #fff;
   background-color: var(--surface-light);
   border-radius: var(--radius);
+  opacity: 0;
+  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 @media (--tablet) {
@@ -278,3 +284,7 @@
     grid-column: span 12;
   }
 }
+
+.fade-in {
+  opacity: 1;
+}

assets/css/components/header.css

@@ -6,6 +6,7 @@
 .sm-header-title {
   margin: 0;
   font-weight: 900;
+  text-wrap: balance;
 }
 
 .sm-header-excerpt {

assets/css/pages/post.css

@@ -1,6 +1,7 @@
 /* stylelint-disable selector-class-pattern */
 .sm-post-title {
   margin-block-end: 1rem;
+  text-wrap: balance;
 }
 
 /* TODO - Combine with card.css */

assets/js/app/app.js

@@ -19,3 +19,30 @@ initMediumZoom();
 responsiveTableInit();
 writeAuthorWebsite();
 toc();
+
+function animateOnScroll() {
+  // Fade in elements on scroll
+
+  const els = document.querySelectorAll('.sm-grid-home > *');
+
+  if (!els) {
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const el = entry.target;
+        const ratio = entry.intersectionRatio;
+        el.style.opacity = ratio + 0.25;
+      });
+    },
+    { threshold: [0, 0.25, 0.5, 0.75, 1] },
+  );
+
+  els.forEach((el) => {
+    observer.observe(el);
+  });
+}
+
+animateOnScroll();

home.hbs

@@ -15,8 +15,8 @@
 
         {{#get "tags" include="count.posts" limit="6" order="count.posts" as |tags|}}
             {{#foreach tags}}
-            {{log this}}
                 <article class="sm-tag-card {{@number}} {{^if feature_image}}sm-background-color{{/if}}">
+                    {{#if feature_image}}
                     <picture class="">
                       <source 
                         srcset="
@@ -65,9 +65,7 @@
                         alt="{{name}}"
                       >
                     </picture>
-
-
-                    {{#if feature_image}}<img src="{{img_url feature_image}}">{{/if}}
+                    {{/if}}
 
                     <div class="sm-tag-card-body">
                         <a href="{{url}}">{{name}}</a>