From b2cb9dbc7a49292157c5a57fd9c55c3a01cf2d09 Mon Sep 17 00:00:00 2001
From: Konstantin Kollar <konstantin@kollar.email>
Date: Sun, 14 Apr 2024 16:34:54 +0200
Subject: [PATCH] design changes for listicles in blog view

---
 themes/bluewater/layouts/_default/baseof.html |  2 +-
 themes/bluewater/layouts/blog/list.html       | 41 ++++++++++++-------
 themes/bluewater/layouts/partials/header.html |  2 +-
 themes/bluewater/tailwind.css                 |  6 +++
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/themes/bluewater/layouts/_default/baseof.html b/themes/bluewater/layouts/_default/baseof.html
index 8ef1d75..0682658 100644
--- a/themes/bluewater/layouts/_default/baseof.html
+++ b/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">
diff --git a/themes/bluewater/layouts/blog/list.html b/themes/bluewater/layouts/blog/list.html
index a1089ed..41385b1 100644
--- a/themes/bluewater/layouts/blog/list.html
+++ b/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>
diff --git a/themes/bluewater/layouts/partials/header.html b/themes/bluewater/layouts/partials/header.html
index 278645c..e21f598 100644
--- a/themes/bluewater/layouts/partials/header.html
+++ b/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
diff --git a/themes/bluewater/tailwind.css b/themes/bluewater/tailwind.css
index b5c61c9..376ca25 100644
--- a/themes/bluewater/tailwind.css
+++ b/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;
+    }
+  }