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) {