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 /> <br />
<figure> <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> <figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption>
</figure> </figure>

6
sass/_article-list.scss
View File

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

12
sass/_article.scss
View File

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

4
sass/_variables.scss
View File

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

4
templates/partials/articles.html
View File

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