css: update common/

Merge css/common/*.css from cpp-notes (my other project).
It includes things like horizontal scrollbars inside <pre>s, lighter
background inside <pre> and <code>, etc.

2 files changed, 36 insertions, 2 deletions

diff --git a/css/common/footer.css b/css/common/footer.css
index 417b3d9..1e05c57 100644
--- a/css/common/footer.css
+++ b/css/common/footer.css
@@ -6,6 +6,13 @@ html, body {
   height: 100%;
   width: 100%;
   display: table;
+
+  /*
+   * Without this property, scrollbars inside <pre> elements don't work if
+   * display's width is less than 750px.
+   * God, I hate CSS.
+   */
+  table-layout: fixed;
 }
 .footer-wrapper-collapse {
   display: table-row;
diff --git a/css/common/misc.css b/css/common/misc.css
index 960e910..edca6b0 100644
--- a/css/common/misc.css
+++ b/css/common/misc.css
@@ -1,10 +1,11 @@
+/* Utility classes to prevent blocks from expanding unreasonably. */
 .wide-enough {
   max-width: 400px;
 }
 .wider {
   max-width: 600px;
 }
-/* "Header link" becomes blue inside of <hN><a>Header link</a></hN> otherwise. */
+/* Links become blue inside of <hN> elements otherwise. */
 h1 a,
 h2 a,
 h3 a,
@@ -13,7 +14,33 @@ h5 a,
 h6 a {
   color: inherit;
 }
-/* Link captions become too close to badges on the sidebar. */
+/* Link captions might become too close to badges on the sidebar. */
 span.badge {
   margin-left: .5em;
 }
+/* Add horizontal scrollbars to <pre>s and don't wrap the code inside. */
+pre {
+  overflow-x: auto;
+}
+pre code {
+  white-space: pre;
+  word-wrap: normal;
+}
+/* Lighter background for <pre> and <code> elements. */
+pre {
+  font-size: inherit;
+  background-color: #fbfbfb;
+}
+.highlight {
+  background-color: #fbfbfb !important;
+}
+code {
+  color: inherit;
+  background-color: #fbfbfb;
+  font-size: inherit;
+}
+/* Prevent <code> elements from standing out from alerts. */
+.alert code {
+  padding: 0;
+  background-color: inherit;
+}