walcutt/searchable-jekyll-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pre codeblock horizontal scroll

Browse Source 
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.
This commit is contained in:
meewgumi 2021-05-30 05:10:24 +00:00 committed by GitHub
parent a426b66f5a
commit 55ef676d7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_sass/_code.scss
View File

@ -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 */