Post page: put the link sections and comments on cards

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.4.1
+
+- On a post page, the admin-only link sections (Backlinks, Linked Posts, External Links, External Backlinks) and the comments sit on cards like the post body. They were drawn straight onto the background photo, where the text was hard to read.
+
 ## 1.4.0
 
 - The footer's "Powered by goblog" line comes from goblog's shared `_powered_by` partial instead of being written out in the theme. It now links to [goblog.live](https://www.goblog.live) rather than the GitHub repository, and a site can hide it with the **Show "Powered by goblog"** setting under Admin → Settings → Appearance (goblog #644).

static/css/goblog.css

@@ -108,3 +108,6 @@ video {
 /* The "Powered by goblog" credit is goblog's shared _powered_by partial; its
    link takes the colour of the footer line around it. */
 .powered-by a { color: inherit; }
+
+/* Admin-only link sections under a post */
+.post-links + .post-links { margin-top: 24px; }

templates/post.html

@@ -27,8 +27,8 @@ <h1 style="font-weight: 700; margin-bottom: 8px; color: #1c2e1c;">{{ .post.Title
     </div>
 
     {{ if .is_admin }}
-    <div class="row">
-      <div class="container left">
+    <div class="glass-card text-left">
+      <div class="post-links">
         <h3>Backlinks</h3>
         <p class="text-muted">Posts that link to this post</p>
         {{ if .backlinks }}
@@ -41,10 +41,8 @@ <h3>Backlinks</h3>
         <p>None</p>
         {{ end }}
       </div>
-    </div>
 
-    <div class="row">
-      <div class="container left">
+      <div class="post-links">
         <h3>Linked Posts</h3>
         <p class="text-muted">Blog posts this post links to</p>
         {{ if .outbound_links }}
@@ -57,10 +55,8 @@ <h3>Linked Posts</h3>
         <p>None</p>
         {{ end }}
       </div>
-    </div>
 
-    <div class="row">
-      <div class="container left">
+      <div class="post-links">
         <h3>External Links</h3>
         <p class="text-muted">External URLs in this post</p>
         {{ if .post.ExternalLinks }}
@@ -73,10 +69,8 @@ <h3>External Links</h3>
         <p>None</p>
         {{ end }}
       </div>
-    </div>
 
-    <div class="row">
-      <div class="container left">
+      <div class="post-links">
         <h3>External Backlinks</h3>
         <p class="text-muted">External sites linking to this post</p>
         {{ if .external_backlinks }}
@@ -107,14 +101,9 @@ <h3>External Backlinks</h3>
     </div>
     {{ end }}
 
-  </div>
-
-
-  <!-- Comments Section -->
-  <div class="container">
-    <div class="row">
-      <div class="container left">
-        <hr>
+    <!-- Comments Section -->
+    <div class="glass-card text-left">
+      <div>
         <h3 class="text-left" id="comments">Comments ({{ len .comments }})</h3>
 
         {{ if .comment_error }}