diff options
| author | Mathias Magnusson <mathias@magnusson.space> | 2023-12-11 00:39:19 +0100 |
|---|---|---|
| committer | Mathias Magnusson <mathias@magnusson.space> | 2023-12-11 00:39:19 +0100 |
| commit | fdaf85a43f6f2ad98c5004bfeeddfd1a92097fb3 (patch) | |
| tree | 5baccd921cbf3e2ac32684e50b886ba1e92e6372 /jobs/hövd.ing/index.html | |
| parent | fc50463cbf9d561a5c482df2e5807121494ca88c (diff) | |
| download | garm-fdaf85a43f6f2ad98c5004bfeeddfd1a92097fb3.tar.gz | |
Add hövd.ing site
Diffstat (limited to 'jobs/hövd.ing/index.html')
| -rw-r--r-- | jobs/hövd.ing/index.html | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/jobs/hövd.ing/index.html b/jobs/hövd.ing/index.html new file mode 100644 index 0000000..1e26535 --- /dev/null +++ b/jobs/hövd.ing/index.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html lang="sv"> +<head> + <meta charset="utf-8" /> + <title>Hövding</title> + <style> + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + body { + display: grid; + place-items: center; + min-height: 100vh; + font-family: monospace; + } + span { + position: relative; + } + .invisible { + display: none; + } + </style> +</head> +<body> + <h1>Hövding (det är jag alltså)</h1> + + <script> + const el = document.querySelector("h1"); + const text = el.textContent; + el.innerHTML = ""; + const spans = new Array(text.length).fill().map((_, i) => { + const span = document.createElement("span"); + span.innerText = text[i]; + span.classList.add("invisible"); + el.appendChild(span); + return span; + }); + const underscore = document.createElement("span"); + const underscoreInner = document.createElement("span"); + underscoreInner.innerText = "_"; + underscore.appendChild(underscoreInner); + underscore.style.position = "relative"; + underscoreInner.style.position = "absolute"; + el.appendChild(underscore); + let i = 0; + function next() { + spans[i].classList.remove("invisible"); + + i++; + if (i >= spans.length) { + setTimeout(removeCursor, 200); + } else { + setTimeout(next, Math.ceil(Math.random() * 200)); + } + } + next(); + function removeCursor() { + underscore.classList.add("invisible"); + } + </script> +</body> +</html> |