design changes for listicles in blog view

themes/bluewater/layouts/_default/baseof.html

@@ -6,7 +6,7 @@
       <div
         class="flex flex-col min-h-screen md:border-x-[20px] border-primary-400"
       >
-        <div class="bg-primary-400 md:h-5 md:sticky top-0"></div>
+        <div class="bg-primary-400 md:h-5 md:sticky top-0 z-50"></div>
         {{- partial "header.html" . -}}
         <div class="mb-8 grow">
           <div class="" id="content">

themes/bluewater/layouts/blog/list.html

@@ -1,23 +1,34 @@
 {{ define "main" }}
   <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
     {{ range .Pages }}
-      <div class="overflow-hidden rounded-lg shadow-lg border-2 hover:bg-primary-300 text-slate-700">
-        <!-- <a href="{{ .RelPermalink }}"> -->
-        {{ $image := .Resources.GetMatch "header" }}
-        {{ with $image }}
-          {{ $image := $image.Fill "1024x512 Center webp" }}
-          <img class="" src="{{ $image.RelPermalink }}" />
-        {{ end }}
-        <div class="text-lg m-4">
-          {{ .Title }}
-        </div>
+      <div
+        class="overflow-hidden rounded-lg shadow-lg border-2 hover:bg-primary-300 text-slate-600"
+      >
+        <a href="{{ .RelPermalink }}">
+          {{ $image := .Resources.GetMatch "header" }}
+          {{ if $image }}
+            {{ $image := $image.Fill "1024x512 Center webp" }}
+            <div class="relative z-0 mb-4">
+              <img class="" src="{{ $image.RelPermalink }}" />
+              <div
+                class="absolute bottom-2 left-4 text-3xl text-white font-bold font-outline-1"
+              >
+                {{ .Title }}
+              </div>
+            </div>
+          {{ else }}
+            <div class="text-3xl font-bold m-4">
+              {{ .Title }}
+            </div>
+          {{ end }}
 
-        <div class="mx-4 mb-4 line-clamp-5 text-balance">
-          {{ .Summary }}
-          
-        </div>
 
-        <!-- </a> -->
+          <div
+            class="mx-4 mb-4 line-clamp-[7] text-balance bg-clip-text bg-gradient-to-b from-slate-700 from-60% text-transparent"
+          >
+            {{ .Summary }}
+          </div>
+        </a>
       </div>
     {{ end }}
   </div>

themes/bluewater/layouts/partials/header.html

@@ -1,5 +1,5 @@
 <header
-  class="md:bg-white bg-primary-400 md:sticky md:top-5 top-0 w-full border-b-2 border-neutral-300 shadow-md"
+  class="md:bg-white bg-primary-400 md:sticky md:top-5 top-0 w-full border-b-2 border-neutral-300 shadow-md z-50"
 >
   <div class="flex justify-center">
     <div

themes/bluewater/tailwind.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+    .font-outline-1 {
+      -webkit-text-stroke: 0.25px black;
+    }
+  }