More style

danakj · Dec 5, 2023 · 450c788 · 450c788
1 parent 1ce6460
commit 450c788
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git 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
@@ -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;
 }
+