148 lines
2.3 KiB
CSS
148 lines
2.3 KiB
CSS
:root {
|
|
--bg: #308;
|
|
--fg: #e8e;
|
|
--accent: #f4c;
|
|
--semitrans: #0004;
|
|
--link: #4cf;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #e8e;
|
|
--fg: #308;
|
|
--accent: #704;
|
|
--semitrans: #fff4;
|
|
--link: #04f;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
:root {
|
|
--bg: crimson;
|
|
--fg: crimson;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--link-alt: color-mix(in srgb, var(--link) 50%, var(--fg));
|
|
}
|
|
|
|
html {
|
|
max-width: 120ch;
|
|
margin: auto auto;
|
|
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
scrollbar-color: var(--accent) var(--semitrans);
|
|
|
|
background-image: url('images/funkus_tea.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: bottom right;
|
|
background-attachment: fixed;
|
|
background-size: 50%;
|
|
background-blend-mode: luminosity;
|
|
}
|
|
|
|
a {
|
|
color: var(--link);
|
|
}
|
|
|
|
a:active {
|
|
background-color: var(--semitrans);
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--link-alt);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--semitrans);
|
|
text-shadow: 0 0 2px var(--accent);
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
th, td {
|
|
text-align: left;
|
|
padding: 0 0.25em;
|
|
}
|
|
|
|
td {
|
|
word-break: break-all;
|
|
}
|
|
|
|
th:first-child, td:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
td:first-child {
|
|
font-weight: bold;
|
|
word-break: normal;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
display: flex;
|
|
}
|
|
|
|
header .peek {
|
|
mix-blend-mode: luminosity;
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
header h1 {
|
|
margin: auto;
|
|
}
|
|
|
|
h1, h2, h3, .shadow {
|
|
text-shadow: -1px -2px 4px var(--accent);
|
|
}
|
|
|
|
.about > div {
|
|
display: flex;
|
|
column-gap: 1em;
|
|
}
|
|
|
|
.about p {
|
|
margin-top: 0; /* FIXME: figure out non-hacky way */
|
|
}
|
|
|
|
.emojis {
|
|
max-width: 30%;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
align-content: start;
|
|
gap: 0.1em;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.emojis {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1000px) {
|
|
.emojis {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
.emojis img {
|
|
max-height: 4em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
footer .counter span {
|
|
background-color: darkblue;
|
|
color: white;
|
|
border: 0.15em outset yellow;
|
|
padding: 0.1em 0.4em;
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
margin-right: 0.1em;
|
|
}
|
|
|
|
.footer .counter span:last-child {
|
|
margin-right: 0;
|
|
}
|