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>
<body>
<div class="centered heading">
<div class="typing-wrapper">
<div>
<!-- Comment between divs is intentional and removes implicit spacing -->
<div class="typing-prompt">
$&nbsp
</div><!--
--><div class="typing-prompt typing-effect">
Do butterflies cry when they're sad?
</div>
<div>
<div class="typing-result">
<div id="typing-wrapper">
<div id="typing-prompt">
$ Do butterflies cry when they're sad?
</div>
<div id="typing-result">
Segmentation fault (core dumped)
</div>
</div>
</div>
</body>

46
www/typing.css
View file

@ -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 */
}
}