2fa45b92a2
It turns out my original proposal for #20 was correct, but not for the reasons I thought. We need to set both `background-color` and `color` to `initial` on `div.highlight pre` because that's where Chroma sets those colors (including the default `color` if configured). Setting to `initial` there makes it so that if the selected style *doesn't* configure a default color, we'll use the `initial` color, which is going to be the right choice because the reason style author left that unset because they didn't consider dark color schemes messing with their style. Then we `unset` the colors on `div.highlight code` because otherwise the `code` colors from the theme will override the colors that would otherwise be inherited from Chroma's `<pre>` element. Stricly speaking I can't say that setting `background-color` to `initial` is required, because I haven't found a Chroma style that *doesn't* set a `background-color`, but I figure it's possible (at least for a light theme) and it makes sense to fix it just in case, and causes no harm otherwise.
173 lines
2.1 KiB
HTML
173 lines
2.1 KiB
HTML
<style>
|
|
body {
|
|
font-family: Verdana, sans-serif;
|
|
margin: auto;
|
|
padding: 20px;
|
|
max-width: 720px;
|
|
text-align: left;
|
|
background-color: #fff;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
line-height: 1.5;
|
|
color: #444;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
strong,
|
|
b {
|
|
color: #222;
|
|
}
|
|
|
|
a {
|
|
color: #3273dc;
|
|
/*color: #ff5e6c;*/
|
|
}
|
|
|
|
.title {
|
|
text-decoration: none;
|
|
border: 0;
|
|
}
|
|
|
|
.title span {
|
|
font-weight: 400;
|
|
}
|
|
|
|
nav a {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
font-size: 16px;
|
|
}
|
|
|
|
input {
|
|
font-size: 16px;
|
|
}
|
|
|
|
content {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
code {
|
|
padding: 2px 5px;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
pre code {
|
|
color: #222;
|
|
display: block;
|
|
padding: 20px;
|
|
white-space: pre-wrap;
|
|
font-size: 14px;
|
|
}
|
|
|
|
div.highlight pre {
|
|
background-color: initial;
|
|
color: initial;
|
|
}
|
|
|
|
div.highlight code {
|
|
background-color: unset;
|
|
color: unset;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 1px solid #999;
|
|
color: #222;
|
|
padding-left: 20px;
|
|
font-style: italic;
|
|
}
|
|
|
|
footer {
|
|
padding: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.helptext {
|
|
color: #777;
|
|
font-size: small;
|
|
}
|
|
|
|
.errorlist {
|
|
color: #eba613;
|
|
font-size: small;
|
|
}
|
|
|
|
/* blog posts */
|
|
ul.blog-posts {
|
|
list-style-type: none;
|
|
padding: unset;
|
|
}
|
|
|
|
ul.blog-posts li {
|
|
display: flex;
|
|
}
|
|
|
|
ul.blog-posts li span {
|
|
flex: 0 0 130px;
|
|
}
|
|
|
|
ul.blog-posts li a:visited {
|
|
color: #8b6fcb;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #333;
|
|
color: #ddd;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
strong,
|
|
b {
|
|
color: #eee;
|
|
}
|
|
|
|
a {
|
|
color: #8cc2dd;
|
|
}
|
|
|
|
code {
|
|
background-color: #777;
|
|
}
|
|
|
|
pre code {
|
|
color: #ddd;
|
|
}
|
|
|
|
blockquote {
|
|
color: #ccc;
|
|
}
|
|
|
|
textarea,
|
|
input {
|
|
background-color: #252525;
|
|
color: #ddd;
|
|
}
|
|
|
|
.helptext {
|
|
color: #aaa;
|
|
}
|
|
}
|
|
|
|
</style>
|