From 00a841d83aeb4fa657d9dbfee58ac9b36eee3382 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrew@alee14.me>
Date: Mon, 15 Dec 2025 23:54:24 -0500
Subject: Converted slideshow to react, more shifter progress

---
 src/styles/shifter.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++---
 src/styles/window.css  | 27 ++++++++++++++++++++
 2 files changed, 91 insertions(+), 4 deletions(-)

(limited to 'src/styles')

diff --git a/src/styles/shifter.css b/src/styles/shifter.css
index f86bfba..f245ab2 100644
--- a/src/styles/shifter.css
+++ b/src/styles/shifter.css
@@ -1,3 +1,33 @@
+@media (prefers-color-scheme: dark) {
+    .window a {
+        color: var(--dark-button-text);
+    }
+
+    .sidebar-button:hover {
+        background-color: var(--dark-button-hover);
+    }
+
+    .sidebar-button:active {
+        box-shadow: inset 0 0 0 1px var(--dark-button-text);
+        color: var(--dark-button-text);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .window a {
+        color: var(--light-button-text);
+    }
+
+    .sidebar-button:hover {
+        background-color: var(--light-button-hover);
+    }
+
+    .sidebar-button:active {
+        box-shadow: inset 0 0 0 1px var(--light-button-text);
+        color: var(--light-button-text);
+    }
+}
+
 .draggable {
     position: absolute;
     top: 10px;
@@ -11,28 +41,30 @@
 }
 
 .sidebar {
+    font-family: Cambria, serif;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
 .sidebar-content {
+    padding-bottom: 200px;
     display: flex;
     flex-direction: column;
-    padding: 0 20px;
     border: 1px solid;
 }
 
 .shifter-body {
-    margin: 1em;
+    margin-left: 10px;
+    margin-right: 10px;
     width: 600px;
     height: 300px;
 }
 
-.shifter-button {
+.sidebar-button {
     font-weight: bold;
     font-style: italic;
-    border: 1px solid;
+    padding: 3px 10px;
 }
 
 .shifter-window-sidebar {
@@ -44,3 +76,31 @@
     display: flex;
     flex-direction: column;
 }
+
+.shifter-welcome h1 {
+    font-size: 1.6em;
+    margin: 0;
+}
+
+.shifter-welcome p {
+    font-size: 0.9em;
+}
+
+.shifter-codepoints h2 {
+    font-size: 1.2em;
+    margin: 0;
+}
+
+.shifter-codepoints p {
+    font-size: 0.9em;
+}
+
+.shifter-button {
+    padding: 6px 12px;
+    border: 1px solid;
+}
+
+.sep {
+    border-top: 1px solid;
+    background-color: white;
+}
diff --git a/src/styles/window.css b/src/styles/window.css
index 8718330..52de268 100644
--- a/src/styles/window.css
+++ b/src/styles/window.css
@@ -13,6 +13,33 @@
     font-weight: 400;
 }
 
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/Cambria-01.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/cambriab.woff2') format('woff2');
+    font-style: normal;
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/cambriai.woff2') format('woff2');
+    font-style: italic;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: Cambria;
+    src: url('/assets/fonts/cambria/cambriaz.woff2') format('woff2');
+    font-style: italic;
+    font-weight: bold;
+}
 
 :root {
     --titlebar-colour: #808080;
-- 
cgit v1.2.3