emileclarkb/dobutterfliescry.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed typing-prompt wrapped around typing-result + fixed loooong cursor

Browse source
This commit is contained in:
Emile Clark-Boman 2025-08-01 20:17:19 +10:00
parent 5edf6b84a3
commit ea47bd1ca6
2 changed files with 28 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

19
www/index.html
View file

@ -5,19 +5,16 @@
</head> </head>
<body> <body>
<div class="centered heading"> <div class="centered heading">
<div class="typing-wrapper"> <div id="typing-wrapper">
<div>
<!-- Comment between divs is intentional and removes implicit spacing --> <div id="typing-prompt">
<div class="typing-prompt"> $ Do butterflies cry when they're sad?
$&nbsp </div>
</div><!--
--><div class="typing-prompt typing-effect"> <div id="typing-result">
Do butterflies cry when they're sad?
</div>
<div>
<div class="typing-result">
Segmentation fault (core dumped) Segmentation fault (core dumped)
</div> </div>
</div> </div>
</div> </div>
</body> </body>

46
www/typing.css
View file

@ -7,60 +7,54 @@ html, body {
.centered { .centered {
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
margin: auto; margin: auto;
display: flex; display: flex;
justify-content: center;
align-content: center;
align-items: center;
} }
.heading { .heading {
font-family: monospace; font-family: monospace;
font-size: 2em; font-size: 2em;
font-weight: bold; font-weight: bold;
color: #ac4aed; color: #ffc0cb; /* #ac4aed */
} }
/* =========================================================== * /* =========================================================== *
* Type Writer Effect * * Type Writer Effect *
/* =========================================================== */ /* =========================================================== */
.typing-wrapper { #typing-wrapper {
/* display: flex; */ margin: auto auto;
/* flex-direction: column; */ width: 39ch; /* prompt + command + cursor length */
/* 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;
text-align: start; 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 { #typing-prompt {
width: 36ch; width: 38ch; /* prompt + command length */
animation: typing 3s steps(36), cursor-blink 1s step-end 3s infinite alternate; animation: typing 3s steps(36), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
border-right: 1ch solid; 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; animation: unhide 1s 3.8s forwards;
visibility: hidden; visibility: hidden;
} }
@keyframes typing { @keyframes typing {
from { from {
width: 0 width: 2ch /* ignore prompt width */
} }
} }