notepad-plus-plus / npp-usermanual

Notepad++ User Manual
https://npp-user-manual.org/
Other
215 stars 98 forks source link

Improve H1...Hn CSS #653

Closed pryrt closed 5 months ago

pryrt commented 5 months ago

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)

pbarney commented 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.

pryrt commented 5 months ago

So I tweaked the colors slightly between Light and Dark modes:

light-mode dark-mode
image image
--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.