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

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 {