diff --git a/CHANGELOG.md b/CHANGELOG.md
index f273690..ca7f04a 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/content/demo/index.md b/content/demo/index.md
index fe07ccd..02cfec7 100644
--- a/content/demo/index.md
+++ b/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:
Image with compressed version, an alt text, and without zoom on hover
+
+{{ image(url="https://files.catbox.moe/lk7nee.jpg", alt="Portal Gun blueprint", spoiler=true) }}
+Image with an alt text, hidden behind a spoiler
+
+
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.
diff --git a/content/tricks/index.md b/content/tricks/index.md
index f600304..a021d1f 100644
--- a/content/tricks/index.md
+++ b/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 {
diff --git a/sass/_iframe.scss b/sass/_iframe.scss
index 4145bf9..0b53300 100644
--- a/sass/_iframe.scss
+++ b/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;
+ }
}
diff --git a/sass/_media.scss b/sass/_media.scss
index f876d92..3861833 100644
--- a/sass/_media.scss
+++ b/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;
+}
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 3b1a5b2..7144de9 100644
--- a/sass/_nav.scss
+++ b/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%;
diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss
index c497824..64c9059 100644
--- a/sass/_post-nav.scss
+++ b/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;
diff --git a/sass/_spoiler.scss b/sass/_spoiler.scss
index 1991995..6e4cd60 100644
--- a/sass/_spoiler.scss
+++ b/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;
- }
- }
-}
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 4ae93a9..c4a5f4b 100644
--- a/sass/_variables.scss
+++ b/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
diff --git a/screenshot.png b/screenshot.png
index e9358a3..a576c81 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index 564c2b6..2fda304 100644
--- a/templates/shortcodes/image.html
+++ b/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 }}"
diff --git a/templates/shortcodes/video.html b/templates/shortcodes/video.html
index e009bf3..aee0613 100644
--- a/templates/shortcodes/video.html
+++ b/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 }}">