diff options
| author | crupest <crupest@outlook.com> | 2023-07-17 21:44:52 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2023-07-17 21:44:57 +0800 |
| commit | dcc80565514de8a44b50984c427a873a1779490a (patch) | |
| tree | 2e16f30872e1b74a31713326e060a0d599bc773c /docker/crupest-nginx | |
| parent | e006e3ce3a87fd122337ad00ee4fd08e58eddeea (diff) | |
| download | crupest-dcc80565514de8a44b50984c427a873a1779490a.tar.gz crupest-dcc80565514de8a44b50984c427a873a1779490a.tar.bz2 crupest-dcc80565514de8a44b50984c427a873a1779490a.zip | |
Slogan gets new animation. And color strip is now stripped.
Diffstat (limited to 'docker/crupest-nginx')
| -rw-r--r-- | docker/crupest-nginx/sites/www/index.html | 10 | ||||
| -rw-r--r-- | docker/crupest-nginx/sites/www/src/main.js | 53 | ||||
| -rw-r--r-- | docker/crupest-nginx/sites/www/src/style.css | 35 |
3 files changed, 53 insertions, 45 deletions
diff --git a/docker/crupest-nginx/sites/www/index.html b/docker/crupest-nginx/sites/www/index.html index f416232..28adab1 100644 --- a/docker/crupest-nginx/sites/www/index.html +++ b/docker/crupest-nginx/sites/www/index.html @@ -10,9 +10,13 @@ </head> <body> - <div id="color-strip-container"></div> - <div id="slogan" class="good"> - <span class="slogan-text">The world is full of pain, but we can fix it with love!</span> + <div class="slogan-container" data-slogan-emotion="happy"> + <div class="slogan happy"> + <span class="slogan-text">🙃The world is full of pain, but we can fix it with love!</span> + </div> + <div class="slogan angry"> + <span class="slogan-text">😡The world is a piece of shit, so let's make it a little better!</span> + </div> </div> <article id="main-article"> <h1 id="title">Hello! This is crupest.</h1> diff --git a/docker/crupest-nginx/sites/www/src/main.js b/docker/crupest-nginx/sites/www/src/main.js index 5488581..04d7b6b 100644 --- a/docker/crupest-nginx/sites/www/src/main.js +++ b/docker/crupest-nginx/sites/www/src/main.js @@ -1,39 +1,40 @@ import "./style.css"; -const colorStripContainer = document.getElementById("color-strip-container"); +const happy = "happy"; +const angry = "angry"; -const colorStripText = "FANCYSTRIP"; - -for (let i = 0; i < 10; i++) { - const colorStripBlock = document.createElement("span"); - - const hsl = `hsl(${i * 36}, 100%, 50%)`; - colorStripBlock.classList.add("color-strip-block"); - colorStripBlock.style.backgroundColor = hsl; - colorStripBlock.textContent = colorStripText[i]; - colorStripContainer.appendChild(colorStripBlock); +function emotionOpposite(emotion) { + if (emotion === happy) { + return angry; + } else if (emotion === angry) { + return happy; + } } -/** @type {HTMLDivElement} */ -const sloganElement = document.querySelector("#slogan"); -const sloganTextElement = document.querySelector("#slogan .slogan-text"); +function emotionElement(emotion) { + return document.querySelector(`.slogan.${emotion}`); +} -/** @type {"good" | "bad"} */ -let sloganState = "good"; -const slogans = { - "good": sloganTextElement.textContent, - "bad": "The world is a piece of shit, so let's make it a little better!" +function emotionElementHeight(emotion) { + return emotionElement(emotion).clientHeight; } -function toggleSlogan() { - const newState = sloganState === "good" ? "bad" : "good"; - sloganElement.classList.remove(sloganState) - sloganElement.classList.add(newState); - sloganTextElement.textContent = slogans[newState]; - sloganState = newState; +function setBodyPaddingForEmotion(emotion) { + document.body.style.paddingTop = `${emotionElementHeight(emotion)}px`; } -sloganElement.addEventListener("click", toggleSlogan); +setBodyPaddingForEmotion(happy); + +/** @type {HTMLDivElement} */ +const sloganContainer = document.querySelector(".slogan-container") + +for (const emotion of [happy, angry]) { + emotionElement(emotion).addEventListener("click", () => { + const opposite = emotionOpposite(emotion); + sloganContainer.dataset.sloganEmotion = opposite; + setBodyPaddingForEmotion(opposite); + }); +} document.addEventListener("DOMContentLoaded", async () => { diff --git a/docker/crupest-nginx/sites/www/src/style.css b/docker/crupest-nginx/sites/www/src/style.css index 445c783..2dbf0fb 100644 --- a/docker/crupest-nginx/sites/www/src/style.css +++ b/docker/crupest-nginx/sites/www/src/style.css @@ -6,6 +6,7 @@ body { width: 100%; margin: 0; box-sizing: border-box; + transition: padding-top 1s; } #main-article { @@ -18,36 +19,38 @@ body { } } -#color-strip-container { +.slogan-container { width: 100%; - height: 36px; + position: fixed; + top: 0; } -.color-strip-block { - display: inline-block; - width: 10%; - height: 100%; - line-height: 36px; - vertical-align: middle; - text-align: center; - color: white; -} - -#slogan { +.slogan { width: 100%; - text-align: center; padding: 0.5em 1em; + text-align: center; box-sizing: border-box; + position: absolute; + transform: translateY(-100%); + transition: transform 1s; } -#slogan.good { +.slogan.happy { background-color: dodgerblue; } -#slogan.bad { +.slogan.angry { background-color: orangered; } +.slogan-container[data-slogan-emotion="happy"] .slogan.happy { + transform: translateY(0); +} + +.slogan-container[data-slogan-emotion="angry"] .slogan.angry { + transform: translateY(0); +} + .slogan-text { display: inline-block; text-align: initial; |