Closed pryrt closed 5 months ago
Here is the CSS I used to improve the readability of the document through design features. I have omitted the CSS counters for section numbering.
:root {
--h2-color: #a0004e;
--h3-color: #00804e;
--h4-color: #004ed0;
--h5-color: initial;
}
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5 {
font-weight: 700;
}
.markdown h2, .markdown h3, .markdown h4 {
border-top-style: solid;
border-color: currentColor;
}
.markdown h2 {
color: var(--h2-color);
border-width: 5px;
margin-top: 4rem;
margin-bottom: 2rem;
padding-top: 1rem;
font-size: 2rem;
}
.markdown h3 {
color: var(--h3-color);
border-width: 3px;
padding-top: 1rem;
font-size: 1.5rem;
}
.markdown h4 {
color: var(--h4-color);
border-width: 1px;
padding-top: .5rem;
font-size: 1.17rem;
}
.markdown h5 {
color: var(--h5-color);
font-size: 1rem;
}
Not much to it. I will post the CSS counters bit in the forum for any who are interested.
So I tweaked the colors slightly between Light and Dark modes:
light-mode | dark-mode |
---|---|
--h2-color: #a0004e; |
--h2-color: #bb2266; |
The others look okay to my eyes, but I'm not sure if I quite got the right shade for the H2 in dark-mode.
But I freely admit my color sense isn't the best (and I normally use light-mode in things, so my dark-mode visual balance might not match a true dark-mode person's preferences). I was just trying to keep something close to @pbarney's light-mode palette, but it seems slightly better to me than sticking with #a0004e
in dark-mode.
per the discussion around https://community.notepad-plus-plus.org/post/93819 , the Community seems to think colors and horizontal bars are reasonable. So if he ever shares his custom CSS, I will look into how to incorporate that into the
_custom.scss
(and maybe even figure out how to use values from_variables.scss
instead of hardcoded colors, which might make it compatible with future auto-light/dark if I update the theme per #654)