tcg/build/style.css

@font-face {
  src: url("/assets/fonts/04b24.ttf");
  font-display: swap;
  font-family: "04b24";
  font-style: normal;
  font-weight: 400;
}

/* basic colours */

:root {
  color-scheme: light dark;
}

/* 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 CanvasText;
  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 CanvasText;
  padding: 5px;
}

@media (max-width: 800px) {
  body {
    display: block;
  }
  body > * {
    border-left: none !important;
    border-bottom: 4px solid CanvasText;
  }
  body > aside {
    display: none;
  }
}

table.decktable {
  display: inline-block;
  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 {
  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;
}

h2.collectingheader {
  position: sticky;
  top: 0;
  background-color: Canvas;
}

/* portfolios */
a:has(div.foliocase) {
  text-decoration: none;
}

div.foliocase {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

table.portfolio {
  letter-spacing: 0px;
  font-family: "04b24", sans-serif;
  background-color: black;
  width: 111px;
  height: 75px;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-transform: lowercase;
  white-space: nowrap;
  font-size: 8px;
  color: white;
  /* filter: contrast(1); */
}

table.portfolio tr:last-of-type {
  text-align: right;
}

table.portfolio.palette {
  background: url("/assets/portfolio/palette.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.red {
  background: url("/assets/portfolio/red.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.orange {
  background: url("/assets/portfolio/orange.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.yellow {
  background: url("/assets/portfolio/yellow.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.green {
  background: url("/assets/portfolio/green.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.blue {
  background: url("/assets/portfolio/blue.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.purple {
  background: url("/assets/portfolio/purple.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.brown {
  background: url("/assets/portfolio/brown.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio.gray {
  background: url("/assets/portfolio/gray.png");
  background-repeat: no-repeat;
  background-size: cover;
}

table.portfolio td {
  overflow-x: hidden;
}

table.portfolio.palette td.deck1 {
  color: #ff2424;
}

table.portfolio.palette td.deck2 {
  color: #ff890d;
}

table.portfolio.palette td.deck3 {
  color: #f6d600;
}

table.portfolio.palette td.deck4 {
  color: #3bc803;
}

table.portfolio.palette td.deck5 {
  color: #1798ea;
}

table.portfolio.palette td.deck6 {
  color: #e300f7;
}

table.portfolio.palette td.deck7 {
  color: #b57a5e;
}

table.portfolio.palette td.deck8 {
  color: #8c8989;
}

table.portfolio.red td.deck1 {
  color: rgb(164,1,1);
}

table.portfolio.red td.deck2 {
  color: rgb(196,2,2);
}

table.portfolio.red td.deck3 {
  color: rgb(210,30,21);
}

table.portfolio.red td.deck4 {
  color: rgb(246,25,25);
}

table.portfolio.red td.deck5 {
  color: rgb(244,57,48);
}

table.portfolio.red td.deck6 {
  color: rgb(222,86,79);
}

table.portfolio.red td.deck7 {
  color: rgb(241,149,145);
}

table.portfolio.red td.deck8 {
  color: rgb(255,196,196);
}

table.portfolio.orange td.deck1 {
  color: rgb(253,107,0);
}

table.portfolio.orange td.deck2 {
  color: rgb(255,137,51);
}

table.portfolio.orange td.deck3 {
  color: rgb(244,156,78);
}

table.portfolio.orange td.deck4 {
  color: rgb(246,165,47);
}

table.portfolio.orange td.deck5 {
  color: rgb(235,167,70);
}

table.portfolio.orange td.deck6 {
  color: rgb(244,188,109);
}

table.portfolio.orange td.deck7 {
  color: rgb(246,194,144);
}

table.portfolio.orange td.deck8 {
  color: rgb(250,225,193);
}

table.portfolio.yellow td.deck1 {
  color: rgb(187,176,0);
}

table.portfolio.yellow td.deck2 {
  color: rgb(226,215,32);
}

table.portfolio.yellow td.deck3 {
  color: rgb(246,255,0);
}

table.portfolio.yellow td.deck4 {
  color: rgb(255,216,0);
}

table.portfolio.yellow td.deck5 {
  color: rgb(249,216,33);
}

table.portfolio.yellow td.deck6 {
  color: rgb(252,225,74);
}

table.portfolio.yellow td.deck7 {
  color: rgb(250,229,115);
}

table.portfolio.yellow td.deck8 {
  color: rgb(255,241,166);
}

table.portfolio.green td.deck1 {
  color: rgb(9,140,2);
}

table.portfolio.green td.deck2 {
  color: rgb(23,167,47);
}

table.portfolio.green td.deck3 {
  color: rgb(15,204,6);
}

table.portfolio.green td.deck4 {
  color: rgb(38,220,29);
}

table.portfolio.green td.deck5 {
  color: rgb(58,249,89);
}

table.portfolio.green td.deck6 {
  color: rgb(111,243,81);
}

table.portfolio.green td.deck7 {
  color: rgb(147,247,124);
}

table.portfolio.green td.deck8 {
  color: rgb(197,255,183);
}

table.portfolio.blue td.deck1 {
  color: rgb(0,30,214);
}

table.portfolio.blue td.deck2 {
  color: rgb(14,31,255);
}

table.portfolio.blue td.deck3 {
  color: rgb(47,61,240);
}

table.portfolio.blue td.deck4 {
  color: rgb(51,102,250);
}

table.portfolio.blue td.deck5 {
  color: rgb(93,160,244);
}

table.portfolio.blue td.deck6 {
  color: rgb(58,221,250);
}

table.portfolio.blue td.deck7 {
  color: rgb(92,253,225);
}

table.portfolio.blue td.deck8 {
  color: rgb(161,255,238);
}

table.portfolio.purple td.deck1 {
  color: rgb(97,0,171);
}

table.portfolio.purple td.deck2 {
  color: rgb(135,2,238);
}

table.portfolio.purple td.deck3 {
  color: rgb(159,42,249);
}

table.portfolio.purple td.deck4 {
  color: rgb(154,50,234);
}

table.portfolio.purple td.deck5 {
  color: rgb(159,57,238);
}

table.portfolio.purple td.deck6 {
  color: rgb(154,80,238);
}

table.portfolio.purple td.deck7 {
  color: rgb(159,113,244);
}

table.portfolio.purple td.deck8 {
  color: rgb(194,161,255);
}

table.portfolio.brown td.deck1 {
  color: rgb(147,66,0);
}

table.portfolio.brown td.deck2 {
  color: rgb(123,65,17);
}

table.portfolio.brown td.deck3 {
  color: rgb(107,73,20);
}

table.portfolio.brown td.deck4 {
  color: rgb(113,86,43);
}

table.portfolio.brown td.deck5 {
  color: rgb(144,109,76);
}

table.portfolio.brown td.deck6 {
  color: rgb(178,139,101);
}

table.portfolio.brown td.deck7 {
  color: rgb(189,151,126);
}

table.portfolio.brown td.deck8 {
  color: rgb(208,184,168);
}

table.portfolio.gray td.deck1 {
  color: rgb(76,74,76);
}

table.portfolio.gray td.deck2 {
  color: rgb(108,98,100);
}

table.portfolio.gray td.deck3 {
  color: rgb(124,118,116);
}

table.portfolio.gray td.deck4 {
  color: rgb(140,126,124);
}

table.portfolio.gray td.deck5 {
  color: rgb(156,146,148);
}

table.portfolio.gray td.deck6 {
  color: rgb(180,170,172);
}

table.portfolio.gray td.deck7 {
  color: rgb(196,182,180);
}

table.portfolio.gray td.deck8 {
  color: rgb(228,222,220);
}