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

fixed index.html centering and added segfault text

Browse source
This commit is contained in:
Emile Clark-Boman 2025-08-01 15:06:21 +10:00
parent 6991ab7641
commit 56c84c155a
2 changed files with 54 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

21
www/index.html
View file

@ -4,13 +4,20 @@
<link rel="stylesheet" href="typing.css">
</head>
<body>
<div class="centered heading typing-wrapper">
<!-- Comment between divs is intentional and removes implicit spacing -->
<div class="typing-prompt">
$&nbsp
</div><!--
--><div class="typing">
Do butterflies cry when they're sad?
<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">
Segmentation fault (core dumped)
</div>
</div>
</div>
</body>

53
www/typing.css
View file

@ -1,7 +1,21 @@
body {
html, body {
height: 100%;
margin: 0;
background-color: #0e0d14;
}
.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;
@ -9,42 +23,55 @@ body {
color: #ac4aed;
}
.centered {
margin-top: 25%; /* terrible solution... */
}
/* =========================================================== *
* Type Writer Effect *
/* =========================================================== */
.typing-wrapper {
display: flex;
text-align: center;
justify-content: center;
/* 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;
text-align: center;
text-align: start;
}
.typing {
display: inline-block;
.typing-effect {
width: 36ch;
animation: typing 3s steps(36), blink 1s step-end 3s infinite alternate;
animation: typing 3s steps(36), cursor-blink 1s step-end 3s infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 1ch solid;
}
.typing-result {
animation: unhide 1s 3.8s forwards;
visibility: hidden;
}
@keyframes typing {
from {
width: 0
}
}
@keyframes blink {
@keyframes cursor-blink {
50% {
border-color: transparent
}
}
@keyframes unhide {
to {
visibility: visible
}
}