diff --git a/www/css/typing-merge.css b/www/css/typing-merge.css new file mode 100644 index 0000000..4e54f42 --- /dev/null +++ b/www/css/typing-merge.css @@ -0,0 +1,110 @@ +.centered { + position: absolute; + inset: 0 0 0 0; + margin: auto; + + display: flex; +} + +.heading { + font-family: monospace; + font-size: 2em; + font-weight: bold; + color: #ffc0cb; /* #ac4aed */ +} + +/* =========================================================== * + * Type Writer Effect * +/* =========================================================== */ + +#typing-wrapper { + margin: auto auto; + width: 71ch; /* prompt + command + cursor length */ + height: 21ch; + text-align: start; + + border: 0.5ch solid #ffc0cb; /* #ac4aed */ + background-color: #0e0d14; + padding: 20px; + + display: flex; + flex-direction: column; + justify-content: start; + align-content: center; + align-items: start; +} + +#typing-prompt { + width: 10ch; /* prompt + command length */ + animation: kfs-typing 0.5s steps(4), kfs-cursor-blink 1.2s steps(1, start) 0.6s forwards; + white-space: nowrap; + overflow: hidden; + border-right: 1ch solid; + margin-bottom: 0.5ch; +} + +#typing-result { + /* "4.8s" means the result is shown 1.8s after typing ends */ + animation: unhide 1s 1.8s forwards; + visibility: hidden; + white-space: nowrap; /* preserve linebreaks */ +} + +#typing-prompt-segfault { + width: 47ch; /* prompt + command length */ + /* animation: kfs-typing-segfault 3s steps(36) 2.6s, cursor-blink 0.6s steps(1, start) 3s infinite alternate; */ + animation: kfs-typing-segfault 3s steps(36) 4s forwards, cursor-blink-segfault 0.6s steps(1, start) 7.1s infinite alternate; + white-space: nowrap; + overflow: hidden; + border-right: 1ch solid; + margin-bottom: 0.5ch; + visibility: hidden; +} + +#typing-result-segfault { + /* "4.8s" means the result is shown 1.8s after typing ends */ + animation: unhide 1s 8.3s forwards; + visibility: hidden; + white-space: nowrap; /* preserve linebreaks */ +} + +@keyframes kfs-typing { + from { + width: 6ch; /* ignore prompt width */ + } +} + +@keyframes kfs-typing-segfault { + from { + width: 11ch; /* ignore prompt width */ + visibility: visible; + } + to { + visibility: visible; + } +} + +@keyframes kfs-cursor-blink { + from { + border-color: transparent; + } + 50% { + border-color: currentColor; + } + to { + border-color: transparent; + } +} + +@keyframes cursor-blink-segfault { + 50% { + border-color: transparent; + } +} + +@keyframes unhide { + to { + visibility: visible; + } +} + diff --git a/www/index.html b/www/index.html index a8d3f1c..602447c 100644 --- a/www/index.html +++ b/www/index.html @@ -1,11 +1,22 @@ - - - + + + - + + WebGL Demo + + + + + + + + + +
@@ -34,5 +45,6 @@
+ diff --git a/www/index.html.bak b/www/index.html.bak new file mode 100644 index 0000000..a8d3f1c --- /dev/null +++ b/www/index.html.bak @@ -0,0 +1,38 @@ + + + + + + + + +
+
+ +
+ grub> boot +
+ +
+ ERROR: Root device mounted successfully, but /sbin/init does not exist.

+ + Bailing out, you are on your own.
+ Good luck

+ + sh: can't access tty; job control turned off

+
+ + +
+ [rootfs ]# + do butterflies cry when they're sad? +
+ +
+ Segmentation fault (core dumped) +
+ +
+
+ + diff --git a/www/shader.html b/www/shader.html index b5d10e0..fd65714 100644 --- a/www/shader.html +++ b/www/shader.html @@ -4,11 +4,11 @@ WebGL Demo - + + + + +