Set pre overflow to auto and make bg !important

Fixes 2 issues:
1. In Firefox, overflow: scroll puts an ugly unscrollable scrollbar on the page. With auto it behaves as normal but the scrollbar only appears when needed.
2. When using code highlighting, the generated Hugo styles replace the <pre> background color, making the page look ugly (only the text has a background, not the entire <pre> block). Setting the background !important fixes this. This is not ideal, but the styles are applied directly to the element when using the internal highlight shortcode, so this is the only way to override them.

Tested on Firefox and Chrome.
This commit is contained in:
mntn 2021-07-31 21:18:25 -04:00 committed by GitHub
parent 1e6ebdbb52
commit e9cfcaf94c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 2 deletions

View File

@ -124,8 +124,8 @@ blockquote::before {
pre, pre,
code, code,
kbd { kbd {
overflow-x: scroll; overflow-x: auto;
background: var(--dark-bg); background: var(--dark-bg) !important;
font-family: var(--font-monospace); font-family: var(--font-monospace);
color: var(--bright-bg); color: var(--bright-bg);
} }