Allow setting spoiler style via shortcode, move glass shadow to a CSS variable

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `--dim-opacity` CSS variable for setting opacity of dimmed elements.
 - Add `--disabled-opacity` CSS variable for setting opacity of disabled elements.
 - Add `--hover` CSS variable for setting zoom on hover.
+- Add `--shadow-glass` CSS variable for setting shadow for glass-like elements.
 - Add `config.extra.bundled_fonts` config variable to use custom fonts instead of system.
 - Add `external` class to comment timestamp.
 - Add `h1` with page/section title by default.
@@ -80,6 +81,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Don't add `::before` pseudo element to color pickers.
 - Fix images being covered by other images in some scenarios.
 - Load auto-menu-close script if navbar sublinks are present.
+- Fix videos and iframes having rounded corners and edge highlight in fullscreen.
 
 ## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0)
 

content/demo/index.md

@@ -161,6 +161,8 @@ Available variables are:
 - `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
 - `transparent`: Removes rounded corners and shadow, useful for images with transparency.
 - `no_hover`: Removes zoom on hover.
+- `spoiler`: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.
+- `spoiler` with `solid`: Ditto, but makes the image completely hidden.
 
 ```jinja2
 {{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
@@ -176,6 +178,11 @@ Available variables are:
 <figcaption>Image with compressed version, an alt text, and without zoom on hover</figcaption>
 </figure>
 
+<figure>
+{{ image(url="https://files.catbox.moe/lk7nee.jpg", alt="Portal Gun blueprint", spoiler=true) }}
+<figcaption>Image with an alt text, hidden behind a spoiler</figcaption>
+</figure>
+
 Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g. such images will render normally in any Markdown editor, opposed to the Zola shortcodes.
 
 - `#full`: Forces image to be full-width.

content/tricks/index.md

@@ -30,7 +30,7 @@ You can make navbar have more traditional look:
 #site-nav {
     top: 0;
     margin-block-start: 0;
-    box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+    box-shadow: var(--shadow-glass);
     border-radius: 0;
     width: 100%;
     max-width: 100%;
@@ -68,7 +68,7 @@ Or you can make it sticked to top but not full-width:
 #site-nav {
     top: 0;
     margin-block-start: 0;
-    box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+    box-shadow: var(--shadow-glass);
     border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
 
     nav ul li {

sass/_iframe.scss

@@ -11,4 +11,14 @@ iframe {
 	&.vimeo-embed {
 		aspect-ratio: 16 / 9;
 	}
+
+	&:fullscreen {
+		box-shadow: none;
+		border-radius: 0;
+	}
+
+	&:-webkit-full-screen {
+		box-shadow: none;
+		border-radius: 0;
+	}
 }

sass/_media.scss

@@ -72,6 +72,33 @@ video {
 		border-radius: 0;
 		background-color: transparent;
 	}
+
+	&.spoiler,
+	&[src*="#spoiler"] {
+		opacity: var(--dim-opacity);
+		clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
+		filter: blur(1rem);
+
+		&:hover,
+		&:active {
+			opacity: 1;
+			clip-path: inset(-1rem -1rem -1rem -1rem round 0);
+			filter: none;
+		}
+
+		&.solid,
+		&[src*="#solid"] {
+			clip-path: none;
+			filter: brightness(0%) contrast(50%);
+			box-shadow: none;
+
+			&:hover,
+			&:active {
+				filter: none;
+			}
+		}
+	}
+
 }
 
 img {
@@ -117,3 +144,13 @@ img {
 a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
 	cursor: pointer;
 }
+
+video:fullscreen {
+	box-shadow: none;
+	border-radius: 0;
+}
+
+video:-webkit-full-screen {
+	box-shadow: none;
+	border-radius: 0;
+}

sass/_nav.scss

@@ -5,7 +5,7 @@
 	z-index: 999;
 	backdrop-filter: var(--blur);
 	margin: 1rem auto;
-	box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+	box-shadow: var(--edge-highlight), var(--shadow-glass);
 	border-radius: 1.625rem;
 	background-color: var(--nav-bg);
 	max-width: 90%;
@@ -29,7 +29,7 @@
 			transition: var(--transition);
 			box-shadow:
 				var(--edge-highlight),
-				0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+				var(--shadow-glass);
 			border-radius: 999px;
 			background-color: var(--nav-bg);
 			padding: 0.375rem 0.75rem;
@@ -210,7 +210,7 @@
 				backdrop-filter: var(--blur);
 				box-shadow:
 					var(--edge-highlight),
-					0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+					var(--shadow-glass);
 				border-radius: calc(var(--rounded-corner) + 0.25rem);
 				background-color: var(--nav-bg);
 				padding: 0.25rem;
@@ -338,7 +338,7 @@
 		top: calc(100% + 0.5rem);
 		left: 0;
 		backdrop-filter: var(--blur);
-		box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: calc(var(--rounded-corner) + 0.5rem);
 		background-color: var(--nav-bg);
 		width: 100%;

sass/_post-nav.scss

@@ -48,7 +48,7 @@
 		}
 
 		.nav-arrow {
-			margin-block-end: 1rem;
+			margin-block-end: 0.5rem;
 			color: var(--fg-muted-5);
 			font-weight: normal;
 			line-height: 1;

sass/_spoiler.scss

@@ -20,29 +20,3 @@ span.spoiler {
 		}
 	}
 }
-
-img.spoiler,
-img[src*="#spoiler"] {
-	opacity: var(--dim-opacity);
-	clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
-	filter: blur(1rem);
-
-	&:hover,
-	&:active {
-		opacity: 1;
-		clip-path: inset(-1rem -1rem -1rem -1rem round 0);
-		filter: none;
-	}
-
-	&.solid,
-	&[src*="#solid"] {
-		clip-path: none;
-		filter: brightness(0%) contrast(50%);
-		box-shadow: none;
-
-		&:hover,
-		&:active {
-			filter: none;
-		}
-	}
-}

sass/_variables.scss

@@ -116,6 +116,7 @@
 		// SHADOWS
 		--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
 		--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14), 0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
+		--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
 		--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03), 0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07), 0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
 
 		// STATES

templates/shortcodes/image.html

@@ -8,6 +8,8 @@
 			{% if pixels %}pixels{% endif %}
 			{% if transparent %}transparent{% endif %}
 			{% if no_hover %}no-hover{% endif %}
+			{% if spoiler %}spoiler{% endif %}
+			{% if spoiler and solid %}solid{% endif %}
 		"
 		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
 		src="{{ url_min }}"
@@ -23,6 +25,8 @@
 			{% if pixels %}pixels{% endif %}
 			{% if transparent %}transparent{% endif %}
 			{% if no_hover %}no-hover{% endif %}
+			{% if spoiler %}spoiler{% endif %}
+			{% if spoiler and solid %}solid{% endif %}
 		"
 		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
 		src="{{ url }}"

templates/shortcodes/video.html

@@ -5,6 +5,8 @@
 		{% if end %}end{% endif %}
 		{% if pixels %}pixels{% endif %}
 		{% if transparent %}transparent{% endif %}
+		{% if spoiler %}spoiler{% endif %}
+		{% if spoiler and solid %}solid{% endif %}
 	"
 	{%- if alt -%}aria-title="{{ alt }}"{%- endif -%}
 	controls src="{{ url }}"></video>