125 lines
1.7 KiB
CSS
125 lines
1.7 KiB
CSS
@font-face {
|
|
font-family: 'C64ProMono';
|
|
src: url('/vendor/C64_Pro_Mono-STYLE.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--font-family: 'C64ProMono', monospace;
|
|
--black: #000000;
|
|
--white: #E0E0E0;
|
|
--cyan: #00A8C8;
|
|
--red: #C62828;
|
|
--green: green;
|
|
--yellow: #C4A000;
|
|
--purple: #7C3AED;
|
|
--blue: #1565C0;
|
|
--magenta: #ff66cc;
|
|
|
|
--c64-light-blue: #6C6FF6;
|
|
--c64-dark-blue: #40318D;
|
|
--c64-light-gray: #BEBEBE;
|
|
}
|
|
|
|
.black {
|
|
color: var(--black);
|
|
}
|
|
|
|
.white {
|
|
color: var(--white);
|
|
}
|
|
|
|
.cyan {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.red {
|
|
color: var(--red);
|
|
}
|
|
|
|
.green {
|
|
color: var(--green);
|
|
}
|
|
|
|
.yellow {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
.purple {
|
|
color: var(--purple);
|
|
}
|
|
|
|
.blue {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.magenta {
|
|
color: var(--magenta);
|
|
}
|
|
|
|
.dark-blue {
|
|
color: var(--c64-dark-blue);
|
|
}
|
|
|
|
:fullscreen::backdrop {
|
|
background: var(--background-color);
|
|
}
|
|
|
|
::selection {
|
|
background-color: #9fa3ff;
|
|
color: var(--c64-dark-blue);
|
|
}
|
|
|
|
a {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--purple);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
font-family: var(--font-family);
|
|
margin: 0;
|
|
height: 100%;
|
|
|
|
background: var(--c64-light-blue);
|
|
color: var(--c64-light-blue);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#content {
|
|
width: 960px;
|
|
height: 540px;
|
|
background: var(--c64-dark-blue);
|
|
color: var(--c64-light-blue);
|
|
|
|
/* nearest-neighbor scaling */
|
|
image-rendering: pixelated;
|
|
transform-origin: center center;
|
|
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
body[data-mode=tall] #content {
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
textarea {
|
|
color: var(--c64-light-blue);
|
|
max-width: 97%;
|
|
} |