From 30819dd890f231aa8758f02127f1aeed009577f0 Mon Sep 17 00:00:00 2001
From: Jeremiah Russell <jerry@jrussell.ie>
Date: Tue, 11 Feb 2025 12:17:32 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(sass):=20enhance=20webment?=
 =?UTF-8?q?ion=20styling=20with=20variables=20=20=20-=20add=20color=20and?=
 =?UTF-8?q?=20background=20color=20variables=20for=20consistent=20styling?=
 =?UTF-8?q?=20=20=20-=20update=20margins=20and=20padding=20for=20better=20?=
 =?UTF-8?q?layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

♻️ 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                                 |  1 +
 .../parts/_webmention.scss                     | 18 ++++++++++++++----
 static/webmention.min.css                      |  1 -
 templates/partials/webmentions.html            |  1 -
 4 files changed, 15 insertions(+), 6 deletions(-)
 rename static/webmention.css => sass/parts/_webmention.scss (77%)
 delete mode 100644 static/webmention.min.css

diff --git a/sass/main.scss b/sass/main.scss
index f2b36c7..d1d13ae 100644
--- a/sass/main.scss
+++ b/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'),
diff --git a/static/webmention.css b/sass/parts/_webmention.scss
similarity index 77%
rename from static/webmention.css
rename to sass/parts/_webmention.scss
index ab34847..8458b23 100644
--- a/static/webmention.css
+++ b/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;
 }
 
diff --git a/static/webmention.min.css b/static/webmention.min.css
deleted file mode 100644
index c12d90e..0000000
--- a/static/webmention.min.css
+++ /dev/null
@@ -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}
\ No newline at end of file
diff --git a/templates/partials/webmentions.html b/templates/partials/webmentions.html
index 453ee76..5d4d68b 100644
--- a/templates/partials/webmentions.html
+++ b/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 #}