layout refactor

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>
-    <strong>Journal</strong>
+  <div class="page-header">
+    <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">
-  <header>
-    <small>{{.EntryDate}} · {{.EntryTime}}</small>
-    {{if .Title}}<strong> · {{.Title}}</strong>{{end}}
-  </header>
-  {{if .Description}}<p>{{.Description}}</p>{{end}}
+<article class="pub-card">
   {{if .Images}}
-  <div class="entry-images">
-    {{range .Images}}
-    <a href="/uploads/{{.Filename}}" target="_blank">
-      <img src="/uploads/{{.Filename}}" alt="{{.OriginalName}}" class="thumb">
-    </a>
-    {{end}}
+  <a href="/uploads/{{(index .Images 0).Filename}}" target="_blank">
+    <img class="pub-cover" src="/uploads/{{(index .Images 0).Filename}}" alt="">
+  </a>
+  {{end}}
+  <div class="pub-body">
+    <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=' + offset)
+    fetch('/feed?offset=' + sentinel.dataset.offset)
       .then(r => r.text())
       .then(html => {
         sentinel.remove();