Add spoilter styles

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add fading on top/bottom of the search results container.
 - Add loading animation to "Load Comments" button.
 - Add special `switch` class for checkboxes (#70).
+- Add spoiler styles.
 - Add zoom-on-hover to custom comment emojis.
 - Return the scrollbar styling.
 - Style mentions and hashtags in comments.

content/demo/index.md

@@ -589,6 +589,38 @@ Blah blah <q>Inline Quote</q> hmm.
 
 <a class="external" href="https://example.org">Link to site</a>
 
+### Spoilers
+
+```html
+<span class="spoiler">Some spoiler</span>
+```
+
+You know, <span class="spoiler">Duckquill is a pretty dumb name.</span> I know, crazy.
+
+With `solid` class:
+
+```html
+<span class="spoiler solid">Some spoiler</span>
+```
+
+You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I know, crazy.
+
+When set on an image:
+
+```html
+<img class="spoiler" src="https://example.org/image.jpg" />
+```
+
+<img class="spoiler" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
+
+With `solid` class:
+
+```html
+<img class="spoiler solid" src="https://example.org/image.jpg" />
+```
+
+<img class="spoiler solid" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
+
 ### Buttons Dialog
 
 ```html.j2

sass/_spoiler.scss

@@ -0,0 +1,48 @@
+.spoiler {
+	filter: blur(0.25rem);
+	transition: var(--transition);
+
+	&:hover,
+	&:active {
+		filter: none;
+	}
+
+	&.solid {
+		filter: none;
+		border-radius: var(--rounded-corner-small);
+		background-color: var(--fg-muted-5);
+		color: transparent;
+
+		&:hover,
+		&:active {
+			background-color: transparent;
+			color: inherit;
+		}
+	}
+}
+
+img.spoiler {
+	opacity: var(--disabled);
+	clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
+	filter: blur(1rem);
+	transition: var(--transition-longer);
+
+	&:hover,
+	&:active {
+		opacity: 1;
+		clip-path: inset(-1rem -1rem -1rem -1rem round 0);
+		filter: none;
+	}
+
+	&.solid {
+		clip-path: none;
+		filter: brightness(0%);
+		box-shadow: none;
+		border-radius: var(--rounded-corner);
+
+		&:hover,
+		&:active {
+			filter: none;
+		}
+	}
+}

sass/style.scss

@@ -28,6 +28,7 @@
 @use "not-found";
 @use "post-nav";
 @use "pre-container";
+@use "spoiler";
 @use "statements";
 @use "table";
 @use "tags";