Improve Aesthetics and utility of docs (#1455; MSAC)

cuthbertLab · Oct 8, 2022 · 16a490d · 16a490d
2 parents 1db1f1e + 48ae316
commit 16a490d
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 95 deletions.
diff --git a/documentation/source/_themes/m21/layout.html b/documentation/source/_themes/m21/layout.html
@@ -5,8 +5,12 @@
 {%- endblock -%}
 
 {%- block extrahead -%}
-<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
-<script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js'></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,700;1,400;1,700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js'></script>
+
 {%- endblock -%}
 
 {%- block scripts %}

diff --git a/documentation/source/_themes/m21/static/m21.css b/documentation/source/_themes/m21/static/m21.css
@@ -7,9 +7,9 @@
 /* -- page layout ----------------------------------------------------------- */
 
 body {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Bitter', serif;
     font-size: 15px;
-    line-height: 150%;
+    line-height: 160%;
     text-align: center;
     color: #2b3600;
     padding: 0;
@@ -18,7 +18,7 @@ body {
     -moz-box-shadow: 0px 0px 10px #93a1a1;
     -webkit-box-shadow: 0px 0px 10px #93a1a1;
     box-shadow: 0px 0px 10px #93a1a1;
-    background: #b3cccc;
+    background: #93787e;
     }
 
 .clearer {
@@ -31,6 +31,7 @@ body {
   text-decoration: line-through;
 }
 
+
 pre, div[class*="highlight-"] {
     clear: left;
 }
@@ -59,7 +60,7 @@ div.body {
 div.related {
     font-size: 1em;
     /*background: #002b36;*/
-    background-color: #2e3436;
+    background-color: #473d42;
     color: #839496;
     padding: 5px 0px;
     }
@@ -122,11 +123,13 @@ div.sphinxsidebar h3, div.sphinxsidebar h4 {
     margin: 1em 0 0.5em 0;
     font-size: 1em;
     padding: 0.7em;
-    background-color: #eeeff1;
+    color: white;
+    background-color: #7a4f6d;
+    border-radius: 8px;
     }
 
 div.sphinxsidebar h3 a {
-    color: #2E3436;
+    color: #f9c7d1;
     }
 
 div.sphinxsidebar ul {
@@ -166,17 +169,18 @@ p {
     }
 
 div.body a, div.sphinxsidebarwrapper a {
-    color: #dc322f;
+    color: #704c97;
     /* color: #268bd2; */
     text-decoration: none;
     }
 
 div.body a:hover, div.sphinxsidebarwrapper a:hover {
-    border-bottom: 1px solid #268bd2;
+    border-bottom: 1px solid #d22688;
+    // this is the text-decoration alternative
     }
 
 h1, h2, h3, h4, h5, h6, p.rubric {
-    font-family: "Open Sans", sans-serif;
+    font-family: 'Bitter', serif;
     font-weight: 400;
     }
 
@@ -270,9 +274,9 @@ a.headerlink:hover {
 
 
 cite, code, tt {
-    font-family: 'Source Code Pro', monospace;
-    font-size: 0.9em;
-    letter-spacing: 0.05em;
+    font-family: 'Courier Prime', monospace;
+    font-size: 1.1em;
+    // letter-spacing: 0.05em;
     font-style: normal;
     }
 
@@ -283,19 +287,19 @@ hr {
     }
 
 .highlight {
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    border-radius: 2px;
-    background-color: #eef6f6;
+    border-radius: 8px;
+    background-color: #ededed;
     }
 
 div.ipython-result div.highlight {
-    background-color: #e8e8db;
-    margin-top: -12px; /* close the gap!  */
+    background-color: #e8dbdb;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    margin-top: -20px; /* close the gap!  */
 }
 
 pre {
-    font-family: 'Source Code Pro', monospace;
+    font-family: 'Courier Prime', monospace;
     font-style: normal;
     font-size: 0.9em;
     letter-spacing: 0.015em;
@@ -424,16 +428,12 @@ div.viewcode-block:target {
     background-color: #FFFFf0;
     /*border: 1px dashed #aaa;*/
     color: #304030;
-    font-family: 'Source Code Pro', monospace;
+    font-family: 'Courier Prime', monospace;
     font-style: normal;
     font-size: 0.9em;
     letter-spacing: 0.015em;
     line-height: 120%;
     padding: 0.7em;
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
     word-wrap: break-word;
     }
 
@@ -462,6 +462,31 @@ dt em.sig-param:last-of-type::after {
     white-space: pre;
 }
 
+/* parameter name in method/function and ':' */
+dt em.sig-param .n, dt em.sig-param .p {
+    font-style: normal;
+}
+
+/* equal sign small space. */
+dt em.sig-param .o {
+    font-style: normal;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+/* ...except if there already is a space. */
+dt em.sig-param .w + .o {
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+
+/* When linked from somewhere else */
+dt:target, span.highlighted {
+    /* yellow was too obnoxious */
+    background-color: #ffeedb;
+}
+
 /* To have blue background of width of the block (instead of width of content) */
 dl.class > dt:first-of-type {
     display: block !important;

diff --git a/documentation/source/_themes/m21/static/pygments.css b/documentation/source/_themes/m21/static/pygments.css
@@ -1,71 +1,78 @@
 /* Pygments not copying the proper file, so this is in the m21 theme */
+/* Currently, this is Lovelace */
 
-// .highlight .hll { background-color: #ffffcc }
-// .highlight  { background: #ffffff; }
-.highlight .c { color: #888888 } /* Comment */
-.highlight .err { color: #FF0000; background-color: #FFAAAA } /* Error */
-.highlight .k { color: #008800; font-weight: bold } /* Keyword */
-.highlight .o { color: #336633 } /* Operator */
-.highlight .ch { color: #888888 } /* Comment.Hashbang */
-.highlight .cm { color: #888888 } /* Comment.Multiline */
-.highlight .cp { color: #557799 } /* Comment.Preproc */
-.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
-.highlight .c1 { color: #888888 } /* Comment.Single */
-.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
-.highlight .gd { color: #A00000 } /* Generic.Deleted */
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.highlight .hll { background-color: #ffffcc }
+.highlight { background: #ffffff; }
+.highlight .c { color: #888888; font-style: italic } /* Comment */
+.highlight .err { background-color: #a848a8 } /* Error */
+.highlight .k { color: #2838b0 } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .p { color: #888888 } /* Punctuation */
+.highlight .ch { color: #287088; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #888888; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #289870 } /* Comment.Preproc */
+.highlight .cpf { color: #888888; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #888888; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #888888; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #c02828 } /* Generic.Deleted */
 .highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #FF0000 } /* Generic.Error */
-.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.highlight .gi { color: #00A000 } /* Generic.Inserted */
-.highlight .go { color: #888888 } /* Generic.Output */
-.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gr { color: #c02828 } /* Generic.Error */
+.highlight .gh { color: #666666 } /* Generic.Heading */
+.highlight .gi { color: #388038 } /* Generic.Inserted */
+.highlight .go { color: #666666 } /* Generic.Output */
+.highlight .gp { color: #444444 } /* Generic.Prompt */
 .highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.highlight .gt { color: #0044DD } /* Generic.Traceback */
-.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: #003388; font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #333399; font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #6600EE; font-weight: bold } /* Literal.Number */
-.highlight .s { font-style: italic; color: #a0a0ff } /* Literal.String */
-.highlight .na { color: #0000CC } /* Name.Attribute */
-.highlight .nb { color: #007020 } /* Name.Builtin */
-.highlight .nc { color: #BB0066; font-weight: bold } /* Name.Class */
-.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
-.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
-.highlight .ni { color: #880000; font-weight: bold } /* Name.Entity */
-.highlight .ne { color: #FF0000; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #0066BB; font-weight: bold } /* Name.Function */
-.highlight .nl { color: #997700; font-weight: bold } /* Name.Label */
-.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
-.highlight .nt { color: #007700 } /* Name.Tag */
-.highlight .nv { color: #996633 } /* Name.Variable */
-.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mb { color: #6600EE; font-weight: bold } /* Literal.Number.Bin */
-.highlight .mf { color: #6600EE; font-weight: bold } /* Literal.Number.Float */
-.highlight .mh { color: #005588; font-weight: bold } /* Literal.Number.Hex */
-.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
-.highlight .mo { color: #4400EE; font-weight: bold } /* Literal.Number.Oct */
-.highlight .sa { background-color: #fff0f0 } /* Literal.String.Affix */
-.highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
-.highlight .sc { color: #0044DD } /* Literal.String.Char */
-.highlight .dl { background-color: #fff0f0 } /* Literal.String.Delimiter */
-.highlight .sd { color: #DD4422 } /* Literal.String.Doc */
-.highlight .s2 { font-style: italic; color: #a0a0ff } /* Literal.String.Double */
-.highlight .se { color: #666666; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
-.highlight .sh { font-style: italic; color: #a0a0ff } /* Literal.String.Heredoc */
-.highlight .si { background-color: #eeeeee } /* Literal.String.Interpol */
-.highlight .sx { color: #DD2200; background-color: #fff0f0 } /* Literal.String.Other */
-.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
-.highlight .s1 { font-style: italic; color: #a0a0ff } /* Literal.String.Single */
-.highlight .ss { color: #AA6600 } /* Literal.String.Symbol */
-.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
-.highlight .fm { color: #0066BB; font-weight: bold } /* Name.Function.Magic */
-.highlight .vc { color: #336699 } /* Name.Variable.Class */
-.highlight .vg { color: #dd7700; font-weight: bold } /* Name.Variable.Global */
-.highlight .vi { color: #3333BB } /* Name.Variable.Instance */
-.highlight .vm { color: #996633 } /* Name.Variable.Magic */
-.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
+.highlight .gu { color: #444444 } /* Generic.Subheading */
+.highlight .gt { color: #2838b0 } /* Generic.Traceback */
+.highlight .kc { color: #444444; font-style: italic } /* Keyword.Constant */
+.highlight .kd { color: #2838b0; font-style: italic } /* Keyword.Declaration */
+.highlight .kn { color: #2838b0 } /* Keyword.Namespace */
+.highlight .kp { color: #2838b0 } /* Keyword.Pseudo */
+.highlight .kr { color: #2838b0 } /* Keyword.Reserved */
+.highlight .kt { color: #2838b0; font-style: italic } /* Keyword.Type */
+.highlight .m { color: #444444 } /* Literal.Number */
+.highlight .s { color: #b83838 } /* Literal.String */
+.highlight .na { color: #388038 } /* Name.Attribute */
+.highlight .nb { color: #388038 } /* Name.Builtin */
+.highlight .nc { color: #287088 } /* Name.Class */
+.highlight .no { color: #b85820 } /* Name.Constant */
+.highlight .nd { color: #287088 } /* Name.Decorator */
+.highlight .ni { color: #709030 } /* Name.Entity */
+.highlight .ne { color: #908828 } /* Name.Exception */
+.highlight .nf { color: #785840 } /* Name.Function */
+.highlight .nl { color: #289870 } /* Name.Label */
+.highlight .nn { color: #289870 } /* Name.Namespace */
+.highlight .nt { color: #2838b0 } /* Name.Tag */
+.highlight .nv { color: #b04040 } /* Name.Variable */
+.highlight .ow { color: #a848a8 } /* Operator.Word */
+.highlight .w { color: #a89028 } /* Text.Whitespace */
+.highlight .mb { color: #444444 } /* Literal.Number.Bin */
+.highlight .mf { color: #444444 } /* Literal.Number.Float */
+.highlight .mh { color: #444444 } /* Literal.Number.Hex */
+.highlight .mi { color: #444444 } /* Literal.Number.Integer */
+.highlight .mo { color: #444444 } /* Literal.Number.Oct */
+.highlight .sa { color: #444444 } /* Literal.String.Affix */
+.highlight .sb { color: #b83838 } /* Literal.String.Backtick */
+.highlight .sc { color: #a848a8 } /* Literal.String.Char */
+.highlight .dl { color: #b85820 } /* Literal.String.Delimiter */
+.highlight .sd { color: #b85820; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #b83838 } /* Literal.String.Double */
+.highlight .se { color: #709030 } /* Literal.String.Escape */
+.highlight .sh { color: #b83838 } /* Literal.String.Heredoc */
+.highlight .si { color: #b83838; text-decoration: underline } /* Literal.String.Interpol */
+.highlight .sx { color: #a848a8 } /* Literal.String.Other */
+.highlight .sr { color: #a848a8 } /* Literal.String.Regex */
+.highlight .s1 { color: #b83838 } /* Literal.String.Single */
+.highlight .ss { color: #b83838 } /* Literal.String.Symbol */
+.highlight .bp { color: #388038; font-style: italic } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #b85820 } /* Name.Function.Magic */
+.highlight .vc { color: #b04040 } /* Name.Variable.Class */
+.highlight .vg { color: #908828 } /* Name.Variable.Global */
+.highlight .vi { color: #b04040 } /* Name.Variable.Instance */
+.highlight .vm { color: #b85820 } /* Name.Variable.Magic */
+.highlight .il { color: #444444 } /* Literal.Number.Integer.Long */
diff --git a/documentation/source/_themes/m21/theme.conf b/documentation/source/_themes/m21/theme.conf
@@ -1,5 +1,6 @@
 [theme]
 inherit = basic
 stylesheet = m21.css
-pygments_style = fruity
-# note that pygments_style is not currently used
+pygments_style = 'lovelace'
+# note that pygments_style is not currently used for some reason, so copy
+# the appropriate CSS file from pygments to documentation/source/_themes/m21/static/pygments.css