- display header image + background colour

- display level + level image
- display card showcase on index page
- add appropriate colour to deck tables
- add number of collected cards to deck tables
- add colour marker in card name text
- add event names to log
- add link to service links
- move some data to variables file

build/style.css

@@ -0,0 +1,124 @@
+/* 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);
+}
+
+/* basic layout */
+
+body {
+  display: grid;
+  margin: 0;
+  grid-template: 1fr 1fr / minmax(200px,500px) minmax(700px,1fr);
+  height: 100vh;
+}
+
+body > aside {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 1;
+  grid-row-end: 2;
+  border-bottom: 4px solid var(--linecolour);
+  padding: 5px;
+}
+
+body > nav {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 2;
+  grid-row-end: 3;
+}
+
+body > main {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  overflow: auto;
+  border-left: 4px solid var(--linecolour);
+  padding: 5px;
+}
+
+@media (max-width: 800px) {
+  body {
+    display: block;
+  }
+  body > * {
+    border-left: none !important;
+    border-bottom: 4px solid var(--linecolour) !important;
+  }
+  body > aside {
+    display: none;
+  }
+}
+
+table.decktable {
+  display: inline-block;
+  border: 1px solid var(--linecolour);
+}
+
+table.decktable.red th {
+  background-color: red;
+}
+
+table.decktable.orange th {
+  background-color: orange;
+}
+
+table.decktable.yellow th {
+  background-color: yellow;
+}
+
+table.decktable.green th {
+  background-color: green;
+}
+
+table.decktable.blue th {
+  background-color: blue;
+}
+
+table.decktable.purple th {
+  background-color: purple;
+}
+
+table.decktable.brown th {
+  background-color: brown;
+}
+
+table.decktable.gray th {
+  background-color: gray;
+}
+
+main img {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+aside {
+  background: url("/assets/header.png");
+  background-size: auto;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: var(--headbg);
+}
+
+span.cardname {
+  font-family: monospace;
+  white-space: nowrap;
+}