Yay, pretty, pretty, pretty.

2 files changed, 58 insertions, 28 deletions

diff --git a/docker/crupest-nginx/sites/www/src/main.ts b/docker/crupest-nginx/sites/www/src/main.ts
index 17d7e12..13553ed 100644
--- a/docker/crupest-nginx/sites/www/src/main.ts
+++ b/docker/crupest-nginx/sites/www/src/main.ts
@@ -71,10 +71,11 @@ async function loadTodos(syncWith: Promise<unknown>): Promise<void> {
     const todosPromise = fetchTodos();
     await syncWith; // Let's wait this first.
     const todos = await todosPromise;
-    todos.forEach((item) => {
+    todos.forEach((item, index) => {
       const { status, title, closed } = item;
       const li = document.createElement("li");
       li.dataset.status = closed ? "closed" : "open";
+      li.style.animationDelay = `${index * 0.04}s`;
       // The color from api server is kind of ugly at present.
       // li.style.background = color;
       const statusSpan = document.createElement("span");
diff --git a/docker/crupest-nginx/sites/www/src/style.css b/docker/crupest-nginx/sites/www/src/style.css
index 6937051..079f7b9 100644
--- a/docker/crupest-nginx/sites/www/src/style.css
+++ b/docker/crupest-nginx/sites/www/src/style.css
@@ -1,5 +1,7 @@
 html {
   width: 100%;
+  line-height: 1.5;
+  font-family: ui-sans-serif;
 }
 
 body {
@@ -8,6 +10,10 @@ body {
   box-sizing: border-box;
 }
 
+a.mono {
+  font-family: ui-monospace;
+}
+
 .h-note {
   font-size: 0.6em;
   color: gray;
@@ -29,10 +35,11 @@ body {
   --main-article-horizontal-padding: 1em;
   --main-article-horizontal-margin-shrink: -1em;
 
+  --im-me: deepskyblue;
   --im-happy: dodgerblue;
   --im-angry: orangered;
-  --im-good: green;
-  --im-active: blue;
+  --im-good: hsl(120, 85%, 85%);
+  --im-active: hsl(20, 85%, 85%);
 }
 
 @media (min-width: 576px) {
@@ -47,9 +54,50 @@ body {
   animation: article-enter 1s;
 }
 
+#title {
+  font-size: 2em;
+}
+
+@keyframes title-name-enter {
+  from {
+    background-color: white;
+  }
+
+  to {
+    background-color: var(--im-me);
+  }
+}
+
+#title-name {
+  font-family: ui-monospace;
+  border-radius: 8px;
+  background-color: white;
+  animation: title-name-enter 3s 2s forwards;
+}
+
+@keyframes avatar-enter {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--main-article-horizontal-padding)));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+#avatar {
+  float: right;
+  transform: translateX(calc(100% + var(--main-article-horizontal-padding)));
+  animation: avatar-enter 0.5s 1s forwards;
+}
+
+
 .slogan-container {
   width: 100%;
   position: fixed;
+  z-index: 1;
   top: 0;
 }
 
@@ -92,13 +140,7 @@ body {
   padding-inline: 0;
 }
 
-#todo-container li {
-  margin: 0 var(--main-article-horizontal-margin-shrink);
-  padding: 0.6em 3em;
-  color: white;
-}
-
-@keyframes todo-enter-left {
+@keyframes todo-enter {
   from {
     opacity: 0;
     transform: translateX(-100%);
@@ -110,16 +152,11 @@ body {
   }
 }
 
-@keyframes todo-enter-right {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+#todo-container li {
+  margin: 0 var(--main-article-horizontal-margin-shrink);
+  padding: 0.25em 3em;
+  transform: translateX(-100%);
+  animation: todo-enter 1s forwards;
 }
 
 #todo-container li[data-status="closed"] {
@@ -130,14 +167,6 @@ body {
   background-color: var(--im-active);
 }
 
-#todo-container li:nth-child(odd) {
-  animation: todo-enter-left 1s;
-}
-
-#todo-container li:nth-child(even) {
-  animation: todo-enter-right 1s;
-}
-
 .friend-link {
   display: inline-block;
 }