f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-06-08 00:27:58 +00:00
Code Issues Packages Releases Activity

perf(ux): improve LQIP fade in effect

Browse Source
This commit is contained in:
Cotes Chung 2023-03-21 23:47:01 +08:00
parent 7c23a4ebc5
commit 003e7b60c9
No known key found for this signature in database
GPG Key ID: 0D9E54843167A808
1 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
_sass/addon/commons.scss
View File

@ -85,13 +85,9 @@ a {
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
transition: all 0.35s ease-in-out;
&[data-src] { &[data-src] {
&.lazyloaded {
-webkit-animation: fade-in 0.4s ease-in;
animation: fade-in 0.4s ease-in;
}
&[data-lqip='true'] { &[data-lqip='true'] {
&.lazyload, &.lazyload,
&.lazyloading { &.lazyloading {
@ -105,6 +101,11 @@ img {
&.lazyloading { &.lazyloading {
background: var(--img-bg); background: var(--img-bg);
} }
&.lazyloaded {
-webkit-animation: fade-in 0.35s ease-in;
animation: fade-in 0.35s ease-in;
}
} }
&.shadow { &.shadow {
@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display';
} /* #sidebar */ } /* #sidebar */
@media (hover: hover) { @media (hover: hover) {
.card.post-preview {
transition: all 0.35s ease-in-out;
img {
transition: all 0.35s ease-in-out;
}
}
#sidebar ul > li:last-child::after { #sidebar ul > li:last-child::after {
transition: top 0.5s ease; transition: top 0.5s ease;
} }
.post-preview {
transition: background-color 0.35s ease-in-out;
}
} }
.profile-wrapper { .profile-wrapper {