use theme classes

www/css/themes/core.css

@@ -1,3 +1,11 @@
+.theme-tty-base {
+    color: var(--theme-base);
+}
+
+.theme-tty-bg {
+    color: var(--theme-bg);
+}
+
 .theme-tty-prompt {
     color: var(--theme-tty-prompt);
 }

www/css/themes/maps/rose-pine.css

@@ -24,6 +24,6 @@ Variables:
     --theme-tty-prompt: var(--palette-rose-pine-foam);
     --theme-tty-command: var(--palette-rose-pine-iris);
     --theme-tty-warning: var(--palette-rose-pine-gold);
-    --theme-tty-errror: var(--palette-rose-pine-love);
+    --theme-tty-error: var(--palette-rose-pine-love);
     /* --theme-tty-: var(--palette-rose-pine-); */
 }

www/css/themes/themes/rose-pine-dawn.css

@@ -1,5 +1,6 @@
 @import url('../palettes/rose-pine-dawn.css');
 @import url('../maps/rose-pine.css');
+@import url('../core.css');
 
 :root {
   --theme-name: "Rosé Pine Dawn";

www/css/themes/themes/rose-pine-moon.css

@@ -1,5 +1,6 @@
 @import url('../palettes/rose-pine.css');
 @import url('../maps/rose-pine.css');
+@import url('../core.css');
 
 :root {
   --theme-name: "Rosé Pine Moon";

www/css/themes/themes/rose-pine.css

@@ -1,5 +1,6 @@
 @import url('../palettes/rose-pine.css');
 @import url('../maps/rose-pine.css');
+@import url('../core.css');
 
 :root {
   --theme-name: "Rosé Pine";

www/css/typing.css

@@ -19,22 +19,25 @@
 
 #typing-wrapper {
   margin: auto auto;
-  width: 71ch; /* prompt + command + cursor length */
+  /* width: 71ch; /* prompt + command + cursor length */
-  height: 21ch;
+  /* height: 21ch; */
   text-align: start;
 
   border: 0.5ch solid #ffc0cb; /* #ac4aed */
-  background-color: #0e0d14;
+  background-color: var(--theme-bg);
   padding: 20px;
 
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: start;
   align-content: center;
   align-items: start;
+  animation: kfs-ending 2s 10s forwards;
 }
 
 #typing-prompt {
+  color: var(--theme-tty-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;
@@ -44,6 +47,7 @@
 }
 
 #typing-result {
+  color: var(--theme-tty-warning);
   /* "4.8s" means the result is shown 1.8s after typing ends */
   animation: unhide 1s 1.8s forwards;
   visibility: hidden;
@@ -51,6 +55,7 @@
 }
 
 #typing-prompt-segfault {
+  color: var(--theme-tty-prompt);
   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;

www/index.html

@@ -8,7 +8,6 @@
     <script src="js/main.js" type="module"></script>
 
     <!-- Theming -->
-    <link type="text/css" rel="stylesheet" href="css/themes/core.css" media="all">
     <link type="text/css" rel="stylesheet" href="css/themes/themes/rose-pine.css" media="all" id="theme_css">
 
     <!-- Styling -->
@@ -24,26 +23,29 @@
       <div id="typing-wrapper">
       
         <div id="typing-prompt">
-          <span style="color: #9ccfd8;">grub></span> <span style="color: #c4a7e7;">boot</span>
+          grub> <span class="theme-tty-command">boot</span>
         </div>
         
-        <div id="typing-result" style="color: #f6c177;">
+        <div id="typing-result"> <!-- class="theme-tty-warning"> -->
           ERROR: Root device mounted successfully, but /sbin/init does not exist.<br/><br/>
 
-          <i style="color: #eb6f92;">Bailing out, you are on your own.</i><br/>
+          <i class="theme-tty-error">
-          <i style="color: #eb6f92;">Good luck</i><br/><br/>
+            Bailing out, you are on your own.<br/>
+            Good luck
+          </i><br/><br/>
 
           sh: can't access tty; job control turned off<br/><br/>
         </div>
 
         
         <div id="typing-prompt-segfault">
-          <span style="color: #9ccfd8;">[rootfs ]#</span>
+          [rootfs ]# <span class="theme-tty-command">do butterflies cry when they're sad?</span>
-          <span style="color: #c4a7e7;">do butterflies cry when they're sad?</span>
         </div>
         
         <div id="typing-result-segfault">
-          <i style="color: #eb6f92;">Segmentation fault (core dumped)</i>
+          <i class="theme-tty-error">
+            Segmentation fault (core dumped)
+          </i>
         </div>
     
       </div>