From 5a1f6e0f5018135b1c71e201315acb8b34b7ce3c Mon Sep 17 00:00:00 2001
From: Evan Pratten <ewpratten@gmail.com>
Date: Sat, 19 Dec 2020 11:47:24 -0500
Subject: [PATCH] CSS cleanup
---
_includes/footer.html | 3 +++
_sass/site/codeblock.scss | 46 ++++++++++++++++++++++++++++++++++
_sass/site/github-syntax.scss | 2 +-
_sass/site/page.scss | 7 ------
assets/css/site.scss | 3 ++-
assets/js/highlight-rewrite.js | 10 ++++++++
6 files changed, 62 insertions(+), 9 deletions(-)
create mode 100644 _sass/site/codeblock.scss
create mode 100644 assets/js/highlight-rewrite.js
diff --git a/_includes/footer.html b/_includes/footer.html
index 114fa86..1620303 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -15,6 +15,9 @@
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
+<!-- code block tweaks -->
+<script src="/assets/js/highlight-rewrite.js"></script>
+
{% if page.uses contains "masonry" %}
<!-- Masonry for card grids -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
diff --git a/_sass/site/codeblock.scss b/_sass/site/codeblock.scss
new file mode 100644
index 0000000..4303f0b
--- /dev/null
+++ b/_sass/site/codeblock.scss
@@ -0,0 +1,46 @@
+.highlight pre,
+pre {
+ font-size: 12px;
+ border: 1px #e1e4e8 solid;
+ background-color: #f6f8fa;
+}
+
+div.highlighter-rouge {
+ position: relative;
+}
+
+div.highlighter-rouge::after {
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ font-size: 12px;
+ content: attr(data-lang);
+ padding: 0 5px;
+ color: #bbc0c5;
+}
+
+.highlight pre,
+.markdown-body pre {
+ font-size: 12px;
+ border: 1px #e1e4e8 solid;
+ background-color: #f6f8fa;
+}
+
+.highlight {
+ border-radius: 5px;
+ padding: 3px;
+ margin-bottom: 0;
+}
+
+pre code,
+pre tt {
+ display: inline;
+ max-width: auto;
+ padding: 0;
+ margin: 0;
+ overflow: visible;
+ line-height: inherit;
+ word-wrap: normal;
+ background-color: transparent;
+ border: 0;
+}
\ No newline at end of file
diff --git a/_sass/site/github-syntax.scss b/_sass/site/github-syntax.scss
index 5c45e67..d58c751 100644
--- a/_sass/site/github-syntax.scss
+++ b/_sass/site/github-syntax.scss
@@ -1,4 +1,4 @@
-.highlight .hll { background-color: #ffffcc }
+.highlight .hll { background-color: #f8f8f8 }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #000000; font-weight: bold } /* Keyword */
diff --git a/_sass/site/page.scss b/_sass/site/page.scss
index 0b659cb..40d3975 100644
--- a/_sass/site/page.scss
+++ b/_sass/site/page.scss
@@ -16,13 +16,6 @@ html {
margin-top: 6rem;
}
-.highlight {
- background-color: var(--light-gray);
- border-radius: 5px;
- padding: 3px;
- margin-bottom: 0;
-}
-
img {
max-width: 99%;
}
diff --git a/assets/css/site.scss b/assets/css/site.scss
index 5166680..1207696 100644
--- a/assets/css/site.scss
+++ b/assets/css/site.scss
@@ -9,4 +9,5 @@
@import "site/home.scss";
@import "site/navigation.scss";
@import "site/page.scss";
-@import "site/kbd.scss";
\ No newline at end of file
+@import "site/kbd.scss";
+@import "site/codeblock.scss";
\ No newline at end of file
diff --git a/assets/js/highlight-rewrite.js b/assets/js/highlight-rewrite.js
new file mode 100644
index 0000000..35d61bf
--- /dev/null
+++ b/assets/js/highlight-rewrite.js
@@ -0,0 +1,10 @@
+var allCodeBlocks = document.getElementsByClassName("highlighter-rouge");
+
+for (let element of allCodeBlocks) {
+ // Look for lang data
+ element.classList.forEach(clazz => {
+ if (clazz.includes("language-")) {
+ element.dataset.lang = clazz.substring(9);
+ }
+ })
+}
\ No newline at end of file