move scrollbar styling to scrollbar.css

5 files changed, 29 insertions, 19 deletions

diff --git a/_includes/jekyll-theme/shell.html b/_includes/jekyll-theme/shell.html
index 9b7ed4d..7fa0838 100644
--- a/_includes/jekyll-theme/shell.html
+++ b/_includes/jekyll-theme/shell.html
@@ -15,7 +15,7 @@
 {% endfor %}
 {% assign cmd = new_cmd %}
 {% assign cmd = cmd | join: '' %}
-<div>
+<div class='pretty-scrollbar'>
   <pre class="shell-mark">$</pre><pre class="shell-cmd">{{ cmd }}</pre>
 </div>
 {% if include.out %}
diff --git a/_posts/2021-04-09-snippets.md b/_posts/2021-04-09-snippets.md
index 3621e80..7b8206d 100644
--- a/_posts/2021-04-09-snippets.md
+++ b/_posts/2021-04-09-snippets.md
@@ -50,3 +50,12 @@ main
 ```
 
 Also, some inline code: `./test.sh`!
+
+Here's a snippet which requires a horizontal scrollbar to display, it should
+look OK:
+
+```
+#!/usr/bin/env bash
+
+echo AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA What a long snippet
+```
diff --git a/assets/css/jekyll-theme.css b/assets/css/jekyll-theme.css
index 5491dcb..79fde65 100644
--- a/assets/css/jekyll-theme.css
+++ b/assets/css/jekyll-theme.css
@@ -1,6 +1,7 @@
 @import 'jekyll-theme/fix_bootstrap.css';
 @import 'jekyll-theme/footer.css';
 @import 'jekyll-theme/posts.css';
+@import 'jekyll-theme/scrollbar.css';
 @import 'jekyll-theme/shell.css';
 @import 'jekyll-theme/snippets.css';
 @import 'jekyll-theme/syntax.css';
diff --git a/assets/css/jekyll-theme/scrollbar.css b/assets/css/jekyll-theme/scrollbar.css
new file mode 100644
index 0000000..8e7bf01
--- /dev/null
+++ b/assets/css/jekyll-theme/scrollbar.css
@@ -0,0 +1,18 @@
+/* Scrollbars. */
+/* Firefox: */
+.pretty-scrollbar, pre {
+  scrollbar-width: thin;
+  scrollbar-color: #ccc #f0f0f0;
+}
+/* Chrome: */
+.pretty-scrollbar::-webkit-scrollbar, pre::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.pretty-scrollbar::-webkit-scrollbar-track, pre::-webkit-scrollbar-track {
+  background: #f0f0f0;
+}
+.pretty-scrollbar::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb {
+  background: #ccc;
+}
+
diff --git a/assets/css/jekyll-theme/shell.css b/assets/css/jekyll-theme/shell.css
index e68543b..215d610 100644
--- a/assets/css/jekyll-theme/shell.css
+++ b/assets/css/jekyll-theme/shell.css
@@ -50,21 +50,3 @@
 .shell-out {
   border-width: 0 0 thin 0;
 }
-
-/* Scrollbars. */
-/* Firefox: */
-.shell * {
-  scrollbar-width: thin;
-  scrollbar-color: #ccc #f0f0f0;
-}
-/* Chrome: */
-.shell *::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-.shell *::-webkit-scrollbar-track {
-  background: #f0f0f0;
-}
-.shell *::-webkit-scrollbar-thumb {
-  background: #ccc;
-}