idk?

www/css-old/shader-style.css

@@ -0,0 +1,8 @@
+.gl-canvas-bg {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}

www/css-old/typing-long.css

@@ -0,0 +1,72 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  background-color: #0e0d14;
+}
+
+.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: 13ch; /* 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-prompt {
+  width: 12ch; /* prompt + command length */
+  animation: typing 3s steps(10), cursor-blink 0.6s steps(1, start) 3s infinite alternate;
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 1ch solid;
+}
+
+#typing-result {
+  /* "3.8s" means the result is shown 0.8s after typing ends */
+  animation: unhide 1s 3.8s forwards;
+  visibility: hidden;
+  white-space: pre-wrap; /* preserve linebreaks */
+}
+
+@keyframes typing {
+  from {
+    width: 5ch /* ignore prompt width */
+  }
+}
+    
+@keyframes cursor-blink {
+  50% {
+    border-color: transparent
+  }
+}
+
+@keyframes unhide {
+  to {
+    visibility: visible
+  }
+}

www/css-old/typing.css

@@ -0,0 +1,74 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  background-color: #0e0d14;
+}
+
+.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: 39ch; /* prompt + command + cursor length */
+  height: 10ch;
+  text-align: start;
+
+  border: 0.5ch solid #ffc0cb; /* #ac4aed */
+  padding: 20px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-content: center;
+  align-items: start;
+}
+
+#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;
+  margin-bottom: 0.5ch;
+}
+
+#typing-result {
+  /* "1.8s" means the result is shown 1.8s after typing ends */
+  animation: unhide 1s 4.8s forwards;
+  visibility: hidden;
+  /* white-space: pre-wrap; /* preserve linebreaks */ */
+}
+
+@keyframes typing {
+  from {
+    width: 2ch /* ignore prompt width */
+  }
+}
+    
+@keyframes cursor-blink {
+  50% {
+    border-color: transparent
+  }
+}
+
+@keyframes unhide {
+  to {
+    visibility: visible
+  }
+}

www/css-old/typing2.css

@@ -0,0 +1,114 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  background-color: #0e0d14;
+}
+
+.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 */
+  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;
+  }
+}