paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 0cc10d17d14f37a8828d760a826d519b3fa2d422
parent a0408033602d4d595a70b72c8555d6dbfb98d0ba
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Fri,  6 Dec 2019 02:53:33 -0500

Add smooth scrolling and scrollbars to <pre>

Use CSS scroll-behaviour to make the page smoothly scroll when you click
on an anchor link (i.e. table of contents/reference link).

Turn off wrapping in <pre> elements so that things like code examples
and nicely formatted output won't get wrapped on smaller screens.
Instead set it to make scrollbars appear.

Diffstat:
Mbuild/base.css | 20+++++++++++++-------
1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/build/base.css b/build/base.css @@ -1,3 +1,7 @@ +html { + scroll-behavior: smooth; +} + body { font-family: "DejaVu Sans", sans-serif; background-color: #222; @@ -33,12 +37,9 @@ p.noindent { pre { font-family: "DejaVu Sans Mono", monospace; - /* Do word-wrapping in every browser for pre */ - white-space: -moz-pre-wrap; - white-space: -o-pre-wrap; - white-space: -pre-wrap; - white-space: pre-wrap; - word-wrap: break-word; + /* white-space: pre-wrap; */ + /* word-wrap: break-word; */ + overflow-x: auto; background-color: #424242; border: 3px #585858 solid; box-shadow: inset 0 0 0 2px rgba(40, 40, 40, 0.5); @@ -210,7 +211,6 @@ kbd { text-align: left; background-color: #333; box-sizing: border-box; - -moz-box-sizing: border-box; } #side-bar ul { @@ -250,6 +250,9 @@ kbd { max-width: 100%; padding-right: 0; } + pre { + overflow-x: scroll; + } } @media all and (max-width: 550px) { @@ -269,4 +272,7 @@ kbd { #footer p { padding: 0; } + pre { + overflow-x: scroll; + } }