309 lines
5.0 KiB
CSS
309 lines
5.0 KiB
CSS
@import url("monokai.css") screen and (prefers-color-scheme: dark);
|
|
@import url("pastie.css") (prefers-color-scheme: light), print;
|
|
|
|
:root {
|
|
--bg: #308;
|
|
--fg: #e8e;
|
|
--accent: #f4c;
|
|
--semitrans: #0004;
|
|
--link: #4cf;
|
|
|
|
--fg-note: LimeGreen;
|
|
--fg-tip: CornflowerBlue;
|
|
--fg-important: Gold;
|
|
--fg-caution: Orange;
|
|
--fg-warning: OrangeRed;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light), print {
|
|
:root {
|
|
--bg: #e8e;
|
|
--fg: #308;
|
|
--accent: #704;
|
|
--semitrans: #fff4;
|
|
--link: #04f;
|
|
|
|
--fg-note: ForestGreen;
|
|
--fg-tip: DodgerBlue;
|
|
--fg-important: Chocolate;
|
|
--fg-caution: OrangeRed;
|
|
--fg-warning: Red;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
:root {
|
|
--bg: white;
|
|
--fg: black;
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--bg-alt: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
|
|
--fg-alt: color-mix(in srgb, var(--fg) 70%, var(--semitrans));
|
|
--link-alt: color-mix(in srgb, var(--link) 50%, var(--fg));
|
|
}
|
|
|
|
html {
|
|
background-color: var(--bg);
|
|
color: var(--fg);
|
|
font-family: serif;
|
|
text-align: justify;
|
|
scroll-padding-top: 0.5em;
|
|
scrollbar-color: var(--accent) var(--semitrans);
|
|
}
|
|
|
|
/* Exception for /posts/, /tags/ and headlines */
|
|
.list, .terms, h1, h2, h3, h4, h5, h6 {
|
|
text-align: left;
|
|
}
|
|
|
|
body {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
p {
|
|
text-indent: 0.5em;
|
|
margin: 0.5em auto;
|
|
}
|
|
|
|
.content > div:first-of-type > p:first-of-type,
|
|
.sectionbody > div:first-of-type > p:first-of-type {
|
|
text-indent: 0;
|
|
}
|
|
|
|
/* No indent for <b> tags and whatnot. */
|
|
p * {
|
|
text-indent: 0;
|
|
}
|
|
|
|
li p, dd p {
|
|
text-indent: 0;
|
|
}
|
|
|
|
|
|
a {
|
|
color: var(--link);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--link-alt);
|
|
}
|
|
|
|
a:hover, a:hover:visited {
|
|
color: var(--accent);
|
|
}
|
|
|
|
a:active {
|
|
background-color: var(--semitrans);
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
.header, .nav ul, .pagination ul, h1, h2, h3, h4, h5, h6 {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
text-shadow: -1px -2px 4px var(--accent);
|
|
}
|
|
|
|
.header .title, .nav a {
|
|
padding: 0.2em 0.4em;
|
|
text-decoration: none;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.header .title {
|
|
margin-left: -0.4em;
|
|
font-family: serif;
|
|
font-variant: small-caps;
|
|
text-shadow: 0 0 8px var(--accent);
|
|
}
|
|
|
|
.header a:hover, .nav a:hover {
|
|
background-color: var(--semitrans);
|
|
}
|
|
|
|
.nav a {
|
|
text-shadow: 1px 2px 4px var(--accent);
|
|
}
|
|
|
|
|
|
.header .description::before {
|
|
content: "";
|
|
}
|
|
|
|
.description {
|
|
font-size: 115%;
|
|
float: right;
|
|
filter: hue-rotate(-30deg);
|
|
}
|
|
|
|
hr {
|
|
color: var(--fg);
|
|
}
|
|
|
|
.nav-top, .nav-bottom {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Needed to position the language menu right. */
|
|
.nav ul {
|
|
width: 100%;
|
|
}
|
|
|
|
.language-menu {
|
|
float: right;
|
|
bottom: 0;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.language-menu a {
|
|
font-size: 100%;
|
|
}
|
|
|
|
code, kbd, pre, samp {
|
|
font-family: monospace;
|
|
}
|
|
|
|
p > code, td > code {
|
|
background-color: var(--semitrans);
|
|
text-shadow: 0 0 2px var(--accent);
|
|
padding: 0.1em;
|
|
}
|
|
|
|
pre {
|
|
padding: 0.2em;
|
|
}
|
|
|
|
div.admonitionblock td.icon {
|
|
border-color: var(--semitrans);
|
|
}
|
|
|
|
div.admonitionblock table {
|
|
background-color: var(--bg-alt);
|
|
}
|
|
|
|
div.note td.icon {
|
|
color: var(--fg-note);
|
|
}
|
|
|
|
div.note table {
|
|
box-shadow: 0 0 0.1em 0 var(--fg-note);
|
|
}
|
|
|
|
div.tip td.icon {
|
|
color: var(--fg-tip);
|
|
}
|
|
|
|
div.tip table {
|
|
box-shadow: 0 0 0.1em 0 var(--fg-tip);
|
|
}
|
|
|
|
div.important td.icon {
|
|
color: var(--fg-important);
|
|
}
|
|
|
|
div.important table {
|
|
box-shadow: 0 0 0.1em 0 var(--fg-important);
|
|
}
|
|
|
|
div.caution td.icon {
|
|
color: var(--fg-caution);
|
|
}
|
|
|
|
div.caution table {
|
|
box-shadow: 0 0 0.1em 0 var(--fg-caution);
|
|
}
|
|
|
|
div.warning td.icon {
|
|
color: var(--fg-warning);
|
|
}
|
|
|
|
div.warning table {
|
|
box-shadow: 0 0 0.1em 0 var(--fg-warning);
|
|
}
|
|
|
|
/* Overwrite background color for highlighted sections. */
|
|
.highlight {
|
|
background-color: var(--semitrans) !important;
|
|
}
|
|
|
|
div, table, code, img {
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 0.05em;
|
|
background-color: var(--fg);
|
|
color: var(--bg);
|
|
border: 0.15em inset var(--fg-alt);
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0 0.1em;
|
|
border: 0.15em outset var(--bg-alt);
|
|
border-radius: 0.2em;
|
|
}
|
|
|
|
.toc {
|
|
margin-top: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
padding: 0 0.2em;
|
|
max-width: 40ch;
|
|
box-shadow: 0 0 0.1em;
|
|
border-radius: 0.1em;
|
|
}
|
|
|
|
.toc h2, .toc ul, .toc ol {
|
|
margin: 0 0;
|
|
}
|
|
|
|
.toc h2 {
|
|
font-size: 120%;
|
|
}
|
|
|
|
@media screen and (min-width: 80ch) {
|
|
.toc {
|
|
float: right;
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 0.5em;
|
|
font-family: sans-serif;
|
|
background-color: var(--bg-alt);
|
|
padding-left: 0.2em;
|
|
border-top: 0.1em dotted var(--accent);
|
|
}
|
|
|
|
.changelog {
|
|
text-align: right;
|
|
}
|
|
|
|
.quoteblock {
|
|
border-color: var(--semitrans);
|
|
}
|
|
|
|
#footnotes {
|
|
text-align: left;
|
|
}
|
|
|
|
:target {
|
|
outline: 0.01em dotted var(--accent);
|
|
}
|
|
|
|
/* Includes title above code examples */
|
|
.listingblock {
|
|
background-color: var(--semitrans);
|
|
}
|
|
|
|
.listingblock .title {
|
|
font-style: italic;
|
|
}
|