From 0eecabb27185f9dd446a48b9b578f38d9fe623d3 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Wed, 11 Sep 2024 15:52:22 +0300
Subject: [PATCH] Allow setting spoiler styles via image URL

---
 content/demo/index.md |  4 ++++
 sass/_spoiler.scss    | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/content/demo/index.md b/content/demo/index.md
index f51dd20..318737e 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -613,6 +613,8 @@ When set on an image:
 
 <img class="spoiler" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
 
+URL anchor `#spoiler` can be used for this as well.
+
 With `solid` class:
 
 ```html
@@ -621,6 +623,8 @@ With `solid` class:
 
 <img class="spoiler solid" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
 
+URL anchor `#solid` can be used for this as well.
+
 ### Buttons Dialog
 
 ```html.j2
diff --git a/sass/_spoiler.scss b/sass/_spoiler.scss
index d380288..fcd63c7 100644
--- a/sass/_spoiler.scss
+++ b/sass/_spoiler.scss
@@ -1,4 +1,4 @@
-.spoiler {
+span.spoiler {
 	filter: blur(0.25rem);
 	transition: var(--transition);
 
@@ -21,11 +21,11 @@
 	}
 }
 
-img.spoiler {
+img.spoiler,
+img[src*="#spoiler"] {
 	opacity: var(--disabled);
 	clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
 	filter: blur(1rem);
-	transition: var(--transition-longer);
 
 	&:hover,
 	&:active {
@@ -34,11 +34,11 @@ img.spoiler {
 		filter: none;
 	}
 
-	&.solid {
+	&.solid,
+	&[src*="#solid"] {
 		clip-path: none;
 		filter: brightness(0%);
 		box-shadow: none;
-		border-radius: var(--rounded-corner);
 
 		&:hover,
 		&:active {