1 files changed, 53 insertions, 0 deletions
diff --git a/sysret.org/themes/tabi-lean/sass/parts/_spoiler.scss b/sysret.org/themes/tabi-lean/sass/parts/_spoiler.scss
new file mode 100644
index 0000000..b43911b
--- /dev/null
+++ b/sysret.org/themes/tabi-lean/sass/parts/_spoiler.scss
@@ -0,0 +1,53 @@
+.spoiler-toggle {
+    display: none; // Hide the checkbox.
+}
+
+.spoiler-content {
+    display: inline-block; // Allow content to only take up its own width.
+    cursor: help; // Indicate interactive element.
+
+    .spoiler-hidden {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        filter: blur(6px);
+        user-select: none;
+
+        a {
+            pointer-events: none; // Make links unclickable.
+        }
+    }
+}
+
+.spoiler-toggle:checked + .spoiler-content {
+    .spoiler-hidden {
+        filter: none;
+        user-select: auto;
+
+        a {
+            pointer-events: auto; // Enable clicking on links when revealed.
+        }
+    }
+}
+
+.spoiler-container.fixed-blur {
+    .spoiler-content:before {
+        display: inline-block; // Block display within the inline flow.
+        filter: blur(6px);
+        content: 'SPOILER'; // Display the word "SPOILER".
+    }
+
+    .spoiler-content .spoiler-hidden {
+        display: none; // Completely hide the actual content.
+    }
+
+    .spoiler-toggle:checked + .spoiler-content {
+        &:before {
+            content: none; // Hide the word "SPOILER".
+        }
+
+        .spoiler-hidden {
+            display: inline; // Reveal the actual content.
+        }
+    }
+}