diff options
| author | crupest <crupest@outlook.com> | 2023-07-18 17:03:46 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2023-07-18 17:03:46 +0800 |
| commit | 4dfe8bdbb6405eede0eda2422417d9353ddf7747 (patch) | |
| tree | 8bf4a35c543dac2e8cd1bd30728cd9f1855a346e | |
| parent | bc845e54167018065ffc11c9df64711344625f0c (diff) | |
| download | crupest-4dfe8bdbb6405eede0eda2422417d9353ddf7747.tar.gz crupest-4dfe8bdbb6405eede0eda2422417d9353ddf7747.tar.bz2 crupest-4dfe8bdbb6405eede0eda2422417d9353ddf7747.zip | |
Fix #23.
| -rw-r--r-- | docker/crupest-nginx/sites/www/index.html | 2 | ||||
| -rw-r--r-- | docker/crupest-nginx/sites/www/src/main.js | 18 | ||||
| -rw-r--r-- | docker/crupest-nginx/sites/www/src/style.css | 14 |
3 files changed, 31 insertions, 3 deletions
diff --git a/docker/crupest-nginx/sites/www/index.html b/docker/crupest-nginx/sites/www/index.html index 28adab1..0a7a99b 100644 --- a/docker/crupest-nginx/sites/www/index.html +++ b/docker/crupest-nginx/sites/www/index.html @@ -10,7 +10,7 @@ </head> <body> - <div class="slogan-container" data-slogan-emotion="happy"> + <div class="slogan-container"> <div class="slogan happy"> <span class="slogan-text">🙃The world is full of pain, but we can fix it with love!</span> </div> diff --git a/docker/crupest-nginx/sites/www/src/main.js b/docker/crupest-nginx/sites/www/src/main.js index 04d7b6b..39d2ba8 100644 --- a/docker/crupest-nginx/sites/www/src/main.js +++ b/docker/crupest-nginx/sites/www/src/main.js @@ -23,14 +23,30 @@ function setBodyPaddingForEmotion(emotion) { document.body.style.paddingTop = `${emotionElementHeight(emotion)}px`; } -setBodyPaddingForEmotion(happy); +const sloganEmotionKey = "sloganEmotion"; + +const savedEmotion = localStorage.getItem(sloganEmotionKey) ?? happy; +if (savedEmotion !== happy && savedEmotion !== angry) { + console.error(`Invalid saved emotion: ${savedEmotion}`); +} + +setBodyPaddingForEmotion(savedEmotion); +setTimeout(() => { + document.body.style.transition = "padding-top 1s"; +}) /** @type {HTMLDivElement} */ const sloganContainer = document.querySelector(".slogan-container") +setTimeout(() => { + sloganContainer.dataset.sloganEmotion = savedEmotion; + setBodyPaddingForEmotion(savedEmotion); +}, 500); + for (const emotion of [happy, angry]) { emotionElement(emotion).addEventListener("click", () => { const opposite = emotionOpposite(emotion); + localStorage.setItem(sloganEmotionKey, opposite); sloganContainer.dataset.sloganEmotion = opposite; setBodyPaddingForEmotion(opposite); }); diff --git a/docker/crupest-nginx/sites/www/src/style.css b/docker/crupest-nginx/sites/www/src/style.css index 2dbf0fb..f23bbc0 100644 --- a/docker/crupest-nginx/sites/www/src/style.css +++ b/docker/crupest-nginx/sites/www/src/style.css @@ -6,11 +6,23 @@ body { width: 100%; margin: 0; box-sizing: border-box; - transition: padding-top 1s; +} + +@keyframes article-enter { + from { + opacity: 0; + transform: translateY(100px); + } + + to { + opacity: 1; + transform: translateY(0); + } } #main-article { padding: 0 1em; + animation: article-enter 1s; } @media (min-width: 576px) { |