natter/default_environment/stylesheet/main.css
fluxcdbot df339f20fa
Some checks failed
rust-clippy Build rust-clippy has failed
rust-test Build rust-test has succeeded
format Build format has succeeded
CI: autofix rust code.
2023-12-23 01:46:40 +00:00

230 lines
4.3 KiB
CSS

:root {
--main-max-width: 800px;
--site-background-color: #0a0a0a;
--site-text-color: #fffffc;
--header-divider-color: #6a687a;
--stream-divider-color: #6ccff6;
--src-font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
Consolas, "DejaVu Sans Mono", monospace;
--src-block-background-color: #141414;
--src-block-border-color: #84828f;
--src-block-language-color: #0a0a0a;
--src-block-language-background: #84828f;
--quote-block-border-color: #84828f;
--table-border-color: #6a687a;
--table-odd-background-color: #0a0a0a;
--table-even-background-color: #141414;
}
body {
color: var(--site-text-color);
background-color: var(--site-background-color);
font-family: source-sans-pro, Seravek, "Gill Sans Nova", Ubuntu, Calibri,
"DejaVu Sans", sans-serif;
a:link,
a:visited {
/* TODO: Should I use a different color for links? */
color: var(--site-text-color);
}
}
.page_centering {
display: flex;
flex-direction: column;
align-items: center;
}
.page_header {
width: 100%;
max-width: var(--main-max-width);
border-bottom: 0.1rem solid var(--header-divider-color);
.home_link {
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
&:link,
&:visited {
color: var(--site-text-color);
}
}
}
.main_content {
width: 100%;
max-width: var(--main-max-width);
font-size: 1.2rem;
line-height: 1.2;
/* A stand-alone blog post (not in a blog stream). */
.blog_post {
padding: 1rem 0 3rem 0;
}
.blog_stream {
.stream_divider {
color: var(--stream-divider-color);
}
}
/* A blog post in a blog stream (for example, the homepage). */
.blog_stream_post {
background: #1f1f1f;
padding: 1rem 0.2rem;
}
.blog_post_title {
font-size: 2.5rem;
font-weight: 700;
padding-bottom: 1rem;
}
p {
margin: 1rem 0;
}
.src_block {
background: var(--src-block-background-color);
border-radius: 3px;
border: 1px solid var(--src-block-border-color);
font-size: 1rem;
font-family: var(--src-font-family);
margin: 1rem 0;
.src_language {
display: inline-block;
color: var(--src-block-language-color);
background: var(--src-block-language-background);
border-radius: 0 0 3px 0;
padding: 0.1rem 0.5rem;
font-size: 0.8rem;
vertical-align: top;
}
.src_body {
margin: 0.5rem;
.src_line {
white-space: pre-wrap;
}
}
}
.inline_source_block {
font-family: var(--src-font-family);
font-size: 1rem;
}
.code,
.verbatim {
font-family: var(--src-font-family);
font-size: 1rem;
}
.quote_block {
border-left: 1px solid var(--quote-block-border-color);
padding: 0 0 0 1rem;
margin: 1rem 0 1rem 2rem;
}
h2,
h3 {
margin: 1rem 0;
padding-bottom: 0.5rem;
}
h2 {
font-size: 2.3rem;
font-weight: 600;
}
h3 {
font-size: 2.1rem;
font-weight: 600;
}
.plain_list {
&.unordered {
list-style-type: disc;
padding-left: 2.5rem;
}
&.ordered {
list-style-type: decimal;
padding-left: 2.5rem;
}
&.descriptive {
font-size: 1rem;
> dt {
font-weight: 600;
}
> dd {
padding-left: 2.5rem;
}
}
}
.footnote_reference {
vertical-align: super;
font-size: 80%;
> a {
text-decoration: none;
}
}
.footnote_definition {
.label {
text-decoration: none;
}
.definition {
display: inline;
> p {
display: inline;
}
}
}
.org_table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid var(--table-border-color);
> tbody {
border-width: 1px 0;
border-style: solid;
border-color: var(--table-border-color);
> tr {
> td {
padding: 0.2rem;
}
}
> tr:nth-child(odd) {
background-color: var(--table-odd-background-color);
}
> tr:nth-child(even) {
background-color: var(--table-even-background-color);
}
}
> thead {
border-width: 1px 0;
border-style: solid;
border-color: var(--table-border-color);
> tr {
> th {
padding: 0.2rem;
font-weight: 600;
}
}
}
}
}