aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortdro <tdro@noreply.example.com>2022-12-04 16:27:37 -0500
committertdro <tdro@noreply.example.com>2022-12-04 16:27:37 -0500
commit5c06baa5bab7a1127b089d4121fbdca1c5fc3c6f (patch)
tree005ac8229458dfbfafa3d5a4fe7d9745b39d7b77
parenta99e03e7f01f8e1dc568451fac346304e8d5f48c (diff)
downloadcanory-5c06baa5bab7a1127b089d4121fbdca1c5fc3c6f.tar.gz
canory-5c06baa5bab7a1127b089d4121fbdca1c5fc3c6f.tar.bz2
canory-5c06baa5bab7a1127b089d4121fbdca1c5fc3c6f.zip
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
-rw-r--r--assets/css/default.css81
-rw-r--r--content/canory/messages/highlighting.md5
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." />}}