444 lines
7.8 KiB
CSS
444 lines
7.8 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
box-sizing: border-box;
|
|
font-family: Arimo, Verdana, Helvetica, "Trebuchet MS", Tahoma, Arial, sans-serif;
|
|
|
|
--border-radius: 4px;
|
|
|
|
--egyptian-blue: #EA80FC;
|
|
--light-purple: #AA4FF6;
|
|
--purple: #7461AD;
|
|
--lilac-violet: #794A7F;
|
|
|
|
--lightest: 90%;
|
|
--lighter: 70%;
|
|
--light: 58%;
|
|
--base: 46%;
|
|
--dark: 34%;
|
|
--darker: 22%;
|
|
|
|
--violet: 255 40%;
|
|
--magenta: 285 40%;
|
|
--green: 75 31%;
|
|
--yellow: 51 95%;
|
|
--orange: 40 71%;
|
|
--cyan: 195 41%;
|
|
|
|
--grey: 200 6%;
|
|
|
|
--black: 200 6% 10%;
|
|
--white: 200 6% 94%;
|
|
|
|
--foreground-color: light-dark(
|
|
hsl(var(--black)),
|
|
hsl(var(--white))
|
|
);
|
|
|
|
--background-color: light-dark(
|
|
hsl(var(--white)),
|
|
hsl(var(--black))
|
|
);
|
|
|
|
--secondary-background-color: light-dark(
|
|
hsl(var(--violet) var(--light)),
|
|
hsl(var(--violet) var(--dark))
|
|
);
|
|
|
|
--code-color: light-dark(
|
|
hsl(var(--orange) var(--darker)),
|
|
hsl(var(--yellow) var(--light))
|
|
);
|
|
|
|
--border-color: light-dark(
|
|
hsl(var(--violet) var(--dark)),
|
|
hsl(var(--violet) var(--light))
|
|
);
|
|
|
|
--header-color: light-dark(
|
|
hsl(var(--orange) var(--dark)),
|
|
hsl(var(--yellow) var(--base))
|
|
);
|
|
|
|
--subheader-color: light-dark(
|
|
hsl(var(--violet) var(--dark)),
|
|
hsl(var(--magenta) var(--light))
|
|
);
|
|
|
|
--link-color: light-dark(
|
|
hsl(var(--cyan) var(--dark)),
|
|
hsl(var(--cyan) var(--light))
|
|
);
|
|
|
|
--link-hover-color: light-dark(
|
|
hsl(var(--cyan) var(--base)),
|
|
hsl(var(--cyan) var(--lighter))
|
|
);
|
|
|
|
--link-active-color: light-dark(
|
|
hsl(var(--cyan) var(--dark)),
|
|
hsl(var(--cyan) var(--dark))
|
|
);
|
|
|
|
--link-visited-color: light-dark(
|
|
hsl(var(--cyan) var(--darker)),
|
|
hsl(var(--cyan) var(--dark))
|
|
);
|
|
|
|
--list-marker-color: light-dark(
|
|
hsl(var(--orange) var(--base)),
|
|
hsl(var(--yellow) var(--base))
|
|
);
|
|
|
|
--muted-color: light-dark(
|
|
hsl(var(--grey) var(--dark)),
|
|
hsl(var(--grey) var(--base))
|
|
);
|
|
|
|
--table-header-color: light-dark(
|
|
hsl(var(--violet) var(--lighter)),
|
|
hsl(var(--violet) var(--base))
|
|
);
|
|
|
|
--table-row-color: var(--background-color);
|
|
|
|
--table-row-alt-color: light-dark(
|
|
hsl(var(--grey) var(--lightest)),
|
|
hsl(var(--grey) var(--darker))
|
|
);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.high-motion {
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
}
|
|
|
|
body {
|
|
--b: var(--background-color);
|
|
--f: var(--secondary-background-color);
|
|
|
|
margin: 0;
|
|
background-color: var(--b);
|
|
color: var(--foreground-color);
|
|
|
|
background: radial-gradient(circle, transparent 20%, var(--b) 20%, var(--b) 80%, transparent 80%, transparent) 0% 0% / 48px 48px, radial-gradient(circle, transparent 20%, var(--b) 20%, var(--b) 80%, transparent 80%, transparent) 24px 24px / 48px 48px, linear-gradient(var(--f) 1px, transparent 1px) 0px -0.5px / 24px 24px, linear-gradient(90deg, var(--f) 1px, var(--b) 1px) -0.5px 0px / 24px 24px var(--b);
|
|
background-size: 48px 48px, 48px 48px, 24px 24px, 24px 24px;
|
|
background-color: var(--b);
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 740px) {
|
|
body {
|
|
margin: initial;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: Palatino, Georgia, Tinos, Georgia, Garamond, "Times New Roman", Times, serif;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
h1 {
|
|
color: var(--header-color);
|
|
}
|
|
|
|
h2, h3, h4, h5, h6 {
|
|
color: var(--subheader-color);
|
|
}
|
|
|
|
a { color: var(--link-color); }
|
|
a:hover { color: var(--link-hover-color); }
|
|
a:active { color: var(--link-active-color); }
|
|
|
|
li {
|
|
list-style: none;
|
|
position: relative;
|
|
|
|
margin-left: 8px;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
li::before {
|
|
content: '★';
|
|
position: absolute;
|
|
font-size: 1.2rem;
|
|
top: -4px;
|
|
left: -10px;
|
|
color: var(--list-marker-color);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
code {
|
|
--x: 0.25rem;
|
|
margin-left: var(--x);
|
|
margin-right: var(--x);
|
|
font-weight: 500;
|
|
color: var(--code-color);
|
|
}
|
|
|
|
pre {
|
|
--x: 0.5rem;
|
|
--y: 1rem;
|
|
|
|
padding: var(--y) var(--x) var(--y) var(--x);
|
|
}
|
|
|
|
pre, code {
|
|
font-family: Inconsolata, Consolas, Cousine, "Courier New", Courier, monospace;
|
|
font-size: 1rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
nav.main-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
min-width: 160px;
|
|
justify-content: center;
|
|
}
|
|
|
|
nav li::before {
|
|
content: '';
|
|
}
|
|
|
|
article header {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-collapse: collapse;
|
|
overflow: auto;
|
|
}
|
|
|
|
table td {
|
|
padding: 0.25rem 0.25rem;
|
|
}
|
|
|
|
@media only screen and (min-width: 740px) {
|
|
table {
|
|
width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
}
|
|
|
|
table thead th {
|
|
font-weight: 400;
|
|
font-size: 0.9rem;
|
|
text-align: left;
|
|
|
|
color: light-dark(
|
|
hsl(var(--grey) var(--dark)),
|
|
hsl(var(--grey) var(--light))
|
|
);
|
|
}
|
|
|
|
table td:first-child {
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
background-color: var(--table-row-color);
|
|
}
|
|
|
|
table tbody tr:nth-child(even) {
|
|
background-color: var(--table-row-alt-color);
|
|
}
|
|
|
|
@media only screen and (min-width: 740px) {
|
|
nav.main-nav {
|
|
flex-direction: column;
|
|
justify-content: initial;
|
|
}
|
|
|
|
nav.main-nav li::before {
|
|
content: '★';
|
|
}
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
@media only screen and (min-width: 740px) {
|
|
.container {
|
|
flex-direction: row-reverse;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.full-width.container {
|
|
max-width: initial;
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.row-reverse {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.column .align-center, .row .align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.column .justify-center, .row .justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.column .space-between, .row .space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.box {
|
|
background-color: var(--background-color);
|
|
padding: 1rem;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
@media only screen and (min-width: 740px) {
|
|
.box {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
margin: 0.75rem;
|
|
}
|
|
}
|
|
|
|
.box.has-moon {
|
|
position: relative;
|
|
}
|
|
|
|
.box.has-moon::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 18px;
|
|
height: 24px;
|
|
width: 24px;
|
|
box-shadow: -4px 4px 0 1px var(--list-marker-color);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.header {
|
|
color: var(--header-color);
|
|
margin: 0;
|
|
}
|
|
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
border-bottom: 1px solid var(--muted-color);
|
|
}
|
|
|
|
.divider:not(:empty)::before {
|
|
margin-right: .25rem;
|
|
}
|
|
|
|
.divider:not(:empty)::after {
|
|
margin-left: .25rem;
|
|
}
|
|
|
|
.box-image {
|
|
margin: 0.25rem;
|
|
margin-right: 0.75rem;
|
|
float: left;
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
.box-content {
|
|
display: inline-block;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.box-image img {
|
|
transition: transform .25s ease;
|
|
image-rendering: smooth;
|
|
}
|
|
|
|
.box-image img:hover {
|
|
transform: scale(1.1) translateY(-5px);
|
|
}
|
|
|
|
.hide-overflow {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--muted-color);
|
|
}
|
|
|
|
.center-text {
|
|
text-align: center;
|
|
}
|
|
|
|
.grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.image-link {
|
|
display: block;
|
|
}
|
|
|
|
@media only screen and (max-width: 740px) {
|
|
.hide-mobile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.anti-copyright {
|
|
position: relative;
|
|
}
|
|
|
|
.anti-copyright .cross {
|
|
position: absolute;
|
|
right: 4px;
|
|
}
|
|
|
|
.center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|