From 7d0e98c1dda96d7c9b85ba3100e00363ea98d5f9 Mon Sep 17 00:00:00 2001 From: crupest Date: Wed, 19 Jul 2023 16:45:18 +0800 Subject: Yay, pretty, pretty, pretty. --- docker/crupest-nginx/sites/www/avatar.png | Bin 0 -> 12038 bytes docker/crupest-nginx/sites/www/index.html | 31 +++++----- docker/crupest-nginx/sites/www/src/main.ts | 3 +- docker/crupest-nginx/sites/www/src/style.css | 83 ++++++++++++++++++--------- 4 files changed, 75 insertions(+), 42 deletions(-) create mode 100755 docker/crupest-nginx/sites/www/avatar.png 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 Binary files /dev/null and b/docker/crupest-nginx/sites/www/avatar.png differ 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 @@
-

Hello! This is crupest.

+ +

Hello! This is crupest.

Welcome to my home page! I'm very glad to meet you here.

-

If you have something interesting to share with me, feel free to reach me via email at crupest@outlook.com or, of course, If you have something interesting to share with me, feel free to reach me via email at crupest@outlook.com or, of course, I@crupest.life. You can also fire an issue in - any repo on GitHub. Here is the link to my GitHub profile, https://github.com/crupest.

Currently this page is hosted on my own server and my own apex domain (crupest.life). You can also share this - website link, aka, https://crupest.life.

+ website link, aka, https://crupest.life.

TODOs of me grabbed from Public:

Private:

-

If you wish to deploy similar services like me, you are in the right place. Take a look at If you wish to deploy similar services like me, you are in the right place. Take a look at https://github.com/crupest/crupest and there is all you need to start with. Also, contact me if you run into some problem.

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): Promise { 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; } -- cgit v1.2.3