layout refactor

backend/internal/api/static/style.css

@@ -49,6 +49,15 @@ h2 { font-size: 1rem;   font-weight: normal; letter-spacing: .05em; }
 .entry-desc   { white-space: pre-wrap; font-size: .9rem; }
 .entry-images { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
 
+/* Public feed */
+.pub-card { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--pico-muted-border-color); }
+.pub-card:last-of-type { border-bottom: none; }
+.pub-cover { width: 100%; max-height: 320px; object-fit: cover; display: block; margin-bottom: .7rem; }
+.pub-meta { display: block; color: var(--pico-muted-color); margin-bottom: .3rem; }
+.pub-title { display: block; font-size: 1rem; margin-bottom: .4rem; }
+.pub-desc { margin: 0 0 .4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
+.pub-tags { margin-top: .3rem; }
+
 /* Login */
 .login-box { max-width: 360px; margin: 4rem auto; }
 

backend/internal/api/templates/public.html

@@ -1,12 +1,11 @@
-{{define "title"}}Journal — Öffentliche Einträge{{end}}
+{{define "title"}}Journal{{end}}
 
 {{define "content"}}
 <main class="container">
-  <nav>
+  <div class="page-header">
-    <strong>Journal</strong>
+    <span>Journal</span>
     <a href="/login">Anmelden</a>
-  </nav>
+  </div>
-
   <div id="feed">
     {{template "feed_items" .}}
   </div>
@@ -15,26 +14,18 @@
 
 {{define "feed_items"}}
 {{range .Entries}}
-<article class="entry-card">
+<article class="pub-card">
-  <header>
-    <small>{{.EntryDate}} · {{.EntryTime}}</small>
-    {{if .Title}}<strong> · {{.Title}}</strong>{{end}}
-  </header>
-  {{if .Description}}<p>{{.Description}}</p>{{end}}
   {{if .Images}}
-  <div class="entry-images">
+  <a href="/uploads/{{(index .Images 0).Filename}}" target="_blank">
-    {{range .Images}}
+    <img class="pub-cover" src="/uploads/{{(index .Images 0).Filename}}" alt="">
-    <a href="/uploads/{{.Filename}}" target="_blank">
+  </a>
-      <img src="/uploads/{{.Filename}}" alt="{{.OriginalName}}" class="thumb">
+  {{end}}
-    </a>
+  <div class="pub-body">
-    {{end}}
+    <small class="pub-meta">{{.EntryDate}} · {{.EntryTime}}</small>
+    {{if .Title}}<strong class="pub-title">{{.Title}}</strong>{{end}}
+    {{if .Description}}<p class="pub-desc">{{.Description}}</p>{{end}}
+    {{if .Hashtags}}<div class="pub-tags">{{range .Hashtags}}<span class="tag">#{{.}}</span> {{end}}</div>{{end}}
   </div>
-  {{end}}
-  {{if .Hashtags}}
-  <footer class="hashtags">
-    {{range .Hashtags}}<span class="tag">#{{.}}</span> {{end}}
-  </footer>
-  {{end}}
 </article>
 {{else}}
 <p><small>// Noch keine öffentlichen Einträge</small></p>
@@ -52,8 +43,7 @@
   const obs = new IntersectionObserver(function(entries) {
     if (!entries[0].isIntersecting) return;
     obs.disconnect();
-    const offset = sentinel.dataset.offset;
+    fetch('/feed?offset=' + sentinel.dataset.offset)
-    fetch('/feed?offset=' + offset)
       .then(r => r.text())
       .then(html => {
         sentinel.remove();