aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
-rw-r--r--_includes/jekyll-theme/shell.html2
-rw-r--r--_posts/2021-04-09-snippets.md9
-rw-r--r--assets/css/jekyll-theme.css1
-rw-r--r--assets/css/jekyll-theme/scrollbar.css18
-rw-r--r--assets/css/jekyll-theme/shell.css18
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;
-}