204 lines
4.2 KiB
CSS
204 lines
4.2 KiB
CSS
html {
|
|
background-color: var(--gray-900);
|
|
color: var(--gray-100);
|
|
font-family: monospace, monospace;
|
|
--black: #000;
|
|
--gray-100: #f7fafc;
|
|
--gray-200: #edf2f7;
|
|
--gray-500: #a0aec0;
|
|
--gray-600: #718096;
|
|
--gray-900: #1a202c;
|
|
--blue-300: #90cdf4;
|
|
--blue-400: #63b3ed;
|
|
--blue-500: #4299e1;
|
|
--blue-600: #3182ce;
|
|
--yellow-300: #faf089;
|
|
--yellow-400: #f6e05e;
|
|
--yellow-500: #ecc94b;
|
|
--yellow-600: #d69e2e;
|
|
--yellow-700: #b7791f;
|
|
--pink-300: #fbb6ce;
|
|
--pink-400: #f687b3;
|
|
--pink-500: #ed64a6;
|
|
--pink-600: #d53f8c;
|
|
--green-300: #9ae6b4;
|
|
--green-400: #68d391;
|
|
--green-500: #48bb78;
|
|
--green-600: #38a169;
|
|
--green-700: #2f855a;
|
|
--teal-300: #81e6d9;
|
|
--teal-400: #4fd1c5;
|
|
--teal-500: #38b2ac;
|
|
--teal-600: #319795;
|
|
--teal-700: #2c7a7b;
|
|
--lh: 1.4rem;
|
|
--border: var(--gray-600);
|
|
}
|
|
* {
|
|
font: inherit;
|
|
font-size: 1rem;
|
|
line-height: var(--lh);
|
|
font-weight: 300;
|
|
font-family: 'Overpass Mono', monospace, monospace;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 2ch;
|
|
max-width: 100%;
|
|
display: grid;
|
|
overflow-x: hidden;
|
|
grid-template-columns: repeat(auto-fit, minmax(42ch, 1fr));
|
|
grid-gap: calc(var(--lh) * 2) 1ch;
|
|
}
|
|
section {
|
|
border-color: var(--border);
|
|
border-style: solid;
|
|
border-width: 0 2px;
|
|
max-width: calc(100vw - 4ch);
|
|
padding: var(--lh) 1ch;
|
|
position: relative;
|
|
}
|
|
section::after {
|
|
content: '-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------';
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
color: var(--border);
|
|
}
|
|
section::after {
|
|
bottom: -0.65rem;
|
|
}
|
|
section > h2 {
|
|
text-transform: uppercase;
|
|
margin-top: -2rem;
|
|
white-space: nowrap;
|
|
margin-left: -1ch;
|
|
margin-right: -1ch;
|
|
overflow: hidden;
|
|
}
|
|
section > h2::before,
|
|
section > h2::after {
|
|
color: var(--border);
|
|
}
|
|
section > h2::before {
|
|
content: '--- ';
|
|
}
|
|
section > h2::after {
|
|
content: ' ----------------------------------------------------------------------------------------------------------------------------';
|
|
}
|
|
section dl {
|
|
position: absolute;
|
|
top: calc(var(--lh) - 1rem + calc(var(--lh) / 2));
|
|
right: 0;
|
|
padding-right: 2ch;
|
|
width: 18ch;
|
|
background: var(--gray-900);
|
|
}
|
|
dt {
|
|
text-transform: uppercase;
|
|
}
|
|
dt::before {
|
|
content: '▪️';
|
|
margin-right: 1ch;
|
|
}
|
|
.historic dt:nth-of-type(1) {
|
|
color: var(--teal-300);
|
|
}
|
|
.historic dt:nth-of-type(2) {
|
|
color: var(--teal-400);
|
|
}
|
|
.historic dt:nth-of-type(3) {
|
|
color: var(--teal-500);
|
|
}
|
|
.bar dt:nth-of-type(1) {
|
|
color: var(--yellow-300);
|
|
}
|
|
.bar dt:nth-of-type(2) {
|
|
color: var(--yellow-400);
|
|
}
|
|
.bar dt:nth-of-type(3) {
|
|
color: var(--yellow-500);
|
|
}
|
|
.realtime dt:nth-of-type(1) {
|
|
color: var(--blue-400);
|
|
}
|
|
.realtime dt:nth-of-type(2) {
|
|
color: var(--blue-400);
|
|
}
|
|
.realtime dt:nth-of-type(3) {
|
|
color: var(--blue-400);
|
|
}
|
|
dd {
|
|
margin-left: 2ch;
|
|
}
|
|
section pre {
|
|
margin-top: var(--lh);
|
|
}
|
|
pre span {
|
|
display: block;
|
|
letter-spacing: -0.2ch;
|
|
}
|
|
.dotted span {
|
|
line-height: 0.8;
|
|
}
|
|
pre.blue span:nth-last-child(1) {
|
|
color: var(--blue-600);
|
|
}
|
|
pre.blue span:nth-last-child(2) {
|
|
color: var(--blue-600);
|
|
}
|
|
pre.blue span:nth-last-child(3) {
|
|
color: var(--blue-500);
|
|
}
|
|
pre.blue span:nth-last-child(4) {
|
|
color: var(--blue-400);
|
|
}
|
|
pre.blue span:nth-last-child(5) {
|
|
color: var(--blue-400);
|
|
}
|
|
pre.blue span:nth-last-child(6) {
|
|
color: var(--blue-300);
|
|
}
|
|
pre.teal span:nth-last-child(1) {
|
|
color: var(--teal-700);
|
|
}
|
|
pre.teal span:nth-last-child(2) {
|
|
color: var(--teal-500);
|
|
}
|
|
pre.teal span:nth-last-child(3) {
|
|
color: var(--teal-400);
|
|
}
|
|
pre.teal span:nth-last-child(4) {
|
|
color: var(--teal-300);
|
|
}
|
|
pre.green span:nth-last-child(1) {
|
|
color: var(--green-700);
|
|
}
|
|
pre.green span:nth-last-child(2) {
|
|
color: var(--green-600);
|
|
}
|
|
pre.green span:nth-last-child(3) {
|
|
color: var(--green-400);
|
|
}
|
|
pre.green span:nth-last-child(4) {
|
|
color: var(--green-300);
|
|
}
|
|
pre.yellow span:nth-last-child(1) {
|
|
color: var(--yellow-700);
|
|
}
|
|
pre.yellow span:nth-last-child(2) {
|
|
color: var(--yellow-500);
|
|
}
|
|
pre.yellow span:nth-last-child(3) {
|
|
color: var(--yellow-400);
|
|
}
|
|
pre.yellow span:nth-last-child(4) {
|
|
color: var(--yellow-300);
|
|
} |