From 274285f48a3c875d1cc11bb222903e19c5e23992 Mon Sep 17 00:00:00 2001
From: Anna Wiggins <annabunches@gmail.com>
Date: Wed, 15 Nov 2023 03:33:50 +0000
Subject: [PATCH] Add spoiler tag shortcode.

---
 hugo.toml                       |  2 +-
 layouts/shortcodes/spoiler.html |  1 +
 static/css/spoiler.css          | 26 ++++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/spoiler.html
 create mode 100644 static/css/spoiler.css

diff --git a/hugo.toml b/hugo.toml
index 77b14bf..3f73db5 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -9,7 +9,7 @@ googleAnalytics = "G-QFK0K7MGCJ"
 
 [params]
   paginate = 10
-  custom_css = ["/css/custom.css"]
+  custom_css = ["/css/custom.css", "/css/spoiler.css"]
   dateFormat = "2006-01-02"
   # Disqus shortname
 #  disqus = ""
diff --git a/layouts/shortcodes/spoiler.html b/layouts/shortcodes/spoiler.html
new file mode 100644
index 0000000..90506bf
--- /dev/null
+++ b/layouts/shortcodes/spoiler.html
@@ -0,0 +1 @@
+<span class="inline-spoiler">{{- .Inner | safeHTML -}}</span>
diff --git a/static/css/spoiler.css b/static/css/spoiler.css
new file mode 100644
index 0000000..bca92e3
--- /dev/null
+++ b/static/css/spoiler.css
@@ -0,0 +1,26 @@
+.inline-spoiler {
+  position: relative;
+  display: inline-block;
+  cursor: help;
+}
+
+.inline-spoiler::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 1px;
+  color: white;
+  background: black;
+  opacity: 1;
+  transition: opacity 0.7s ease, transform 0.3s ease;
+}
+
+.inline-spoiler:hover::before {
+  opacity: 0;
+  transform: translateY(-50%) rotateX(80deg);
+  transition: opacity 1s ease, transform 0.5s ease;
+  transition-delay: 0.3s;
+}