From 77f391f24d4073bdd9c75ce25f0665ae70681ca8 Mon Sep 17 00:00:00 2001
From: Elias Kohout <elias@kohout.de>
Date: Fri, 10 Jan 2025 20:02:35 +0100
Subject: [PATCH] improved design for articles

---
 golang/assets/templates/article.html | 29 ++++++++++++++--------------
 golang/assets/templates/layout.html  | 12 ++++++------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/golang/assets/templates/article.html b/golang/assets/templates/article.html
index d2ad55d..c119940 100644
--- a/golang/assets/templates/article.html
+++ b/golang/assets/templates/article.html
@@ -1,22 +1,23 @@
 {{ define "content" }}
 
-<div class="content">
+<div class="content max-w-screen-lg mx-auto">
+
 {{ range . }}
-<div class="card bg-base-300 my-5 shadow-lg">
-  <div class="card-body">
-      <h2 class="card-title">{{ .Title }}</h2>
-      <p class="">
-        <span class="badge badge-outline">{{ .ShortSource }}</span>
-        <span class="badge badge-outline">{{ .PublishDate }}</span>
-        {{if .AiSummarized}}
-        <span class="badge badge-outline">ai summary</span>
-        {{end}}
-      </p>
-      <p class="card-text">{{ .Summary }}</p>
-      <a href="{{ .SourceUrl }}" class="link">Link</a>
+<div tabindex="0" class="collapse bg-base-200 shadow mb-4">
+  <div class="collapse-title font-medium">{{ .Title }}</div>
+  <div class="collapse-content">
+    <p class="pb-2">
+      <span class="badge badge-outline">{{ .ShortSource }}</span>
+      <span class="badge badge-outline">{{ .PublishDate }}</span>
+      {{if .AiSummarized}}
+      <span class="badge badge-outline">ai summary</span>
+      {{end}}
+    </p>
+    <p class="card-text">{{ .Summary }}</p>
+    <a href="{{ .SourceUrl }}" class="link">Link</a>
   </div>
 </div>
 {{ end }}
-</div>
 
+</div>
 {{ end }}
diff --git a/golang/assets/templates/layout.html b/golang/assets/templates/layout.html
index 6428e53..931bb30 100644
--- a/golang/assets/templates/layout.html
+++ b/golang/assets/templates/layout.html
@@ -12,10 +12,10 @@
         {{/* Logo with navigation */}}
 
         <div class="flex-1">
-          <a href="/" class="btn btn-ghost text-xl">crowsnest</a>
+          <a href="/" tabindex="0" class="btn btn-ghost text-xl">crowsnest</a>
           <ul class="menu menu-horizontal hidden sm:flex">
-            <li><a class="active">Artikel</a></li>
-            <li><a>Themen</a></li>
+            <li><a tabindex="0" class="active">Artikel</a></li>
+            <li><a tabindex="0">Themen</a></li>
           </ul>
         </div>
 
@@ -42,9 +42,9 @@
                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25" />
             </svg>
           </div>
-          <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
-            <li><a class="active">Artikel</a></li>
-            <li><a>Themen</a></li>
+          <ul class="menu dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+            <li><a tabindex="0" class="active">Artikel</a></li>
+            <li><a tabindex="0">Themen</a></li>
           </ul>
         </div>