Yay, pretty, pretty, pretty.

4 files changed, 75 insertions, 42 deletions

diff --git a/docker/crupest-nginx/sites/www/avatar.png b/docker/crupest-nginx/sites/www/avatar.png
new file mode 100755
index 0000000..d890d8d
--- /dev/null
+++ b/docker/crupest-nginx/sites/www/avatar.png
diff --git a/docker/crupest-nginx/sites/www/index.html b/docker/crupest-nginx/sites/www/index.html
index 339d3c2..03485c5 100644
--- a/docker/crupest-nginx/sites/www/index.html
+++ b/docker/crupest-nginx/sites/www/index.html
@@ -19,16 +19,17 @@
     </div>
   </div>
   <article id="main-article">
-    <h1 id="title">Hello! This is crupest.</h1>
+    <img id="avatar" src="./avatar.png" title="my avatar" width="100" height="100">
+    <h1 id="title">Hello! This is <span id="title-name">crupest</span>.</h1>
     <section>
       <p>Welcome to my home page! I'm very glad to meet you here.</p>
-      <p>If you have something interesting to share with me, feel free to reach me via email at <a
-          href="mailto:crupest@outlook.com">crupest@outlook.com</a> or, of course, <a
+      <p>If you have something interesting to share with me, feel free to reach me via email at <a class="mono"
+          href="mailto:crupest@outlook.com">crupest@outlook.com</a> or, of course, <a class="mono"
           href="mailto:I@crupest.life">I@crupest.life</a>. You can also fire an issue in
-        any repo on GitHub. Here is the link to my GitHub profile, <a
+        any repo on GitHub. Here is the link to my GitHub profile, <a class="mono"
           href="https://github.com/crupest">https://github.com/crupest</a>.</p>
       <p>Currently this page is hosted on my own server and my own apex domain (crupest.life). You can also share this
-        website link, aka, <a href="https://crupest.life">https://crupest.life</a>.</p>
+        website link, aka, <a class="mono" href="https://crupest.life">https://crupest.life</a>.</p>
     </section>
     <section>
       <h2 id="todos">TODOs of me <span class="h-note">grabbed from <a
@@ -53,25 +54,27 @@
       <p>Public:</p>
       <ul>
         <li>
-          https://crupest.life/api: Some APIs written in <a
+          https://crupest.life/api: Some APIs written in <a class="mono"
             href="https://learn.microsoft.com/en-us/aspnet/core/introduction-to-aspnet-core" target="_blank">ASP.NET
             Core</a>.
         </li>
-        <li><a href="https://blog.crupest.life" target="_blank">https://blog.crupest.life</a>: My blogs built with <a
-            href="https://gohugo.io" target="_blank">hugo</a>.</li>
-        <li><a href="https://timeline.crupest.life" target="_blank">https://timeline.crupest.life</a>: My micro-blogs
+        <li><a class="mono" href="https://blog.crupest.life" target="_blank">https://blog.crupest.life</a>: My blogs
+          built with <a class="mono" href="https://gohugo.io" target="_blank">hugo</a>.</li>
+        <li><a class="mono" href="https://timeline.crupest.life" target="_blank">https://timeline.crupest.life</a>: My
+          micro-blogs
           with
-          my own web app <a href="https://github.com/crupest/Timeline">Timeline</a>.</li>
+          my own web app <a class="mono" href="https://github.com/crupest/Timeline">Timeline</a>.</li>
         <li><a href="https://github.crupest.life" target="_blank">https://github.crupest.life</a>: Redirect to my github
-          profile, aka, <a href="https://github.com/crupest">https://github.com/crupest</a>.</li>
+          profile, aka, <a class="mono" href="https://github.com/crupest">https://github.com/crupest</a>.</li>
       </ul>
       <p>Private:</p>
       <ul>
-        <li><a href="https://code.crupest.life" target="_blank">https://code.crupest.life</a>: Browser based vscode with
-          <a href="https://github.com/coder/code-server" target="_blank">code-server</a>.
+        <li><a class="mono" href="https://code.crupest.life" target="_blank">https://code.crupest.life</a>: Browser
+          based vscode with
+          <a class="mono" href="https://github.com/coder/code-server" target="_blank">code-server</a>.
         </li>
       </ul>
-      <p>If you wish to deploy similar services like me, you are in the right place. Take a look at <a
+      <p>If you wish to deploy similar services like me, you are in the right place. Take a look at <a class="mono"
           href="https://github.com/crupest/crupest" target="_blank">https://github.com/crupest/crupest</a> and there is
         all you need to start with. Also, contact me if you run into some problem.</p>
     </section>
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;
 }