💄 style(sass): enhance webmention styling with variables

- add color and background color variables for consistent styling
  - update margins and padding for better layout

♻️ refactor(css): migrate and rename webmention CSS to SCSS
  - move webmention.css to sass/parts/_webmention.scss
  - remove unused webmention.min.css
  - update template to remove old stylesheet link

static/webmention.css

@@ -1,86 +0,0 @@
-#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;
-}