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:
parent
1e6ebdbb52
commit
e9cfcaf94c
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue