blog/assets/blog.css

201 lines
2.7 KiB
CSS

:root
{
--bg: #1d1f21;
--bg-code: #101;
--bg-code-trans: #101a;
--bg-hover: #282a2e;
--sel: #373b41;
--bg-dark: #1b1b1b;
--fg: LightGray;
--fg-dim: Gray;
--link: SkyBlue;
--link-hover: MediumAquamarine;
--link-visited: Plum;
--font-serif: "Source Serif Pro", serif;
--font-sans-serif: "Source Sans Pro", sans-serif;
--font-mono: "Source Code Pro", monospace;
}
html
{
background-color: var(--bg);
color: var(--fg);
font-family: var(--font-serif)
}
body
{
margin-top: 0.5em;
margin-bottom: 0.5em;
}
a
{
color: var(--link);
}
a:visited
{
color: var(--link-visited);
}
a:hover, a:hover:visited
{
color: var(--link-hover);
}
.header, .nav ul, .pagination ul, h1, h2, h3, h4, h5, h6
{
font-family: var(--font-sans-serif);
}
.header a, .nav a
{
padding: 0.2em 0.4em;
text-decoration: none;
color: var(--fg);
}
.header a
{
font-family: var(--font-serif);
font-variant: small-caps;
}
.header a:hover, .nav a:hover
{
background-color: var(--bg-hover);
}
.header .description::before
{
content: "";
}
.description
{
float: right;
color: var(--fg-dim);
}
hr
{
color: var(--fg);
}
.nav-top, .nav-bottom
{
text-align: center;
}
code, kbd, pre, samp
{
font-family: var(--font-mono);
}
p > code, td > code
{
background-color: var(--bg-code-trans);
padding: 0.1em;
}
pre
{
padding: 0.2em;
}
div.admonitionblock td.icon
{
border-color: var(--bg-hover);
}
div.admonitionblock table
{
background-color: var(--bg-dark);
box-shadow: 0 0 0.1em 0 var(--link-hover);
}
div.note td.icon
{
color: LimeGreen;
}
div.tip td.icon
{
color: CornflowerBlue;
}
div.important td.icon
{
color: Gold;
}
div.caution td.icon
{
color: Orange;
}
div.warning td.icon
{
color: OrangeRed;
}
/* Overwrite background color for highlighted sections. */
.highlight
{
background-color: var(--bg-code) !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-dim);
border-radius: 0.2em;
}
.button
{
display: inline-block;
padding: 0 0.1em;
border: 0.15em outset var(--bg-dark);
border-radius: 0.2em;
}
.toc
{
float: right;
margin-left: 1em;
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%;
}
.pagination
{
margin-top: 0.5em;
font-family: var(--font-sans-serif);
background-color: var(--bg-dark);
padding-left: 0.2em;
border-top: 0.1em dotted var(--bg-hover);
}