125 lines
No EOL
3.2 KiB
CSS
125 lines
No EOL
3.2 KiB
CSS
@import url("./components/style.css");
|
|
@import url("./fonts/style.css");
|
|
|
|
:root {
|
|
--background: #fff;
|
|
--red: #f00;
|
|
--grey: #888;
|
|
--foreground: #000;
|
|
|
|
--inset: 2px;
|
|
|
|
--image-filter: none;
|
|
|
|
--tiles-diag-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAK0lEQVQIWy2KxwEAIBDCCPuvLKineVECcqugg+1OGGDKf2jumMLVQqX17A2jnQ4ME9JEhAAAAABJRU5ErkJggg==");
|
|
--tiles-diag-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAALUlEQVQIWzWLQQ4AIAyDiv7/yQ6nRk6UpFjKgDStXjm0m6rc8EbCBHQZR/5tA5ByF/hYTO80AAAAAElFTkSuQmCC");
|
|
--tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
|
|
--tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #000;
|
|
--red: #0ff;
|
|
--grey: #888;
|
|
--foreground: #fff;
|
|
|
|
--image-filter: invert(1);
|
|
|
|
--tiles-diag-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAK0lEQVQIWy2KxwEAIBDCCPuvLKineVECcqugg+1OGGDKf2jumMLVQqX17A2jnQ4ME9JEhAAAAABJRU5ErkJggg==");
|
|
--tiles-diag-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAALUlEQVQIWzWLQQ4AIAyDiv7/yQ6nRk6UpFjKgDStXjm0m6rc8EbCBHQZR/5tA5ByF/hYTO80AAAAAElFTkSuQmCC");
|
|
--tiles-last-white: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADElEQVQImWNgQAP/AQERAQD1y6SYAAAAAElFTkSuQmCC");
|
|
--tiles-last-black: fixed url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEElEQVQImWNgQAb/////DwAKCAP9R4CJSwAAAABJRU5ErkJggg==");
|
|
}
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 8px 16px;
|
|
box-sizing: border-box;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
background: var(--background) var(--tiles-last-black);
|
|
text-align: center;
|
|
font-family: var(--font-text-legible);
|
|
}
|
|
|
|
main, div.fakemain {
|
|
text-align: start;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 768px;
|
|
box-sizing: border-box;
|
|
background-color: var(--background);
|
|
border: 1px solid currentColor;
|
|
color: var(--foreground);
|
|
padding: 8px;
|
|
margin: 8px auto;
|
|
box-shadow: 4px 4px 0 var(--foreground);
|
|
}
|
|
|
|
section {
|
|
margin: 1em;
|
|
}
|
|
|
|
a {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
img[src^="/assets"],
|
|
img[src^="/favicon.ico"] {
|
|
filter: var(--image-filter);
|
|
}
|
|
|
|
.tagline {
|
|
text-align: center;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid currentColor;
|
|
color: inherit;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.boxThing {
|
|
padding: 1rem;
|
|
margin: 16px 8px;
|
|
border: 1px solid currentColor;
|
|
background: var(--background);
|
|
box-sizing: border-box;
|
|
box-shadow: var(--inset) var(--inset) 0 var(--foreground);
|
|
|
|
h1 {
|
|
margin-bottom: 0.5em;
|
|
font-family: var(--font-text-top);
|
|
}
|
|
|
|
:first-child {
|
|
margin-top: 0;
|
|
}
|
|
:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.web-button {
|
|
position: relative;
|
|
filter: grayscale(1);
|
|
left: 0;
|
|
top: 0;
|
|
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.web-button:hover {
|
|
left: -4px;
|
|
top: -4px;
|
|
z-index: 999;
|
|
filter: grayscale(0);
|
|
box-shadow: 4px 4px 16px #0008;
|
|
} |