paritybit.ca

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:
M
build/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;
+    }
 }