From 55ef676d7d264df60832e4508286aafedcfcc556 Mon Sep 17 00:00:00 2001 From: meewgumi Date: Sun, 30 May 2021 05:10:24 +0000 Subject: [PATCH] pre codeblock horizontal scroll This allows divs containing preformatted codeblocks to scroll horizontally. For an example of the non-scrolling current behavior, look at the shell script on [this note page](https://digital-garden-jekyll-template.netlify.app/your-first-note) with browser <1100px. The div containing a preformatted block is not resizing with the grid, which is preventing the backlinks box from being visible. This is also a problem on mobile devices, since horizontal scrolling of the body is not allowed. This fix, `display: grid`, allows the div.highlight element to resize along with the grid container, fixing both the responsive backlink box issue and horizontal scrolling of the codeblock for browser widths <600px. --- _sass/_code.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_sass/_code.scss b/_sass/_code.scss index 2ab23e7..0ec646e 100644 --- a/_sass/_code.scss +++ b/_sass/_code.scss @@ -7,6 +7,11 @@ overflow: auto; margin: 1em -1em; } + +div.highlight { + display: grid; +} + .highlight .c { color: #999988; font-style: italic } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ .highlight .k { font-weight: bold } /* Keyword */