From 56c84c155a57ef1299cb28b812b1524f472cc208 Mon Sep 17 00:00:00 2001 From: Emile Clark-Boman Date: Fri, 1 Aug 2025 15:06:21 +1000 Subject: [PATCH] fixed index.html centering and added segfault text --- www/index.html | 21 +++++++++++++------- www/typing.css | 53 +++++++++++++++++++++++++++++++++++++------------- 2 files changed, 54 insertions(+), 20 deletions(-) diff --git a/www/index.html b/www/index.html index 0ee99d3..2f8937e 100644 --- a/www/index.html +++ b/www/index.html @@ -4,13 +4,20 @@ -
- -
- $  -
- Do butterflies cry when they're sad? +
+
+
+ +
+ $  +
+ 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 + } +}