gch3n/val-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: progressive enhancement - content visible before JS loads
All checks were successful
Deploy / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Chen Gu
2026-04-24 01:26:01 +08:00
parent 88474e9ccc
commit b06546c674
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
themes/dreamscape/assets/css/dreamscape.css
View File

@@ -303,16 +303,19 @@ main {
.article-body p {
margin-bottom: 1.8rem;
text-align: justify;
}
.js-ready .article-body p {
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}
.article-body p:nth-child(1) { animation-delay: 0.1s; }
.article-body p:nth-child(2) { animation-delay: 0.2s; }
.article-body p:nth-child(3) { animation-delay: 0.3s; }
.article-body p:nth-child(4) { animation-delay: 0.4s; }
.article-body p:nth-child(5) { animation-delay: 0.5s; }
.article-body p:nth-child(n+6) { animation-delay: 0.6s; }
.js-ready .article-body p:nth-child(1) { animation-delay: 0.1s; }
.js-ready .article-body p:nth-child(2) { animation-delay: 0.2s; }
.js-ready .article-body p:nth-child(3) { animation-delay: 0.3s; }
.js-ready .article-body p:nth-child(4) { animation-delay: 0.4s; }
.js-ready .article-body p:nth-child(5) { animation-delay: 0.5s; }
.js-ready .article-body p:nth-child(n+6) { animation-delay: 0.6s; }
.article-body h2 {
font-size: 1.5rem;
@@ -478,12 +481,17 @@ main {
}
.reveal {
opacity: 0;
transform: translateY(30px);
opacity: 1;
transform: none;
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
.js-ready .reveal {
opacity: 0;
transform: translateY(30px);
}
.js-ready .reveal.visible {
opacity: 1;
transform: translateY(0);
}