From e9cfcaf94c72a3231d2d68e12efe1c48f7c06f79 Mon Sep 17 00:00:00 2001
From: mntn <85877297+mntn-xyz@users.noreply.github.com>
Date: Sat, 31 Jul 2021 21:18:25 -0400
Subject: [PATCH] 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.
---
 static/css/typography.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/css/typography.css b/static/css/typography.css
index 5901591..5aa622c 100644
--- a/static/css/typography.css
+++ b/static/css/typography.css
@@ -124,8 +124,8 @@ blockquote::before {
 pre,
 code, 
 kbd {
-    overflow-x: scroll;
-    background: var(--dark-bg);
+    overflow-x: auto;
+    background: var(--dark-bg) !important;
     font-family: var(--font-monospace);
     color: var(--bright-bg);
 }