More style

_layouts/post.html

@@ -46,11 +46,12 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
   <template id="webmention-template">
     <li>
       <div class="head">
-        <span class="author">
-          <img class="avatar webmention-author-avatar"></img>
+        <img class="avatar webmention-author-avatar"></img>
+        <span class="text">
           <a class="webmention-author"><span class="webmention-author-name"></span></a>
+          <span class="sep">::</span>
+          <span class="action"><a class="webmention-action"></a></span>
         </span>
-        <span class="action"><a class="webmention-action"></a></span>
       </div>
       <div class="content"><span class="webmention-content"></span></div>
     </li>

css/webmentions.css

@@ -1,34 +1,40 @@
 div.webmentions {
     margin-top: 20px;
+    display: flex; 
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
 }
 
-.webmentions-header {
+div.webmentions .webmentions-header {
     font-size: 130%;
     margin: 0 0 0.5em 0;
+    width: 80%;
 }
 
 .webmentions-container {
-    display: flex;    
 }
 
-.webmentions-container li {
+div.webmentions ul {
+    flex-direction: column;
+    padding-left: 0;
+    width: 80%;
+}
+
+div.webmentions li {
     list-style: none;
     margin-top: 0.2em;
     border: 1px solid #3d3d3d;
-    padding: 0.2em
-}
-
-.webmentions-container ul {
-    flex-direction: column;
-    padding-left: 0;
+    padding: 0.2em;
 }
 
-.webmentions-container .head {
+div.webmentions li .head {
+    display: flex;
     flex-direction: row;
     justify-content: center;
 }
 
-.webmentions-container .avatar {
+div.webmentions li .avatar {
     width: 1.7em;
 }