Fix #2: improve contrast and colours

* Add custom style w/ blue links and darker text * Change syntax highlighting to match notebooks better --------- Co-authored-by: michael <[email protected]>
dsa-ou · Feb 8, 2024 · 5682821 · 5682821
2 parents 7866907 + 7e62832
commit 5682821
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 14 deletions.
diff --git a/docs/Gemfile b/docs/Gemfile
@@ -6,4 +6,5 @@ gem "jekyll", "~> 4.3.3" # installed by `gem jekyll`
 # gem "webrick"        # required when using Ruby >= 3 and Jekyll <= 4.2.2
 
 # gem "just-the-docs", "0.7.0" # pinned to the current release
-gem "just-the-docs"        # always download the latest release
+gem "just-the-docs"        # always download the latest release
+gem "json", "~> 2.7"
diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
@@ -44,6 +44,7 @@ GEM
       jekyll (>= 3.8, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
+    json (2.7.1)
     just-the-docs (0.7.0)
       jekyll (>= 3.8.5)
       jekyll-include-cache
@@ -68,18 +69,18 @@ GEM
     rexml (3.2.6)
     rouge (4.2.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.70.0-aarch64-linux-gnu)
-      google-protobuf (~> 3.25)
-    sass-embedded (1.70.0-arm-linux-gnueabihf)
-      google-protobuf (~> 3.25)
-    sass-embedded (1.70.0-arm64-darwin)
-      google-protobuf (~> 3.25)
-    sass-embedded (1.70.0-x86-linux-gnu)
-      google-protobuf (~> 3.25)
-    sass-embedded (1.70.0-x86_64-darwin)
-      google-protobuf (~> 3.25)
-    sass-embedded (1.70.0-x86_64-linux-gnu)
-      google-protobuf (~> 3.25)
+    sass-embedded (1.69.5-aarch64-linux-gnu)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.69.5-arm-linux-gnueabihf)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.69.5-arm64-darwin)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.69.5-x86-linux-gnu)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.69.5-x86_64-darwin)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.69.5-x86_64-linux-gnu)
+      google-protobuf (~> 3.23)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.5.0)
@@ -95,6 +96,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll (~> 4.3.3)
+  json (~> 2.7)
   just-the-docs
 
 BUNDLED WITH

diff --git a/docs/_config.yml b/docs/_config.yml
@@ -32,4 +32,8 @@ enable_copy_code_button: true
 
 # New configuration option, defined in _layouts/default.html:
 # open external sites in new browser tabs, to not lose guidance context.
-all_external_links_new_tab: true
+all_external_links_new_tab: true
+
+# Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
+# algoesup color scheme defined in _sass/color_schemes/algoesup.scss
+color_scheme: algoesup
diff --git a/docs/_sass/color_schemes/algoesup.scss b/docs/_sass/color_schemes/algoesup.scss
@@ -0,0 +1,4 @@
+
+$body-text-color: $grey-dk-200;
+$link-color: $blue-100;
+@import "../_sass/rouge_schemes/colorful"; // Syntax highlighting scheme
diff --git a/docs/_sass/rouge_schemes/colorful.scss b/docs/_sass/rouge_schemes/colorful.scss
@@ -0,0 +1,163 @@
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1 {
+  color: darken(#888, 15%);
+}
+.highlight .cp {
+  color: #579;
+}
+.highlight .cs {
+  color: #cc0000;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kv, .highlight .kp {
+  color: #080;
+  font-weight: bold;
+}
+.highlight .o {
+  color: #aa23ff;
+}
+.highlight .ow {
+  color: #080;
+  font-weight: bold;
+}
+.highlight .nb, .highlight .bp {
+  color: #007020;
+}
+.highlight .nf { 
+  color: #00C;
+}
+.highlight .fm { 
+  color: #080;
+}
+.highlight .nc {
+  color: #B06;
+  font-weight: bold;
+}
+.highlight .nn {
+  color: #0e84b5;
+  font-weight: bold;
+}
+.highlight .ne {
+  color: #F00;
+  font-weight: bold;
+}
+.highlight .nv, .highlight .vm {
+  color: #963;
+}
+.highlight .vi {
+  color: #33B;
+}
+.highlight .vc {
+  color: #369;
+}
+.highlight .vg {
+  color: #d70;
+  font-weight: bold;
+}
+.highlight .no {
+  color: #036;
+  font-weight: bold;
+}
+.highlight .nl {
+  color: #970;
+  font-weight: bold;
+}
+.highlight .ni {
+  color: #800;
+  font-weight: bold;
+}
+.highlight .na {
+  color: #00C;
+}
+.highlight .nt {
+  color: #070;
+}
+.highlight .nd {
+  color: #555;
+  font-weight: bold;
+}
+.highlight .s, .highlight .sb, .highlight .dl, .highlight .s2, .highlight .sh, .highlight .s1 {
+  color: #ba2220;
+}
+.highlight .sa {
+  color: #080;
+  font-weight: bold;
+}
+.highlight .sc {
+  color: #04D;
+}
+.highlight .sd {
+  color: #D42;
+}
+.highlight .si {
+  background-color: #eee;
+}
+.highlight .se {
+  color: #666;
+  font-weight: bold;
+}
+.highlight .sr {
+  color: #000;
+  background-color: #fff0ff;
+}
+.highlight .ss {
+  color: #A60;
+}
+.highlight .sx {
+  color: #D20;
+}
+.highlight .m, .highlight .mb, .highlight .mx {
+  color: #60E;
+  font-weight: bold;
+}
+.highlight .mi, .highlight .il {
+  color: #00A000;
+}
+.highlight .mf {
+  color: #60E;
+  font-weight: bold;
+}
+.highlight .mh {
+  color: #058;
+  font-weight: bold;
+}
+.highlight .mo {
+  color: #40E;
+  font-weight: bold;
+}
+.highlight .gh {
+  color: #000080;
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #800080;
+  font-weight: bold;
+}
+.highlight .gd {
+  color: #A00000;
+}
+.highlight .gi {
+  color: #00A000;
+}
+.highlight .gr {
+  color: #FF0000;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gp {
+  color: #c65d09;
+  font-weight: bold;
+}
+.highlight .go {
+  color: #888;
+}
+.highlight .gt {
+  color: #04D;
+}
+.highlight .err {
+  color: #F00;
+  background-color: #FAA;
+}