+
+
+
+ $
+
+ Do butterflies cry when they're sad?
+
+
+
+ Segmentation fault (core dumped)
+
diff --git a/www/typing.css b/www/typing.css
index ec115aa..4c80523 100644
--- a/www/typing.css
+++ b/www/typing.css
@@ -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
+ }
+}