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

53
www/typing.css
View file

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