natter/default_environment/stylesheet/main.css

270 lines
5.2 KiB
CSS
Raw Normal View History

2023-12-20 00:23:56 +00:00
:root {
2023-12-23 01:46:40 +00:00
--main-max-width: 800px;
--site-background-color: #0a0a0a;
--site-text-color: #fffffc;
--header-divider-color: #6a687a;
2023-12-20 01:45:03 +00:00
2023-12-23 01:46:40 +00:00
--stream-divider-color: #6ccff6;
2023-12-24 02:54:16 +00:00
--stream-post-background-color: #1f1f1f;
2023-12-21 23:34:42 +00:00
2023-12-23 01:46:40 +00:00
--src-font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
Consolas, "DejaVu Sans Mono", monospace;
2023-12-21 21:42:22 +00:00
2023-12-23 01:46:40 +00:00
--src-block-background-color: #141414;
--src-block-border-color: #84828f;
--src-block-language-color: #0a0a0a;
--src-block-language-background: #84828f;
2023-12-20 02:41:41 +00:00
2023-12-23 01:46:40 +00:00
--quote-block-border-color: #84828f;
2023-12-22 02:59:52 +00:00
2023-12-23 01:46:40 +00:00
--table-border-color: #6a687a;
--table-odd-background-color: #0a0a0a;
--table-even-background-color: #141414;
2023-12-20 01:33:21 +00:00
}
2023-12-24 02:54:16 +00:00
@media (prefers-color-scheme: light) {
:root {
--site-background-color: #f5f5f5;
--site-text-color: #000003;
--header-divider-color: #959785;
--stream-divider-color: #933009;
--stream-post-background-color: #e0e0e0;
--src-block-background-color: #ebebeb;
--src-block-border-color: #7b7d70;
--src-block-language-color: #f5f5f5;
--src-block-language-background: #7b7d70;
--quote-block-border-color: #7b7d70;
--table-border-color: #959785;
--table-odd-background-color: #f5f5f5;
--table-even-background-color: #ebebeb;
}
}
2023-12-20 01:33:21 +00:00
body {
2023-12-23 01:46:40 +00:00
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? */
2023-12-20 01:33:21 +00:00
color: var(--site-text-color);
2023-12-23 01:46:40 +00:00
}
2023-12-20 00:23:56 +00:00
}
.page_centering {
2023-12-23 01:46:40 +00:00
display: flex;
flex-direction: column;
align-items: center;
2023-12-20 00:23:56 +00:00
}
.page_header {
2023-12-23 01:46:40 +00:00
width: 100%;
max-width: var(--main-max-width);
border-bottom: 0.1rem solid var(--header-divider-color);
2023-12-20 00:23:56 +00:00
2023-12-23 01:46:40 +00:00
.home_link {
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
2023-12-20 01:33:21 +00:00
2023-12-23 01:46:40 +00:00
&:link,
&:visited {
color: var(--site-text-color);
2023-12-20 00:23:56 +00:00
}
2023-12-23 01:46:40 +00:00
}
2023-12-20 00:23:56 +00:00
}
.main_content {
2023-12-23 01:46:40 +00:00
width: 100%;
max-width: var(--main-max-width);
font-size: 1.2rem;
line-height: 1.2;
2023-12-24 04:09:24 +00:00
padding-bottom: 8rem;
2023-12-23 01:46:40 +00:00
/* 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);
}
2023-12-24 04:09:24 +00:00
.stream_nav {
display: flex;
flex-direction: row;
align-items: center;
> a {
display: inline-block;
padding: 0.2rem 0.5rem;
font-weight: 700;
font-size: 1.5rem;
}
> .spacer {
display: inline-block;
flex: 1 1;
}
}
2023-12-23 01:46:40 +00:00
}
/* A blog post in a blog stream (for example, the homepage). */
.blog_stream_post {
2023-12-24 02:54:16 +00:00
background: var(--stream-post-background-color);
2023-12-23 01:46:40 +00:00
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;
2023-12-23 01:46:40 +00:00
}
> 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;
2023-12-22 02:59:52 +00:00
}
2023-12-23 01:46:40 +00:00
}
> 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;
2023-12-22 23:05:39 +00:00
}
2023-12-23 01:46:40 +00:00
}
2023-12-22 02:59:52 +00:00
}
2023-12-23 01:46:40 +00:00
}
2023-12-20 00:23:56 +00:00
}