💄 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

sass/main.scss

@@ -23,6 +23,7 @@
 @use 'parts/_tags.scss';
 @use 'parts/_theme-switch.scss';
 @use 'parts/_zola-error.scss';
+@use 'parts/_webmention.scss';
 
 @font-face {
     src: local('Inter'),

sass/parts/_webmention.scss

@@ -3,6 +3,8 @@
     position: relative;
     z-index: 100;
     line-height: 1.2em;
+    color: var(--text-color);
+    background-color: var(--background-color);
 }
 
 #webmentions .comments {
@@ -15,8 +17,10 @@
 #webmentions h2 {
     font-size: medium;
     margin: 0;
+    margin-top: 1.4em;
+    margin-bottom: 1.2em;
     padding: 2px;
-    /* background: #ccc; */
+    background: var(--background-color);
 }
 
 #webmentions .reacts img {
@@ -49,10 +53,16 @@
     margin-right: 1ex;
 }
 
+#webmentions a.source {
+    margin-right: 1ex;
+    text-decoration: none;
+    color: var(--primary-color);
+    background-color: var(--background-color);
+}
+
 #webmentions a.reaction img {
     max-height: 1.3em;
     display: inline;
-    /* padding-right: .5em; */
     width: auto;
     margin-right: -1ex;
     border-radius: 25%;
@@ -69,7 +79,7 @@
 }
 
 #webmentions .comments li .text {
-    color: #555;
+    color: var(--meta-color);
     font-style: italic;
     text-decoration: none;
     text-wrap: wrap;
@@ -77,7 +87,7 @@
 }
 
 #webmentions .comments li .name {
-    color: #111;
+    color: var(--meta-color);
     padding-left: 0.5em;
 }
 

static/webmention.min.css

@@ -1 +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}#webmentions .reacts img{margin:3px -1ex 1px 0;display:inline}#webmentions img.missing{background:#fff;border:dashed #000 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:0 0 3px #fff;margin-right:0;letter-spacing:-1ex;margin-right:1ex}#webmentions a.reaction img{max-height:1.3em;display:inline;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:.5em}#webmentions .comments li .name{color:#111;padding-left:.5em}#webmentions .comments li .emoji{display:none}

templates/partials/webmentions.html

@@ -4,7 +4,6 @@
 3. Add and configure the javascript to fetch and display the webmentions collected at webmention.io. #} 
 
 <link rel="webmention" href="https://webmention.io/{{ config.extra.webmentions.domain }}/webmention" />
-<link rel="stylesheet" href="{{ get_url(path='webmention.min.css', trailing_slash=false) | safe }}" />
 
 {# Calculate the configured data for the script, if any #}