Richer monochrome syntax theme and code-block layout in the standard EPUB

Following zenbones and lackluster, the theme keeps what the code names in
ink (functions bold, types italic) and moves the language's own syntax to
grey (keywords bold grey, literals and punctuation grey). Comments are the
lightest. Weight and slant carry the distinctions, so nothing depends on
colour.

Code blocks stay left-aligned inside a <figure>, which centres for image
captions, and have explicit margins. Inline code is display: inline because
CREngine readers (KOReader, PocketBook) make it a block.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-01 19:53:06 +00:00
co-authored by Claude Opus 5.5
parent 13c81440ef
commit 50551114cd
+42 -6
View File
@@ -221,29 +221,65 @@ hr.rule {
font-size: 0.85em; font-size: 0.85em;
} }
/* CREngine readers (KOReader, PocketBook) default `code` to a block. */
.article-body code {
display: inline;
}
/* Left even inside a `<figure>`, which centres for image captions. */
.article-body pre { .article-body pre {
margin: 0.8em 0;
text-align: left;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
border-left: 2px solid #cccccc; border-left: 2px solid #cccccc;
padding-left: 0.5em; padding-left: 0.5em;
} }
/* Syntax tokens (src/highlight.rs), monochrome for e-ink: weight and slant /* Syntax tokens (src/highlight.rs), monochrome for e-ink, after zenbones and
carry the structure, one grey for comments. Flat selectors on purpose. */ lackluster: what the code names stays in ink (functions bold, types italic),
.hl-keyword, the language's own furniture steps back to grey (keywords bold grey,
.hl-tag, literals and punctuation grey), comments lightest. Flat selectors. */
.hl-function,
.hl-macro,
.hl-title, .hl-title,
.hl-strong { .hl-strong {
font-weight: bold; font-weight: bold;
} }
.hl-comment { .hl-type,
.hl-namespace,
.hl-constructor,
.hl-attribute,
.hl-emphasis {
font-style: italic;
}
.hl-keyword,
.hl-tag {
font-weight: bold;
color: #555555;
}
.hl-string {
color: #555555;
}
.hl-number,
.hl-constant,
.hl-label {
font-style: italic; font-style: italic;
color: #555555; color: #555555;
} }
.hl-emphasis { .hl-punctuation,
.hl-operator {
color: #666666;
}
.hl-comment {
font-style: italic; font-style: italic;
color: #888888;
} }
.article-body table { .article-body table {