chore: latest post styling tweaks

Author: thescientist13

src/components/latest-post/latest-post.js

@@ -8,8 +8,8 @@ export default class LatestPost extends HTMLElement {
 
     this.innerHTML = `
       <div class="${styles.pill}">
-        <span class="new">${icon} New</span>
-        <a href="${link}" title="Read our latest post">${title} &#8594</a>
+        <span class="${styles.new}">${icon} New</span>
+        <a class="${styles.link}" href="${link}" title="Read our latest post">${title} &#8594</a>
       </div>
     `;
   }

src/components/latest-post/latest-post.module.css

@@ -5,16 +5,16 @@
   border: var(--radius-1) solid var(--color-gray-background);
   box-shadow: var(--shadow-1);
   text-align: left;
+}
 
-  & .new {
-    background-color: var(--color-green-pale);
-    border-radius: var(--radius-4);
-    padding: var(--size-2);
-    margin-right: var(--size-1);
-  }
+.new {
+  background-color: var(--color-green-pale);
+  border-radius: var(--radius-4);
+  padding: var(--size-2);
+  margin-right: var(--size-1);
+}
 
-  & a {
-    line-height: var(--size-px-8);
-    color: var(--color-black);
-  }
+.link {
+  line-height: var(--size-px-8);
+  color: var(--color-black);
 }

src/components/latest-post/latest-post.stories.js

@@ -12,3 +12,11 @@ export const Primary = () => `
     title="We just launched v0.30.0"
   ></app-latest-post>
 `;
+
+export const CustomIcon = () => `
+  <app-latest-post
+    link="/blog/state-of-greenwood-2025/"
+    title="Read the <em>State of Greenwood</em> 2025"
+    icon="📚"
+  ></app-latest-post>
+`;