hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
daudix
2024-09-16 01:36:47 +03:00
parent 1ea78723a9
commit f570d1dd74
12 changed files with 70 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -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)

7
content/demo/index.md
View File

@ -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.

4
content/tricks/index.md
View File

@ -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 {

10
sass/_iframe.scss
View File

@ -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;
}
}

37
sass/_media.scss
View File

@ -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;
}

8
sass/_nav.scss
View File

@ -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%;

2
sass/_post-nav.scss
View File

@ -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;

26
sass/_spoiler.scss
View File

@ -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;
}
}
}

1
sass/_variables.scss
View File

@ -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

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 182 KiB

After

Width:  |  Height:  |  Size: 178 KiB

4
templates/shortcodes/image.html
View File

@ -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 }}"

2
templates/shortcodes/video.html
View File

@ -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>