abtmtr-v13/assets/style.css
2024-08-28 01:29:42 -05:00

205 lines
No EOL
4.3 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==");
}
/* i never liked this */
/* @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: 0.5em 4em;
box-sizing: border-box;
min-height: 100%;
width: 100%;
background: var(--background) var(--tiles-last-black);
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: 0.5em;
margin: 1em 0;
box-shadow: 4px 4px 0 var(--foreground);
}
@media (max-width: 600px) {
body {
padding: 0.5em 1em;
}
}
h1, h2, h3 {
font-size: 2em;
font-weight: normal;
}
h1 {
margin: 1em 0;
font-size: 2em;
}
h2 {
margin: 0.5em 0;
font-size: 2em;
}
h3 {
margin: 0.25em 0;
font-size: 1em;
}
section {
margin: 1em;
}
a {
color: var(--foreground);
}
a:hover {
opacity: 0.75;
}
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: 1em 0.5em;
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);
}
h1::before {
content: ">>";
margin-inline-end: 0.25em;
opacity: 0.5;
}
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
}
@property --hue {
syntax: '<number>';
initial-value: 0;
inherits: false;
}
@keyframes hue-shift {
0% {
--hue: 0;
}
50% {
--hue: 180;
}
100% {
--hue: 360;
}
}
.web-button {
position: relative;
filter: grayscale(1);
left: 0;
top: 0;
transition: all 0.0625s ease-out;
opacity: 1 !important;
display: inline-block;
width: 88px;
height: 31px;
line-height: 31px;
border: 1px solid black;
vertical-align: middle;
margin: 4px 0;
text-decoration: none;
text-align: center;
/* text-overflow: ellipsis;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box; */
}
.web-button:hover {
left: -4px;
top: -4px;
z-index: 999;
filter: grayscale(0);
animation: hue-shift 1s linear infinite;
--shadow: hsl(var(--hue), 50%, 75%);
box-shadow:
4px 4px 0 -1px var(--shadow),
3px 3px 0 -1px var(--shadow),
2px 2px 0 -1px var(--shadow),
1px 1px 0 -1px var(--shadow),
4px 4px 0 0px black,
3px 3px 0 0px black,
2px 2px 0 0px black,
1px 1px 0 0px black;
}