1 files changed, 37 insertions, 27 deletions

diff --git a/static/skeleton.css b/static/skeleton.css
index bd68c93..6526c29 100644
--- a/static/skeleton.css
+++ b/static/skeleton.css
@@ -1,10 +1,10 @@
 body {
-  background: #fdf5ff;
-  color: #0f070f;
+  background: var(--clr-background);
+  color: var(--clr-foreground);
   margin: 0;
   padding: 0;
-  font-family: "DM Sans", sans-serif;
-  font-size: 12pt;
+  font-family: var(--font-family);
+  font-size: var(--font-normal-size);
   display: grid;
   grid-template-rows: max-content 1fr;
   justify-items: center;
@@ -14,12 +14,12 @@ body {
 }
 
 header {
-  background: #3b005e;
-  color: white;
+  background: var(--clr-primary);
+  color: var(--clr-foreground-on-primary);
   position: sticky;
   top: 0;
-  padding: 8px;
-  margin-bottom: 8px;
+  padding: var(--spacing-single);
+  margin-bottom: var(--spacing-single);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,7 +32,7 @@ header {
 }
 
 nav {
-  width: min(800px, 100%);
+  width: min(900px, 100%);
   height: 32px;
   box-sizing: border-box;
   display: grid;
@@ -48,7 +48,7 @@ nav {
     grid-template-columns: 1fr max-content;
     align-items: center;
     justify-self: end;
-    gap: 8px;
+    gap: var(--spacing-single);
   }
 
   ul {
@@ -58,42 +58,49 @@ nav {
     > li {
       display: inline;
       > .navlink {
-        border-radius: 4px;
-        background: #fff3;
-        padding: 4px 8px;
-        color: white;
+        border-radius: var(--spacing-half); /* --border-radius ???? */
+        background: var(--clr-lighter-primary);
+        padding: var(--spacing-half) var(--spacing-single);
+        color: var(--clr-foreground-on-primary);
         text-decoration: none;
+        user-select: none;
         &.disabled {
           opacity: 0.6;
         }
       }
     }
+    @media (width < 600px) {
+      max-width: 0;
+      max-height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
   }
   img.avatar {
-    width: 32px;
+    width: var(--icon-size);
     aspect-ratio: 1;
   }
 }
 
 ul.sideNavigation {
-  border: 1px solid #3334;
-  border-radius: 8px;
-  margin: 16px;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  margin: var(--spacing-double);
   padding: 0;
-  background: #f8e9ff5e;
+  background: var(--clr-panel-background);
   list-style: none;
   > li a {
     display: grid;
     grid-template-columns: max-content 1fr max-content;
     align-items: center;
     justify-content: start;
-    padding: 16px;
-    gap: 16px;
+    padding: var(--spacing-double);
+    gap: var(--spacing-double);
     color: inherit;
     text-decoration: none;
   }
   > li:not(:last-child) {
-    border-bottom: 1px solid #3334;
+    border-bottom: var(--border);
   }
 }
 
@@ -109,20 +116,23 @@ main {
     height: max-content;
   }
   @media (width < 1300px) {
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
+    #leftPane,
+    #rightPane {
+      max-width: 0;
+      visibility: hidden;
+    }
   }
 }
 
 h1 {
-  margin: 32px 16px;
+  margin: var(--spacing-quadruple) var(--spacing-double);
   padding: 0;
 }
 
 hr {
   border: none;
-  border-top: 1px solid #5554;
-  margin: 0px 16px;
+  border-top: var(--border);
+  margin: 0 var(--spacing-double);
 }
 
 .placeholder {