diff --git a/site/assets/scss/common/_global.scss b/site/assets/scss/common/_global.scss index 66620e5..1e5aabc 100644 --- a/site/assets/scss/common/_global.scss +++ b/site/assets/scss/common/_global.scss @@ -374,18 +374,6 @@ a { } } -[data-scroll]:not(.banner) { - transition: opacity 1s, transform 0.6s ease-in-out; -} -[data-scroll="in"]:not(.banner) { - opacity: 1; - transform: translateY(0); -} -[data-scroll="out"]:not(.banner) { - opacity: 0; - transform: translateY(20px); -} - .entry-content { ol, ul, dl { padding-left: 0; diff --git a/site/assets/scss/components/_scroll-out.scss b/site/assets/scss/components/_scroll-out.scss index 374eb81..6523310 100644 --- a/site/assets/scss/components/_scroll-out.scss +++ b/site/assets/scss/components/_scroll-out.scss @@ -1,15 +1,28 @@ -.content { - [data-scroll]:not(.floater) { - transition: opacity 1s, transform 0.5s; +[data-scroll] { + opacity: 0; + transform: translateY(2rem); + will-change: opacity, transform; + transition: opacity 0.5s cubic-bezier(0.215,0.61,0.355,1) 0.5s, transform 0.75s cubic-bezier(0.215,0.61,0.355,1) 0.5s; + + &.accordion-item { + transform: translate(-20%, 0); } +} + +[data-scroll="in"] { + opacity: 1; + transform: translate(0, 0); - [data-scroll="in"]:not(.floater) { - opacity: 1; - transform: translateY(0); + &.accordion-item { + transform: translate(0, 0); } +} + +[data-scroll="out"] { + opacity: 0; + transform: translateY(2rem); - [data-scroll="out"]:not(.floater) { - opacity: 0; - transform: translateY(2rem); + &.accordion-item { + transform: translate(-20%, 0); } } diff --git a/site/hugo_stats.json b/site/hugo_stats.json index 0c0bcd1..16a1195 100644 --- a/site/hugo_stats.json +++ b/site/hugo_stats.json @@ -414,6 +414,7 @@ "pt-16", "pt-2", "pt-3", + "pt-4", "pt-5", "pt-6", "pt-lg-32", diff --git a/site/layouts/index.html b/site/layouts/index.html index 64af899..4fa8c41 100644 --- a/site/layouts/index.html +++ b/site/layouts/index.html @@ -28,14 +28,14 @@
{{ .text | markdownify }}
-