blog on homepage

_includes/pinned.njk

@@ -1,7 +1,7 @@
 {% include "base-header.html" %}
 
 <main class="max-w-7xl mx-auto px-2">
-  <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
+  <div class="relative max-w-lg mx-auto lg:max-w-7xl flex flex-col gap-12">
     <div class="pt-2 px-4 sm:pt-8 sm:px-8 sm:pb-4 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
       <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading flex flex-row gap-1 motion-safe:animate-fade">
         <span>{{ title | markdown | safe }}</span><div class="typing"></div>
@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <div class="mt-16 grid gap-16 pt-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
+    <div class="grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
       {%- for content in collections.pinned | reverse -%}
       <div class="motion-safe:animate-fade-up motion-safe:animate-delay-[{{loop.index * 100}}ms] animate-once">
           <div>
@@ -34,6 +34,30 @@
         </div>
       {%- endfor -%}
     </div>
+
+    <div class="flex flex-col gap-2">
+      {%- set top = 3 -%}
+      {%- for content in collections.posts | reverse -%}
+        {%- if (loop.index <= top) and (top <= loop.length) -%}
+        <a href="{{ content.url }}" class="flex flex-row h-[4em] blog-link relative" >
+          {%- if content.data.coverImage -%}
+            <img src="{{ content.data.coverImage }}" alt="{{ content.data.imageDescription }}" class="w-40 h-full object-cover saturate-50 contrast-50 hover:saturate-100 hover:contrast-100 fancy-pinned-blog-image rounded-tl rounded-bl" />
+          {%- else -%}
+            <div class="w-40 h-full rounded-tl rounded-bl bg-gradient-to-r from-mauve via-sky to-transparent opacity-50"></div>
+          {%- endif -%}
+          <div class="flex flex-col gap-1 absolute left-40">
+            <h2 class="text-md text-blue line-clamp-2 outline-link">
+              {{ content.data.title }}
+            </h2>
+            <div class="text-xs hidden sm:block text-subtext1 line-clamp-2">
+              {{ content.data.description }}
+            </div>
+          </div>
+        </a>
+        {%- endif -%}
+      {%- endfor -%}
+      <p class="text-subtext0">...read more in the <a href="/blog" class="link outline-link">blog</a></p>
+    </div>
   </div>
 </main>
 

styles.css

@@ -71,6 +71,23 @@
   }
 }
 
+.fancy-pinned-blog-image {
+  mask-image: linear-gradient(to right,
+    white,
+    rgba(255, 255, 255, 0)
+  );
+  position: relative;
+}
+
+.blog-link h2 {
+  text-decoration: underline;
+}
+
+.blog-link:focus h2,
+.blog-link:hover h2 {
+  text-decoration: none;
+}
+
 .fancy-blockquote {
   max-width: 30rem;
   font-size: 1.4rem;