index : paprika

A blogging platform written in Rust for Cloudflare Workers, integrated with Standard Notes

diff options
context:
space:
mode:
authorPeter Cai <[email protected]>2020-04-14 16:47:27 +0800
committerPeter Cai <[email protected]>2020-04-14 16:47:27 +0800
commitdf6a1affdb556013849e3ce74f3eaaf4059f2949 (patch)
tree25e8c203cf6a691ffba61bc86c91a1ae0a25d381
parent0dbd4cbf087f1e30060b677e678659019a12f4b9 (diff)
downloadpaprika-df6a1affdb556013849e3ce74f3eaaf4059f2949.tar.gz
theme: animate page entrance using css animation instead of transition
the transition trick relies on the browser loading the css after the html, which may not be true.
-rw-r--r--theme/default/inline_style.hbs1
-rw-r--r--theme/default/static/style.css15
2 files changed, 14 insertions, 2 deletions
diff --git a/theme/default/inline_style.hbs b/theme/default/inline_style.hbs
index 1a99c15..a010477 100644
--- a/theme/default/inline_style.hbs
+++ b/theme/default/inline_style.hbs
@@ -6,7 +6,6 @@
/* Do not show content until the main CSS is loaded (which overrides opacity) */
.page-wrapper {
opacity: 0;
- transition: opacity 0.5s ease-in-out;
}
.loading-progress {
diff --git a/theme/default/static/style.css b/theme/default/static/style.css
index 892aea6..46efaa6 100644
--- a/theme/default/static/style.css
+++ b/theme/default/static/style.css
@@ -18,8 +18,21 @@ html {
background-repeat: repeat;
}
+/* Animate page appearing */
.page-wrapper {
- opacity: 1 !important;
+ animation-name: appear;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+}
+
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
}
.loading-progress {