Converted slideshow to react, more shifter progress

1 files changed, 64 insertions, 4 deletions

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;
+}