Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve H1...Hn CSS #653

Closed
pryrt opened this issue Mar 27, 2024 · 2 comments · Fixed by #656
Closed

Improve H1...Hn CSS #653

pryrt opened this issue Mar 27, 2024 · 2 comments · Fixed by #656

Comments

@pryrt
Copy link
Contributor

pryrt commented Mar 27, 2024

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
Copy link

pbarney commented Mar 30, 2024

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 added a commit to pryrt/npp-usermanual that referenced this issue Mar 31, 2024
@pryrt pryrt mentioned this issue Mar 31, 2024
pryrt added a commit that referenced this issue Mar 31, 2024
* Update Theme

switch to hugo-book-9 theme for auto light/dark mode

update hugo to 68.3 for compatibility with hugo-book-9

use details-shortcut instead of expand-shortcode for compatibility

* update --theme calls in the CI/CD workflows

* httrack didn't work with newer repo; start dumping directory listings, etc

* hugo static (dir 2)

* hugo static: -d (dir 3)

* hugo static: -d with artifact (dir 4)

* hugo static: starting to filter

* these static-hugo commands properly cleaned the static_html during my local tests, so hopefully will work as an action as well

* update both CI_build and onRelease to match

* tweak the naming in the CI_build

* add variant of pbarney's color/horizontal-line for headers

closes #653

* tweak h2 color for dark mode
@pryrt
Copy link
Contributor Author

pryrt commented Mar 31, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants