Feat: Decks page.

static/css/main.css

@@ -38,14 +38,13 @@ html {
 }
 
 body {
-    background-color: var(--colour-page-background);
-    color: var(--colour-text);
+    background-color: var(--background-color);
+    color: var(--text-color);
     font-family: var(--font-family-base);
     font-family: Arial;
     padding: 0;
     margin: 0;
     border: 0;
-    background: linear-gradient(to bottom right, var(--colour-page-background-1), var(--colour-page-background-2)); /* var(--c_purple); */
     height: 100vh;
     /* max-height: 100vh;
     overflow-y: clip; */
@@ -53,6 +52,7 @@ body {
 
 * {
     margin: 0;
+    color: var(--text-color);
 }
 
 script, link {
@@ -88,7 +88,7 @@ script, link {
     width: 100%;
     align-self: center;
     font-size: 1rem;
-    color: var(--colour-text);
+    color: var(--text-color);
 }
 #pageBody > * > * {
     align-self: center;
@@ -104,7 +104,6 @@ script, link {
 
 /* Add a card effect for articles */
 .card {
-    background-color: var(--colour-text-background);
     padding: 1vh 2.5vw;
     margin: 1vh 1vw;
     display: flex;
@@ -182,7 +181,7 @@ script, link {
 
 .container-input > input,
 .container-input > textarea {
-    border: 2px solid var(--colour-accent);
+    border: 2px solid var(--border-color);
     border-radius: 0.5vh;
     padding: 1vh 1vw;
 }
@@ -205,10 +204,10 @@ li {
 
 
 :not(input,textarea,select,button).dirty {
-    background-color: var(--colour-accent);
+    background-color: var(--border-color);
 }
 input.dirty, textarea.dirty, select.dirty {
-    border-color: var(--colour-primary);
+    border-color: var(--primary-color);
 }
 
 .is-collapsed {