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