v1.0.0

src/_includes/showcase.ejs

@@ -18,12 +18,13 @@
                             <img class="product-icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
                             <div>
                                 <h2><%= product.name %></h2>
-                                <span>more info</span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="100" height="100" viewBox="0 0 24 24" stroke-width="2" stroke="var(--c-3)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <span>more info<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="100" height="100" viewBox="0 0 24 24" stroke-width="2" stroke="var(--c-3)" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                     <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                     <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
                                     <line x1="10" y1="14" x2="20" y2="4" />
                                     <polyline points="15 4 20 4 20 9" />
                                   </svg>
+                                </span>
                             </div>
                         </header>
                         <div class="product-hero__wrapper">

src/assets/styles/_showcase.css

@@ -13,6 +13,13 @@ article.showcase__wrapper {
     margin-top: 1rem;
 }
 
+.showcase__wrapper header span {
+    display: flex;
+    align-items: flex-start;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
 .showcase__wrapper ul {
     display: flex;
     flex-direction: column;
@@ -51,8 +58,9 @@ article.showcase__wrapper {
 }
 
 .showcase__wrapper .icon {
-    height: 0.8em;
-    margin-left: 0.5em;
+    height: 1em;
+    width: 1em;
+    margin-left: 0.3em;
 }
 
 .product-hero__wrapper{