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

That's no blurhash, that's blurnail!

Browse Source
This commit is contained in:
daudix
2024-09-17 22:12:32 +03:00
parent 6b2b42c471
commit 0e24fcd190
5 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/demo/index.md
View File

@ -198,7 +198,7 @@ Alternatively, you can append the following URL anchors. It can be more handy in
<br />
<figure>
![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)
[![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)](https://containertoolbx.org)
<figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption>
</figure>

6
sass/_article-list.scss
View File

@ -321,13 +321,13 @@
padding-block-start: 0.5rem;
}
.blurhash {
.blurnail {
position: absolute;
opacity: var(--dim-opacity);
z-index: -2;
filter: var(--blurhash-blur);
filter: var(--blurnail-blur);
inset: 0;
background-image: var(--blurhash);
background-image: var(--blurnail);
background-position: center;
background-size: cover;
}

12
sass/_article.scss
View File

@ -84,12 +84,24 @@
transform-origin: bottom right;
animation: toc-dropdown-open var(--transition);
:root[dir*="rtl"] & {
transform-origin: bottom left;
animation: toc-dropdown-open-rtl var(--transition);
}
@keyframes toc-dropdown-open {
from {
transform: scale(50%) translate(1rem, 1rem);
opacity: 0;
}
}
@keyframes toc-dropdown-open-rtl {
from {
transform: scale(50%) translate(-1rem, 1rem);
opacity: 0;
}
}
}
summary {

4
sass/_variables.scss
View File

@ -34,7 +34,7 @@
--yellow-fg: rgb(248 228 92);
// FILTERS
--blurhash-blur: brightness(25%) blur(1rem);
--blurnail-blur: brightness(25%) blur(1rem);
color-scheme: dark;
}
@ -73,7 +73,7 @@
// FILTERS
--blur: saturate(180%) blur(0.75rem);
--blurhash-blur: contrast(25%) brightness(175%) blur(1rem);
--blurnail-blur: contrast(25%) brightness(175%) blur(1rem);
// FONT SIZES
--font-size-xx-small: 0.625rem;

4
templates/partials/articles.html
View File

@ -73,8 +73,8 @@
</div>
{%- endif -%}
{%- if page.extra.banner -%}
{%- set blurhash = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
<div class="blurhash" style="--blurhash: url('{{ blurhash.url }}')"></div>
{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
<div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div>
{%- endif -%}
</article>