tcg/build/style.css

/* 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;
}

img.crayon {
  vertical-align: middle;
}

table.level {
  display: inline-block;
}