fix scss

www/scss/_tty.scss

@@ -2,7 +2,25 @@
  *                      Type Writer Effect                     *
 /* =========================================================== */
 
-@use 'base';
+/// Replace `$search` with `$replace` in `$string`
+/// @author Kitty Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}
+
+@function sanitize-int($int) {
+  @return str-replace(#{$int}, '.', '_')
+}
 
 /* ==================
  * Graphical Container
@@ -21,7 +39,9 @@
     align-items: start;
     text-align: start;
 
-    border: 0.5ch solid base.$color-txt;
+    // XXX: TODO: for some reason this causes an error??
+    /* border: 0.5ch solid base.$color-txt; */
+    border: 0.5ch solid #ffc0cb;
     padding: 20px;
   }
 }
@@ -30,7 +50,9 @@
  * TTY Prompt
  */
 @mixin typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period) {
-  .typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{$blink-period} {
+  // XXX: TODO: relearn SCSS cause the thing below will break whenever an input is given as a float
+  // XXX: TODO: (period character interpretted as sub-attribute)
+  .typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{sanitize-int($blink-period)} {
     width: $prompt-width + $command-width; // ignore cursor (right border)
     border-right: 1ch solid; // cursor
 
@@ -40,7 +62,7 @@
 
     // typing animation then start cursor blink
     animation:
-      typing $typing-duration steps($command-width),
+      typing($prompt-width) $typing-duration steps($command-width),
       cursor-blink $blink-period steps(1, start) $typing-duration infinite alternate;
   }
 }
@@ -63,7 +85,9 @@
  * TTY Output
  */
 @mixin typing-result($typing-duration, $reveal-delay) {
-  .typing-result-#{$typing-duration}-#{$reveal-delay} {
+  // XXX: TODO: relearn SCSS cause the thing below will break whenever an input is given as a float
+  // XXX: TODO: (period character interpretted as sub-attribute)
+  .typing-result-#{$typing-duration}-#{sanitize-int($reveal-delay)} {
     visibility: hidden;
     white-space: pre-wrap; // preserve linebreaks
 

www/scss/tty_intro.scss

@@ -1,3 +1,4 @@
+@import "base";
 @import "tty";
 @include tty(2ch, 36ch, 3s, 0.6s, 0.8s);