From 450c788f1105e83c467315e1367bd598e95c0275 Mon Sep 17 00:00:00 2001
From: Dana Jansens <danakj@orodu.net>
Date: Mon, 4 Dec 2023 22:53:24 -0500
Subject: [PATCH] More style

---
 _layouts/post.html  | 34 +++++++++++++++++++---------------
 css/webmentions.css | 18 ++++++++----------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index feb875b..f0a17a8 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -38,18 +38,22 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
 <!-- Allow collection of webmentions about the post. -->
 <link rel="webmention" href="https://webmention.io/orodu.net/webmention" />
 
-<!-- The webmentions query must be to the http:// url in order to get a response. -->
-<div class="webmentions-container" style="display:none" data-webmentions="http://orodu.net{{ page.url | relative_url }}"></div>
-<template id="webmention-template">
-  <li>
-    <div class="head">
-      <span class="author">
-        <img class="avatar webmention-author-avatar"></img>
-        <a class="webmention-author"><span class="webmention-author-name"></span></a>
-      </span>
-      <span class="action"><span class="webmention-action"></span></span>
-    </div>
-    <div class="content"><span class="webmention-content"></span></div>
-  </li>
-</template>
-<script src="/assets/webmentions.js"></script>
+<div class="webmentions">
+  <hr>
+  <div class="webmentions-header">Interactions:</div>
+  <!-- The webmentions query must be to the http:// url in order to get a response. -->
+  <div class="webmentions-container" style="display:none" data-webmentions="http://orodu.net{{ page.url | relative_url }}"></div>
+  <template id="webmention-template">
+    <li>
+      <div class="head">
+        <span class="author">
+          <img class="avatar webmention-author-avatar"></img>
+          <a class="webmention-author"><span class="webmention-author-name"></span></a>
+        </span>
+        <span class="action"><span class="webmention-action"></span></span>
+      </div>
+      <div class="content"><span class="webmention-content"></span></div>
+    </li>
+  </template>
+  <script src="/assets/webmentions.js"></script>
+</div>
diff --git a/css/webmentions.css b/css/webmentions.css
index 00c30f5..e47b21c 100644
--- a/css/webmentions.css
+++ b/css/webmentions.css
@@ -1,5 +1,9 @@
+.webmentions-header {
+    font-size: 130%
+}
+
 .webmentions-container {
-    display: flex;
+    display: flex;    
 }
 
 .webmentions-container li {
@@ -8,16 +12,10 @@
 
 .webmentions-container ul {
     flex-direction: column;
+    padding-left: 0;
 }
 
-.webmentions-container li {
-    flex-direction: row;
-}
-
-.webmentions-container li .item {
-    display: inline;
-}
-
-.webmentions-container .author img {
+.webmentions-container .avatar {
     width: 1.7em;
 }
+