improved design for articles

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 }}

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>