You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
2.3 KiB
CSS
137 lines
2.3 KiB
CSS
/* 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;
|
|
}
|