From ea47bd1ca6bdc6ab76234269f0a0e357039d2d7f Mon Sep 17 00:00:00 2001 From: Emile Clark-Boman Date: Fri, 1 Aug 2025 20:17:19 +1000 Subject: [PATCH] fixed typing-prompt wrapped around typing-result + fixed loooong cursor --- www/index.html | 19 ++++++++----------- www/typing.css | 46 ++++++++++++++++++++-------------------------- 2 files changed, 28 insertions(+), 37 deletions(-) diff --git a/www/index.html b/www/index.html index 2f8937e..5e8dd2e 100644 --- a/www/index.html +++ b/www/index.html @@ -5,19 +5,16 @@
-
-
- -
- $  -
- Do butterflies cry when they're sad? -
-
-
+
+ +
+ $ Do butterflies cry when they're sad? +
+ +
Segmentation fault (core dumped)
+
diff --git a/www/typing.css b/www/typing.css index 4c80523..7fbd0fe 100644 --- a/www/typing.css +++ b/www/typing.css @@ -7,60 +7,54 @@ html, body { .centered { position: absolute; inset: 0 0 0 0; - margin: auto; - + display: flex; - justify-content: center; - align-content: center; - align-items: center; } .heading { font-family: monospace; font-size: 2em; font-weight: bold; - color: #ac4aed; + color: #ffc0cb; /* #ac4aed */ } /* =========================================================== * * Type Writer Effect * /* =========================================================== */ -.typing-wrapper { - /* display: flex; */ - /* flex-direction: column; */ - /* text-align: center; */ - /* justify-items: flex-start; */ - /* align-items: center; */ - - width: 39ch; /* length of typing-prompt + cursor */ - - border: 3px solid #ac4aed; - padding: 20px; -} - -.typing-prompt { - display: inline-block; +#typing-wrapper { + margin: auto auto; + width: 39ch; /* prompt + command + cursor length */ text-align: start; + + border: 0.5ch solid #ffc0cb; /* #ac4aed */ + padding: 20px; + + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + align-items: start; } -.typing-effect { - width: 36ch; - animation: typing 3s steps(36), cursor-blink 1s step-end 3s infinite alternate; +#typing-prompt { + width: 38ch; /* prompt + command length */ + animation: typing 3s steps(36), cursor-blink 0.6s steps(1, start) 3s infinite alternate; white-space: nowrap; overflow: hidden; border-right: 1ch solid; } -.typing-result { +#typing-result { + /* "3.8s" means the result is shown 0.8s after typing ends */ animation: unhide 1s 3.8s forwards; visibility: hidden; } @keyframes typing { from { - width: 0 + width: 2ch /* ignore prompt width */ } }