From 0210e00c680b8c873eb7046e05cb08d3659eb1ac Mon Sep 17 00:00:00 2001
From: Emile Clark-Boman <eclarkboman@gmail.com>
Date: Tue, 3 Feb 2026 14:05:56 +1000
Subject: [PATCH 1/2] fix css/themes typos + import core.css

---
 www/css/themes/core.css                  | 8 ++++++++
 www/css/themes/maps/rose-pine.css        | 2 +-
 www/css/themes/themes/rose-pine-dawn.css | 1 +
 www/css/themes/themes/rose-pine-moon.css | 1 +
 www/css/themes/themes/rose-pine.css      | 1 +
 www/index.html                           | 1 -
 6 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/www/css/themes/core.css b/www/css/themes/core.css
index f94f237..b01cbaa 100644
--- a/www/css/themes/core.css
+++ b/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);
 }
diff --git a/www/css/themes/maps/rose-pine.css b/www/css/themes/maps/rose-pine.css
index 0a207fc..58a809b 100644
--- a/www/css/themes/maps/rose-pine.css
+++ b/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-); */
 }
diff --git a/www/css/themes/themes/rose-pine-dawn.css b/www/css/themes/themes/rose-pine-dawn.css
index bf7fb91..ec7392d 100644
--- a/www/css/themes/themes/rose-pine-dawn.css
+++ b/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";
diff --git a/www/css/themes/themes/rose-pine-moon.css b/www/css/themes/themes/rose-pine-moon.css
index 587a836..149740d 100644
--- a/www/css/themes/themes/rose-pine-moon.css
+++ b/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";
diff --git a/www/css/themes/themes/rose-pine.css b/www/css/themes/themes/rose-pine.css
index eed073f..67e205a 100644
--- a/www/css/themes/themes/rose-pine.css
+++ b/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";
diff --git a/www/index.html b/www/index.html
index e9abe03..27b7148 100644
--- a/www/index.html
+++ b/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 -->

From dc2ec07b0aa5a31c959fe4f352b35b381e6f079c Mon Sep 17 00:00:00 2001
From: Emile Clark-Boman <eclarkboman@gmail.com>
Date: Tue, 3 Feb 2026 14:06:11 +1000
Subject: [PATCH 2/2] use theme classes

---
 www/css/typing.css | 11 ++++++++---
 www/index.html     | 17 ++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/www/css/typing.css b/www/css/typing.css
index 34226b2..0dd1d88 100644
--- a/www/css/typing.css
+++ b/www/css/typing.css
@@ -19,22 +19,25 @@
 
 #typing-wrapper {
   margin: auto auto;
-  width: 71ch; /* prompt + command + cursor length */
-  height: 21ch;
+  /* width: 71ch; /* prompt + command + cursor length */
+  /* 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;
diff --git a/www/index.html b/www/index.html
index 27b7148..48d1ebf 100644
--- a/www/index.html
+++ b/www/index.html
@@ -23,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 style="color: #eb6f92;">Good luck</i><br/><br/>
+          <i class="theme-tty-error">
+            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>
-          <span style="color: #c4a7e7;">do butterflies cry when they're sad?</span>
+          [rootfs ]# <span class="theme-tty-command">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>