From 5c06baa5bab7a1127b089d4121fbdca1c5fc3c6f Mon Sep 17 00:00:00 2001
From: tdro <tdro@noreply.example.com>
Date: Sun, 4 Dec 2022 16:27:37 -0500
Subject: assets/css/default: Use linear gradient background on highlighting
 elements

For spacing instead of line-height with background-color. Fix opening/closing
multiple spoilers with adjacent (+) instead of all (~) siblings
---
 assets/css/default.css                  | 81 ++++++++++++++++++++++++---------
 content/canory/messages/highlighting.md |  5 +-
 2 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index e0b5118..b7840e5 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -43,7 +43,7 @@
   --hover-background: rgba(var(--foreground-rgb), 0.06);
   --link: #0149bc;
   --shadow: #00000060;
-  --spoiler: #333;
+  --spoiler: #444;
   --success-background: #d5f3c4;
   --success: #1d3c0c;
   --table-even-background: rgba(var(--foreground-rgb), 0.04);
@@ -223,46 +223,85 @@ sub {
   display: inline-block;
 }
 
-s,
-del,
-mark,
-ins {
-  padding: 0 0.15rem;
-  line-height: 1.5;
-  border-radius: 0.5rem;
-}
-
 mark {
-  background-color: #ffe699;
-  background-color: var(--warning-background);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #ffe699 10%,
+    #ffe699 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--warning-background) 10%,
+    var(--warning-background) 90%,
+    transparent 90%
+  );
   color: #332600;
   color: var(--warning);
 }
 
 ins {
-  background-color: #d5f3c4;
-  background-color: var(--success-background);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #d5f3c4 10%,
+    #d5f3c4 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--success-background) 10%,
+    var(--success-background) 90%,
+    transparent 90%
+  );
   color: #1d3c0c;
   color: var(--success);
   text-decoration: none;
 }
 
 del {
-  background-color: #fcd2cf;
-  background-color: var(--danger-background);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #fcd2cf 10%,
+    #fcd2cf 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--danger-background) 10%,
+    var(--danger-background) 90%,
+    transparent 90%
+  );
   color: #8f0000;
   color: var(--danger);
 }
 
 s {
-  text-decoration: none;
-  background-color: #333;
-  background-color: var(--spoiler);
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    #444 10%,
+    #444 90%,
+    transparent 90%
+  );
+  background: linear-gradient(
+    to bottom,
+    transparent 10%,
+    var(--spoiler) 10%,
+    var(--spoiler) 90%,
+    transparent 90%
+  );
   color: transparent;
+  text-decoration: none;
 }
 
-input[type="checkbox"]:checked ~ s {
-  background-color: inherit;
+input[type="checkbox"]:checked + s {
+  background: inherit;
   color: inherit;
 }
 
diff --git a/content/canory/messages/highlighting.md b/content/canory/messages/highlighting.md
index 600d44e..9c68beb 100644
--- a/content/canory/messages/highlighting.md
+++ b/content/canory/messages/highlighting.md
@@ -6,6 +6,7 @@ author  = "canory"
 +++
 
 Sometimes I'll {{< mark "highlight stuff" />}} to draw attention to my fine
-eloquence. If I don't think things through, I'll ~~hide the what I
-wrote~~. Whoops, let's just {{< ins "correct the record." >}}
+eloquence. If I don't think things through, I'll ~~hide the what I wrote~~.
+Whoops, let's just {{< ins "correct the record." >}}
 {{< spoiler "Move along --- nothing to see here." />}}
+{{< spoiler "Still nothing." />}}
-- 
cgit v1.2.3