improve comment callout

public/style/blog.css

@@ -39,7 +39,7 @@ article.blog {
     border: 1px solid #8884;
     border-radius: 2px;
     overflow: scroll;
-    background: #060606;
+    background: var(--background-alt);
 }
 
 .blog p code {
@@ -47,7 +47,7 @@ article.blog {
     font-size: .9em;
     border: 1px solid #8884;
     border-radius: 2px;
-    background: #060606;
+    background: var(--background-alt);
 }
 
 .blog img {
@@ -112,6 +112,17 @@ article.blog {
     border-color: var(--on-background);
 }
 
+.comment-callout {
+    padding: 1em;
+    background: var(--background-alt);
+    border-radius: 2px;
+    border: 1px solid #8884;
+    text-align: center;
+}
+.comment-callout:hover {
+    background: var(--background-alt);
+}
+
 .btn.bluesky,
 .btn.mastodon {
     font-family: monospace;

public/style/colours.css

@@ -1,5 +1,6 @@
 :root {
     --background: #080808;
+    --background-alt: #040404;
     --on-background: #f0f0f0;
 
     --primary: #b7fd49;
@@ -11,6 +12,7 @@
 @media (prefers-color-scheme: light) {
     :root {
         --background: #ffffff;
+        --background-alt: #f0f0f0;
         --on-background: #101010;
 
         --primary: #6d9e23;

view/blog.html

@@ -32,11 +32,16 @@
     <div class="interactions">
         <span class="likes">❤️ {{.Likes}}</span>
         <span class="reposts">🔁 {{.Reposts}}</span>
-        <a class="btn bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
-        <!-- TODO: mastodon support -->
-        <a class="btn mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
     </div>
 
+    <p class="comment-callout">
+    join the conversation on
+    <a class="btn bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
+    <!-- TODO: mastodon support -->
+    or
+    <a class="btn mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
+    </p>
+
     <div class="comments">
         {{range .Comments}}
         {{template "comment" .}}