hugo-bearblog/layouts/partials/style.html
Andrew Jorgensen 2fa45b92a2
Fix a remaining issue with b8c8871 (#20) (#25)
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.
2021-08-13 08:42:04 +02:00

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>