fix: switching to github.css highlighting to fix contrast errors

_config.yml

@@ -1,5 +1,6 @@
 markdown: kramdown
 highlighter: rouge
+rouge_style: github.css
 
 exclude:
  - README.md

_includes/head.html

@@ -3,7 +3,7 @@
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
 <script src="https://kit.fontawesome.com/4eee35f757.js"></script>
-<link rel="stylesheet" href="{{ '/res/tango.css' | relative_url }}" type="text/css">
+<link rel="stylesheet" href="{{ site.rouge_style | prepend: '/res/' | relative_url }}" type="text/css">
 <link rel="stylesheet" href="{{ '/res/site.css' | relative_url }}" type="text/css">
 <script defer src="{{ '/res/site.js' | relative_url }}"></script>
 <title>{{ site.data.meta.title }}{% unless page.home %} &middot; {{ page.title }}{% endunless %}</title>

index.md

@@ -1319,19 +1319,19 @@ home: true
 
 - And then inside the notebook:
 
-{% include single.md file="src/load_ext.txt" %}
+{% include single.md file="src/load_ext.text" %}
 
 - Loads extension
 
-{% include double.md stem="jupyter_connect" suffix="txt out" %}
+{% include double.md stem="jupyter_connect" suffix="text out" %}
 
 - Connects to database
  - `sqlite:https://` with two slashes is the protocol
  - `/data/penguins.db` (one leading slash) is a local path
 - Single percent sign `%sql` introduces one-line command
 - Use double percent sign `%%sql` to indicate that the rest of the cell is SQL
 
-{% include double.md stem="jupyter_select" suffix="txt out" %}
+{% include double.md stem="jupyter_select" suffix="text out" %}
 
 <table>
  <thead>

res/bw.css

@@ -0,0 +1,67 @@
+/* This file was generated using `rougify style bw` */
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+ color: #000000;
+ background-color: #ffffff;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
+ font-style: italic;
+}
+.highlight .cp {
+}
+.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kv {
+ font-weight: bold;
+}
+.highlight .kp {
+}
+.highlight .kt {
+}
+.highlight .o, .highlight .ow {
+ font-weight: bold;
+}
+.highlight .nc {
+ font-weight: bold;
+}
+.highlight .nn {
+ font-weight: bold;
+}
+.highlight .ne {
+ font-weight: bold;
+}
+.highlight .ni {
+ font-weight: bold;
+}
+.highlight .nt {
+ font-weight: bold;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .sr, .highlight .s1, .highlight .ss {
+ font-style: italic;
+}
+.highlight .sa {
+ font-weight: bold;
+}
+.highlight .si {
+ font-weight: bold;
+}
+.highlight .se {
+ font-weight: bold;
+}
+.highlight .gh {
+ font-weight: bold;
+}
+.highlight .gu {
+ font-weight: bold;
+}
+.highlight .ge {
+ font-style: italic;
+}
+.highlight .gs {
+ font-weight: bold;
+}
+.highlight .gp {
+ font-weight: bold;
+}
+.highlight .err {
+ color: #FF0000;
+}

res/github.css

@@ -0,0 +1,113 @@
+/* This file was generated using `rougify style github` */
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+ color: #24292f;
+ background-color: #f6f8fa;
+}
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
+ color: #cf222e;
+}
+.highlight .gr {
+ color: #f6f8fa;
+}
+.highlight .gd {
+ color: #82071e;
+ background-color: #ffebe9;
+}
+.highlight .nb {
+ color: #953800;
+}
+.highlight .nc {
+ color: #953800;
+}
+.highlight .no {
+ color: #953800;
+}
+.highlight .nn {
+ color: #953800;
+}
+.highlight .sr {
+ color: #116329;
+}
+.highlight .na {
+ color: #116329;
+}
+.highlight .nt {
+ color: #116329;
+}
+.highlight .gi {
+ color: #116329;
+ background-color: #dafbe1;
+}
+.highlight .kc {
+ color: #0550ae;
+}
+.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+ color: #0550ae;
+}
+.highlight .sb {
+ color: #0550ae;
+}
+.highlight .bp {
+ color: #0550ae;
+}
+.highlight .ne {
+ color: #0550ae;
+}
+.highlight .nl {
+ color: #0550ae;
+}
+.highlight .py {
+ color: #0550ae;
+}
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
+ color: #0550ae;
+}
+.highlight .o, .highlight .ow {
+ color: #0550ae;
+}
+.highlight .gh {
+ color: #0550ae;
+ font-weight: bold;
+}
+.highlight .gu {
+ color: #0550ae;
+ font-weight: bold;
+}
+.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
+ color: #0a3069;
+}
+.highlight .nd {
+ color: #8250df;
+}
+.highlight .nf, .highlight .fm {
+ color: #8250df;
+}
+.highlight .err {
+ color: #f6f8fa;
+ background-color: #82071e;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
+ color: #6e7781;
+}
+.highlight .gl {
+ color: #6e7781;
+}
+.highlight .gt {
+ color: #6e7781;
+}
+.highlight .ni {
+ color: #24292f;
+}
+.highlight .si {
+ color: #24292f;
+}
+.highlight .ge {
+ color: #24292f;
+ font-style: italic;
+}
+.highlight .gs {
+ color: #24292f;
+ font-weight: bold;
+}

res/site.css

@@ -90,31 +90,33 @@
  * Colors
  */
 
-div.language-sh {
- border-left: solid var(--heavyborder) var(--stamp-green-light);
- padding-left: var(--mediumborder);
+div.language-sh, div.language-text {
  font-style: italic;
+ border-left: solid var(--heavyborder) var(--stamp-green-light);
+ border-top: solid var(--lightborder) var(--stamp-green-light);
+ border-bottom: solid var(--lightborder) var(--stamp-green-light);
+ padding-left: var(--heavyborder);
 }
 
 div.language-plaintext {
  border-left: solid var(--heavyborder) var(--stamp-red-light);
- padding-left: var(--mediumborder);
+ border-top: solid var(--lightborder) var(--stamp-red-light);
+ border-bottom: solid var(--lightborder) var(--stamp-red-light);
+ padding-left: var(--heavyborder);
 }
 
 div.language-py {
  border-left: solid var(--heavyborder) var(--stamp-blue-light);
- padding-left: var(--mediumborder);
+ border-top: solid var(--lightborder) var(--stamp-blue-light);
+ border-bottom: solid var(--lightborder) var(--stamp-blue-light);
+ padding-left: var(--heavyborder);
 }
 
 div.language-sql {
  border-left: solid var(--heavyborder) var(--stamp-blue-light);
- padding-left: var(--mediumborder);
-}
-
-div.language-txt {
- border-left: solid var(--heavyborder) var(--stamp-green-light);
- padding-left: var(--mediumborder);
- font-style: italic;
+ border-top: solid var(--lightborder) var(--stamp-blue-light);
+ border-bottom: solid var(--lightborder) var(--stamp-blue-light);
+ padding-left: var(--heavyborder);
 }
 
 /*
@@ -157,13 +159,17 @@ footer {
 }
 
 /*
- * Elements
+ * Clear gray background for code samples
  */
 
-section.aside {
- background-color: var(--lightgray);
+.highlight {
+ background-color: inherit;
 }
 
+/*
+ * Elements
+ */
+
 blockquote {
  padding-left: var(--medium-spacing);
  border-left: solid var(--stamp-purple-light) var(--heavyborder);