b8c8871191
Chroma sets `color` (usually) and `background-color` directly on a `<pre>` element under a `<div class="highlight">` but the theme was interfering with those color settings from both the `code` and `pre code` selectors. Since Chroma highlighting is under a `highlight` class we can `unset` the colors that are set by the `code` selector elsewhere, so that under a `<code>` element that's under a `<div class="highlight">` it will just inherit from the `<pre>` above it where Chroma sets all it's colors. The `color: initial;` instead of `color: unset;` is needed because some Chroma styles don't set a default text color, and if you use `unset` instead that lets the browser use a lighter default text color when using a dark color scheme. That's a sort of long winded way of saying that I think I've fixed the color interference problem in a way that won't mess with anything else in the theme. I've tested this on a wide selection of Chroma styles, with both light and dark color schemes and it seems to work correctly in all cases. Which is to say that Chroma appears to have full control of both `color` and `background-color` for code blocks that it's highlighting. Fixes #19
168 lines
2.0 KiB
HTML
168 lines
2.0 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 code {
|
|
background-color: unset;
|
|
color: initial;
|
|
}
|
|
|
|
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>
|