CSS updates, elucidate readme

build/style.css

@@ -1,22 +1,7 @@
 /* basic colours */
 
 :root {
-  --textcolour: black;
-  --linecolour: black;
-  --bgcolour: white;
-}
-
-@media(prefers-color-scheme: dark) {
-  :root {
-    --textcolour: white;
-    --linecolour: white;
-    --bgcolour: black;
-  }
-}
-
-* {
-  color: var(--textcolour);
-  background-color: var(--bgcolour);
+  color-scheme: light dark;
 }
 
 /* basic layout */
@@ -33,7 +18,7 @@ body > aside {
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 2;
-  border-bottom: 4px solid var(--linecolour);
+  border-bottom: 4px solid CanvasText;
   padding: 5px;
 }
 
@@ -50,7 +35,7 @@ body > main {
   grid-row-start: 1;
   grid-row-end: 3;
   overflow: auto;
-  border-left: 4px solid var(--linecolour);
+  border-left: 4px solid CanvasText;
   padding: 5px;
 }
 
@@ -60,7 +45,7 @@ body > main {
   }
   body > * {
     border-left: none !important;
-    border-bottom: 4px solid var(--linecolour) !important;
+    border-bottom: 4px solid CanvasText;
   }
   body > aside {
     display: none;
@@ -69,39 +54,52 @@ body > main {
 
 table.decktable {
   display: inline-block;
-  border: 1px solid var(--linecolour);
+  border: 1px solid CanvasText;
 }
 
 table.decktable.red th {
   background-color: red;
+  color: black;
 }
 
 table.decktable.orange th {
   background-color: orange;
+  color: black;
 }
 
 table.decktable.yellow th {
   background-color: yellow;
+  color: black;
 }
 
 table.decktable.green th {
   background-color: green;
+  color: white;
 }
 
 table.decktable.blue th {
   background-color: blue;
+  color: white;
 }
 
 table.decktable.purple th {
   background-color: purple;
+  color: white;
 }
 
 table.decktable.brown th {
   background-color: brown;
+  color: white;
 }
 
 table.decktable.gray th {
   background-color: gray;
+  color: white;
+}
+
+table.decktable.special th {
+  background: linear-gradient(90deg, hsl(0, 100%, 70%), hsl(30, 100%, 70%), hsl(60, 100%, 70%), hsl(90, 100%, 70%), hsl(120, 100%, 70%), hsl(150, 100%, 70%), hsl(180, 100%, 70%), hsl(210, 100%, 70%), hsl(240, 100%, 70%), hsl(270, 100%, 70%), hsl(300, 100%, 70%), hsl(330, 100%, 70%), hsl(360, 100%, 70%));
+  color: black;
 }
 
 main img {
@@ -130,3 +128,9 @@ img.crayon {
 table.level {
   display: inline-block;
 }
+
+h2.collectingheader {
+  position: sticky;
+  top: 0;
+  background-color: Canvas;
+}