[webmention] Better parsing of interactions; add source indicator

Webmention logo is CC0. See: <https://indieweb.org/IndieWeb:Copyrights>

1 files changed, 35 insertions, 4 deletions

diff --git a/haunt/static/css/style.css b/haunt/static/css/style.css
index 6dbbe4e..4b682d2 100644
--- a/haunt/static/css/style.css
+++ b/haunt/static/css/style.css
@@ -169,21 +169,52 @@ ul#webmention-container {
     list-style-type: none;
 }
 
-div.h-entry, ul#webmention-container li {
+ul#webmention-container li {
     border: 2px solid #d2d6dd;
-    padding: 1rem;
+    border-bottom: none;
+}
+
+ul#webmention-container li:last-child {
+    border-bottom: 2px solid #d2d6dd;
+}
+
+ul#webmention-container li.comment {
+    padding: 1.5rem;
 }
 
-img.u-photo {
+ul#webmention-container li.comment img.u-photo {
     width: 4rem;
     padding: 0 1rem 1rem 0;
     float: left;
 }
 
-div.p-author * {
+ul#webmention-container li.interaction {
+    padding: 4px;
+}
+
+ul#webmention-container li.interaction img.u-photo {
+    max-width: 16px;
+    margin-right: 8px;
+    float: left;
+}
+
+ul#webmention-container div.p-author * {
     padding-right: 1rem;
 }
 
+/* Webmention (or comment) source indicator. */
+
+ul#webmention-container .comment-source-webmention {
+    position: relative;
+}
+
+ul#webmention-container .comment-source-webmention .comment-source-identifier {
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: 16px;
+}
+
 /* Webmention form. */
 
 form {