|
|
@ -3,6 +3,8 @@
|
|
|
|
--color-text: #000000;
|
|
|
|
--color-text: #000000;
|
|
|
|
--color-text-subdued: #4f4e4e;
|
|
|
|
--color-text-subdued: #4f4e4e;
|
|
|
|
--color-text-attention: teal;
|
|
|
|
--color-text-attention: teal;
|
|
|
|
|
|
|
|
--color-text-warning: rgb(218, 13, 13);
|
|
|
|
|
|
|
|
--invert: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
@ -10,7 +12,8 @@
|
|
|
|
--color-background: #111111;
|
|
|
|
--color-background: #111111;
|
|
|
|
--color-text: #f9f9f9;
|
|
|
|
--color-text: #f9f9f9;
|
|
|
|
--color-text-subdued: #cccccc;
|
|
|
|
--color-text-subdued: #cccccc;
|
|
|
|
--color-text-attention: teal;
|
|
|
|
--color-text-warning: rgb(218, 13, 13);
|
|
|
|
|
|
|
|
--invert: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -38,22 +41,23 @@ body {
|
|
|
|
grid-template:
|
|
|
|
grid-template:
|
|
|
|
"header" 7rem
|
|
|
|
"header" 7rem
|
|
|
|
"content" 1fr
|
|
|
|
"content" 1fr
|
|
|
|
"footer" 50px;
|
|
|
|
"footer" 2rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
header {
|
|
|
|
grid-area: header;
|
|
|
|
grid-area: header;
|
|
|
|
border-bottom: 2px solid black;
|
|
|
|
border-bottom: 1px solid var(--color-text-subdued);
|
|
|
|
align-self: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
header .logoContainer {
|
|
|
|
header .logoContainer {
|
|
|
|
display: inline-block;
|
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
margin: 1rem 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
header .logoContainer .logo {
|
|
|
|
header .logoContainer .logo {
|
|
|
|
height: 5rem;
|
|
|
|
height: 5rem;
|
|
|
|
|
|
|
|
filter: invert(var(--invert));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
header .logoContainer .siteTag {
|
|
|
|
header .logoContainer .siteTag {
|
|
|
@ -68,12 +72,12 @@ header .logoContainer .siteTag {
|
|
|
|
header .logoContainer .betaTag {
|
|
|
|
header .logoContainer .betaTag {
|
|
|
|
width: 1px; /* Out-of-box alignment hack */
|
|
|
|
width: 1px; /* Out-of-box alignment hack */
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
right: -.3em;
|
|
|
|
right: -.3rem;
|
|
|
|
bottom: 0;
|
|
|
|
bottom: 0;
|
|
|
|
font-style: italic;
|
|
|
|
font-style: italic;
|
|
|
|
|
|
|
|
|
|
|
|
color: rgb(218, 13, 13);
|
|
|
|
color: var(--color-text-warning);
|
|
|
|
font-size: 1.3em;
|
|
|
|
font-size: 1.3rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
main {
|
|
|
@ -85,8 +89,8 @@ main div.search input { width: 100%; }
|
|
|
|
|
|
|
|
|
|
|
|
footer {
|
|
|
|
footer {
|
|
|
|
grid-area: footer;
|
|
|
|
grid-area: footer;
|
|
|
|
border-top: 1px solid black;
|
|
|
|
line-height: 2rem;
|
|
|
|
height: 2em;
|
|
|
|
border-top: 1px solid var(--color-text-subdued);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
main a, footer a {
|
|
|
|
main a, footer a {
|
|
|
|