153 lines
2.4 KiB
CSS
153 lines
2.4 KiB
CSS
|
|
:root {
|
|
--font-heading: Verdana, sans-serif;
|
|
--font-body: Verdana, sans-serif;
|
|
--font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
|
|
font-size: 16px;
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
:root {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 2000px) {
|
|
:root {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ===== Font Families ===== */
|
|
|
|
h1, h2, h3, h4, h5, h6,
|
|
th, dt {
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
p, td, dd, figcaption, li, blockquote,
|
|
input, textarea, select, option, optgroup, legend, fieldset, label, button {
|
|
font-family: var(--font-body);
|
|
}
|
|
|
|
pre, code, samp {
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
a, span,
|
|
b, i, u, q,
|
|
strong, em, mark, cite {
|
|
font-family: inherit;
|
|
}
|
|
|
|
|
|
|
|
/* ===== Font Sizes ===== */
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
th, td, dt, dd,
|
|
p, figcaption, li, blockquote,
|
|
pre,
|
|
input, textarea, select, option, optgroup, legend, fieldset, label, button {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
a, span,
|
|
b, i, u, q,
|
|
strong, em, mark, cite,
|
|
code, samp {
|
|
font-size: inherit;
|
|
}
|
|
|
|
|
|
|
|
/* ===== Colors ===== */
|
|
|
|
::selection {
|
|
color: var(--theme-text-selection);
|
|
background: var(--theme-bg-text-selection);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6,
|
|
th, dt {
|
|
color: var(--theme-text-heading)
|
|
}
|
|
|
|
p, td, dd, figcaption, li, blockquote,
|
|
input, textarea, select, option, optgroup, legend, fieldset, label {
|
|
color: var(--theme-text-body)
|
|
}
|
|
|
|
button, input:is([type='button'], [type='submit'], [type='reset']) {
|
|
color: var(--theme-text-button-primary);
|
|
background: var(--theme-bg-button-primary);
|
|
}
|
|
|
|
:is(button, input:is([type='button'], [type='submit'], [type='reset'])):hover {
|
|
background: var(--theme-bg-button-primary-hover);
|
|
}
|
|
|
|
:is(button, input:is([type='button'], [type='submit'], [type='reset'])).secondary {
|
|
color: var(--theme-text-button-secondary);
|
|
background: var(--theme-bg-button-secondary);
|
|
}
|
|
|
|
:is(button, input:is([type='button'], [type='submit'], [type='reset'])).secondary:hover {
|
|
background: var(--theme-bg-button-secondary-hover);
|
|
}
|
|
|
|
pre, code, samp {
|
|
color: var(--theme-code-normal);
|
|
}
|
|
|
|
a {
|
|
color: var(--theme-text-link);
|
|
}
|
|
|
|
a:active {
|
|
color: var(--theme-text-link-active);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--theme-text-link-visited);
|
|
}
|
|
|
|
mark {
|
|
color: var(--theme-text-highlight);
|
|
background: var(--theme-bg-text-highlight);
|
|
}
|
|
|
|
span,
|
|
b, i, u, q,
|
|
strong, em, cite {
|
|
color: inherit;
|
|
}
|
|
|