From fd6975964f4874ec509deb5dfc8363f7dd359762 Mon Sep 17 00:00:00 2001
From: gribse <achille.toupin@gadz.org>
Date: Tue, 13 May 2025 23:34:19 +0200
Subject: [PATCH] Add inline spoiler shortcode with hover effect and styling

---
 layouts/shortcodes/inline-spoiler.html | 32 ++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 layouts/shortcodes/inline-spoiler.html

diff --git a/layouts/shortcodes/inline-spoiler.html b/layouts/shortcodes/inline-spoiler.html
new file mode 100644
index 0000000..cae85f1
--- /dev/null
+++ b/layouts/shortcodes/inline-spoiler.html
@@ -0,0 +1,32 @@
+<!-- https://oostens.me/posts/hugo-inline-spoiler-shortcode/ -->
+
+<style>
+    .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 1.0s ease, transform 0.5s ease;
+    transition-delay: 0.3s; <!-- To not accidentally reveal the spoiler when hovering over the page --> 
+    }
+</style>
+
+<span class="inline-spoiler">{{- .Inner | safeHTML -}}</span>
\ No newline at end of file