✨ feat(styles): add webmention styling

- introduce webmention.css for styling web mention elements
- create minified version webmention.min.css for optimized load times

static/webmention.css

@@ -0,0 +1,86 @@
+#webmentions {
+    margin: 0;
+    position: relative;
+    z-index: 100;
+    line-height: 1.2em;
+}
+
+#webmentions .comments {
+    max-height: 20em;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    font-size: 80%;
+}
+
+#webmentions h2 {
+    font-size: medium;
+    margin: 0;
+    padding: 2px;
+    /* background: #ccc; */
+}
+
+#webmentions .reacts img {
+    margin: 3px -1ex 1px 0;
+    display: inline;
+}
+
+#webmentions img.missing {
+    background: white;
+    border: dashed black 1px;
+}
+
+#webmentions ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 4px;
+}
+
+#webmentions li {
+    text-indent: -1em;
+    padding-left: 1em;
+}
+
+#webmentions a.reaction {
+    position: relative;
+    text-decoration: none;
+    text-shadow: 0px 0px 3px white;
+    margin-right: 0;
+    letter-spacing: -1ex;
+    margin-right: 1ex;
+}
+
+#webmentions a.reaction img {
+    max-height: 1.3em;
+    display: inline;
+    /* padding-right: .5em; */
+    width: auto;
+    margin-right: -1ex;
+    border-radius: 25%;
+}
+
+#webmentions a.reaction sub {
+    font-size: 50%;
+}
+
+#webmentions .comments li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+#webmentions .comments li .text {
+    color: #555;
+    font-style: italic;
+    text-decoration: none;
+    text-wrap: wrap;
+    padding-left: 0.5em;
+}
+
+#webmentions .comments li .name {
+    color: #111;
+    padding-left: 0.5em;
+}
+
+#webmentions .comments li .emoji {
+    display: none;
+}