begin shift to scss

www/css.bak/typing.css

@@ -50,6 +50,7 @@ html, body {
   /* "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 {

www/scss/_base.scss

@@ -0,0 +1,23 @@
+$color-bg:  #0e0d14; /* background */
+$color-txt: #ffc0cb; /* text       */  /* #ac4aed */
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background-color: $color-bg;
+}
+
+.centered {
+  position: absolute;
+  inset: 0 0 0 0;
+  margin: auto;
+
+  display: flex;
+}
+
+.heading {
+  font-family: monospace;
+  font-size: 2em;
+  font-weight: bold;
+  color: $color-txt; 
+}

www/scss/tty.scss

@@ -0,0 +1,89 @@
+/* =========================================================== *
+ *                      Type Writer Effect                     *
+/* =========================================================== */
+
+@use 'base';
+
+/* ==================
+ * Graphical Container
+ */
+@mixin typing-wrapper($prompt-width, $command-width) {
+  .typing-wrapper-#{$prompt-width}-#{$command-width} {
+    // wrapper shape + center position
+    margin: auto auto;
+    width: $prompt-width + $command-width + 1ch; // +1 for cursor width
+  
+    // flexbox alignments
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: start;
+    text-align: start;
+
+    border: 0.5ch solid base.$color-txt;
+    padding: 20px;
+  }
+}
+
+/* ==================
+ * TTY Prompt
+ */
+@mixin typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period) {
+  .typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{$blink-period} {
+    width: $prompt-width + $command-width; // ignore cursor (right border)
+    border-right: 1ch solid; // cursor
+
+    // hide what the animation hasn't shown yet
+    white-space: nowrap;
+    overflow: hidden;
+
+    // typing animation then start cursor blink
+    animation:
+      typing $typing-duration steps($command-width),
+      cursor-blink $blink-period steps(1, start) $typing-duration infinite alternate;
+  }
+}
+
+@mixin typing($prompt-width) {
+  @keyframes typing-#{$prompt-width} {
+    from {
+      width: $prompt-width // ignore effect for prompt
+    }
+  }
+}
+    
+@keyframes cursor-blink {
+  50% {
+    border-color: transparent
+  }
+}
+
+/* =====================
+ * TTY Output
+ */
+@mixin typing-result($typing-duration, $reveal-delay) {
+  .typing-result-#{$typing-duration}-#{$reveal-delay} {
+    visibility: hidden;
+    white-space: pre-wrap; // preserve linebreaks
+
+    // show result once typing ends + delay
+    animation:
+      unhide-result 1s ($typing-duration + $reveal-delay) forwards; 
+  }
+}
+
+@keyframes unhide-result {
+  to {
+    visibility: visible
+  }
+}
+
+/* =========================
+ * Intended Public Interface
+ */
+@mixin tty($prompt-width, $command-width, $typing-duration: 3s, $blink-period: 0.6s, $reveal-delay: 0.8s) {
+  @include typing-wrapper($prompt-width, $command-width);
+  @include typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period);
+  @include typing-result($typing-duration, $reveal-delay);
+}