Theme fixes and updates

This commit updates the theme to fix how scrolling the right column works (it now uses calc() rather than the old buggy JS code I wrote). This commit also better styles productionlist tokens, and switches back to a light code color scheme to reduce contrast in examples.
2020-07-12 09:02:52 -07:00 · 2020-07-12 09:02:52 -07:00 · 32ca3c1ca2
parent 660fe834c6
commit 32ca3c1ca2
6 changed files with 144 additions and 145 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
 # doc builds
 docs/smithy.egg-info
 docs/dist
+docs/src
 *.pyc

 # Eclipse
--- a/docs/smithy/init.py
+++ b/docs/smithy/init.py
@ -35,6 +35,7 @@ class HTMLTranslator(SphinxHTMLTranslator):
    # Make production lists use ABNF and not BNF notation.
    def visit_productionlist(self, node):
        # type: (nodes.Node) -> None
+        node.get('classes', []).append("productionlist")
        self.body.append(self.starttag(node, 'pre'))
        lastname = None
        for production in node:
--- a/docs/themes/smithy/layout.html
+++ b/docs/themes/smithy/layout.html
@ -2,58 +2,12 @@

 {%- block extrahead %}
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="smithy-version" content="{{ version }}">
 {% endblock %}

 {%- block scripts %}
    {{ super() }}
-    <script type="text/javascript">
-        function _scroll(subjectId) {
-            var subjectElement = $(subjectId);
-            var actualSubjectHeight = subjectElement.height();
-            var startingPosition = subjectElement[0].getBoundingClientRect().top;
-            return function() {
-                var availableHeight = $(window).height() - startingPosition;
-                // Subtract the scroll position to account for sticky movement.
-                availableHeight += Math.min($(window).scrollTop(), 40);
-                var cappedHeight = Math.min(actualSubjectHeight, availableHeight);
-                if (subjectElement.css("height") !== cappedHeight) {
-                    subjectElement.css("height", cappedHeight);
-                }
-            };
-        }
-
-        // Scroll and resize the the columns when scrolled.
-        $(function() {
-            var rightScroll = _scroll("#right-column > .column-body");
-            var scrollFn = function() {
-                rightScroll.call(this, arguments);
-            };
-            scrollFn();
-            $(window).scroll(scrollFn);
-            $(window).resize(scrollFn);
-        });
-
-        // Scroll spy to change highlighted navigation element.
-        $(function() {
-            var section = document.querySelectorAll(".section");
-            var sections = {};
-            var i = 0;
-            Array.prototype.forEach.call(section, function(e) {
-                sections[e.id] = e.offsetTop;
-            });
-            var scrollSpy = function() {
-                var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
-                for (i in sections) {
-                    if (sections[i] <= scrollPosition) {
-                        $('#right-column .current').removeClass('current');
-                        $("#right-column a[href='#" + i + "']").addClass('current');
-                    }
-                }
-            };
-            $(window).scroll(scrollSpy);
-            scrollSpy();
-        });
-    </script>
+    <script type="text/javascript" src="{{ pathto('_static/smithy.js', 1) }}"></script>
 {%- endblock %}

 {%- block css -%}
@ -63,7 +17,6 @@
 {% endblock -%}

 <div id="site-container">
-
    {%- block header %}
    <header>
        <div class="header-flex width-wrapper">
@ -144,7 +97,6 @@
        </section>
        {% endif %}
    {% endblock %}
-
 </div><!-- site-container -->

 {%- block relbar2 %}{% endblock %}
--- a/docs/themes/smithy/static/default.css_t
+++ b/docs/themes/smithy/static/default.css_t
@ -39,12 +39,28 @@ blockquote {
 }

 .width-wrapper  {
-  max-width: 1120px;
+  max-width: 1140px;
  margin: auto;
  position: relative;
  padding: 0 1em;
 }

+.figure {
+  background-color: #eee;
+  border-radius: 4px;
+  padding: 3px;
+  margin-bottom: 1.5em;
+}
+
+.figure img {
+  display: block;
+  background-color: #fff;
+}
+
+.figure .caption {
+  padding: 1em 1em 0 1em;
+}
+
 /* ----- Headings ------ */

 h1, h2, h3, h4, h5, h6 {
@ -91,12 +107,12 @@ h5 {
 }

 h6 {
-  font-size: 1em;
+  font-size: 1.1em;
  font-weight: bold;
 }

 h7 {
-  font-size: 0.85em;
+  font-size: 1em;
  font-weight: bold;
 }

@ -117,7 +133,7 @@ h7 {
 }

 #splash h1 {
-  color: #fff;
+  color: #dda15e;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 1.7em;
@ -532,35 +548,29 @@ pre {
  padding: 1em;
  overflow: auto;
  line-height: 1.45;
-  background-color: #222;
+  background-color: #fff;
  border-radius: 3px;
-  font-size: 14px;
-  color: #A9B7C6;
+  border: 1px solid #ccc;
+  font-size: 15px;
+  color: #222;
  overflow-x: auto
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
 }

 code, pre {
  font-family: {{ theme_code_font }};
 }

-pre a {
-  color: #A5C25C;
-  text-decoration: underline;
-}
-
-pre a:hover {
-  color: #A5C25C;
-}
-
 /* Hacky but fixes links inside of grammars */
 pre a code.xref {
  font-size: 100%;
 }

+.productionlist strong {
+  font-size: 1.15em;
+}

 /* ----- Tables with line numbers (..code directives) ------ */

@ -660,8 +670,9 @@ table.highlighttable pre {

 .column-body {
  position: sticky;
-  top: 30px;
  overflow: auto;
+  top: 30px;
+  height: calc(100vh - 30px); /* 30px is == top */
 }

 #document-body {
@ -761,14 +772,17 @@ table.highlighttable pre {
 /* -- admonitions ----------------------------------------------------------- */

 .rubric {
-  margin: 2em 0 1em 0;
+  margin: 1.15em 0;
  font-weight: bold;
+  font-size: 1.15em;
 }

 .admonition {
  margin: 20px 0;
-  padding: 1em 0.8em;
-  border-bottom: 1px solid #ddd;
+  padding: 0 2em;
+  border-width: 0 0 0 6px;
+  border-style: solid;
+  border-color: #ccc;
 }

 .admonition dt {
@ -780,37 +794,41 @@ table.highlighttable pre {
 }

 .admonition-title {
-  margin: 0px 0 1em;
-  padding: 0;
+  margin: 0;
+  padding: 0 0.5em 0 0;
  font-size: 1em;
-  line-height: 1.1;
  font-weight: bold;
-  color: rgba(0, 0, 0, 0.6)
+  color: rgba(0, 0, 0, 0.6);
+  float: left;
+}
+
+.admonition-title:after {
+  content: ": ";
 }

 .admonition.danger,
 .admonition.error {
-  background-color: #f8d7da;
+  border-color: #f8d7da;
 }

 .admonition.important,
 .admonition.warning,
 .admonition.attention,
 .admonition.caution {
-  background-color: #f6eab7;
+  border-color: #f6eab7;
 }

 .admonition.note,
 .admonition.hint {
-  background-color: #ddecfc;
+  border-color: #ddecfc;
 }

 .admonition.tip {
-  background-color: #dff6da;
+  border-color: #dff6da;
 }

 div.seealso {
-  background-color: #eee;
+  border: none;
 }

 div.admonition tt.xref, div.admonition a tt {
--- a/docs/themes/smithy/static/pygments.css
+++ b/docs/themes/smithy/static/pygments.css
@ -1,65 +1,70 @@
-/* Based on https://github.com/smasue/pygments */
-.highlight { color: #A9B7C6; background-color: #222; border-radius: 3px; }
-.highlight .hll { background-color: #49483e; }
-.highlight .c { color: #75715e; }
-.highlight .err { color: #960050; background-color: #1e0010; }
-.highlight .k { color: #E3812E; }
-.highlight .l { color: #6897BB; }
-.highlight .n { color: #A9B7C6; }
-.highlight .o { color: #A9B7C6; }
-.highlight .p { color: #A9B7C6; }
-.highlight .cm { color: #89846d; }
-.highlight .cp { color: #75715e; }
-.highlight .c1 { color: #75715e; }
-.highlight .cs { color: #75715e; }
-.highlight .ge { font-style:italic; }
-.highlight .gs { font-weight:bold; }
-.highlight .kc { color: #E3812E; }
-.highlight .kd { color: #E3812E; }
-.highlight .kn { color: #A9B7C6; }
-.highlight .kp { color: #E3812E; }
-.highlight .kr { color: #E3812E; }
-.highlight .kt { color: #E3812E; }
-.highlight .ld { color: #A5C25C; }
-.highlight .m { color: #6897BB; }
-.highlight .s { color: #A5C25C; }
-.highlight .na { color: #9876AA; }
-.highlight .nb { color: #A9B7C6; }
-.highlight .nc { color: #cfd4c5; }
-.highlight .no { color: #E3812E; }
-.highlight .nd { color: #f1c829; }
-.highlight .ni { color: #A9B7C6; }
-.highlight .ne { color: #88be05; }
-.highlight .nf { color: #88be05; }
-.highlight .nl { color: #A9B7C6; }
-.highlight .nn { color: #A9B7C6; }
-.highlight .nx { color: #88be05; }
-.highlight .py { color: #A9B7C6; }
-.highlight .nt { color: #f1c829; }
-.highlight .nv { color: #A9B7C6; }
-.highlight .ow { color: #A9B7C6; }
-.highlight .w { color: #A9B7C6; }
-.highlight .mf { color: #6897BB; }
-.highlight .mh { color: #6897BB; }
-.highlight .mi { color: #6897BB; }
-.highlight .mo { color: #6897BB; }
-.highlight .sb { color: #A5C25C; }
-.highlight .sc { color: #A5C25C; }
-.highlight .sd { color: #A5C25C; }
-.highlight .s2 { color: #A5C25C; }
-.highlight .se { color: #6897BB; }
-.highlight .sh { color: #A5C25C; }
-.highlight .si { color: #A5C25C; }
-.highlight .sx { color: #A5C25C; }
-.highlight .sr { color: #A5C25C; }
-.highlight .s1 { color: #A5C25C; }
-.highlight .ss { color: #A5C25C; }
-.highlight .bp { color: #A9B7C6; }
-.highlight .vc { color: #CFD4C5; font-style: italic; }
-.highlight .vg { color: #A9B7C6; }
-.highlight .vi { color: #A9B7C6; }
-.highlight .il { color: #6897BB; }
-.highlight .gu { color: #75715e; }
-.highlight .gd { color: #A9B7C6; }
-.highlight .gi { color: #88be05; }
-.highlight .l-Scalar-Plain { color: #88be05; }
+/* https://github.com/PhilipTrauner/pygments-github-css/blob/master/LICENSE */
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f8f8f8; }
+.highlight .c { color: #6a737d } /* Comment */
+.highlight .err {  } /* Error */
+.highlight .k { color: #d73a49 } /* Keyword */
+.highlight .o { } /* Operator */
+.highlight .ch { color: #6a737d } /* Comment.Hashbang */
+.highlight .cm { color: #6a737d } /* Comment.Multiline */
+.highlight .cp { color: #d73a49 } /* Comment.Preproc */
+.highlight .cpf { color: #032f62 } /* Comment.PreprocFile */
+.highlight .c1 { color: #6a737d } /* Comment.Single */
+.highlight .cs { color: #6a737d } /* Comment.Special */
+.highlight .gd { color: #b31d28; background-color: #ffeef0 } /* Generic.Deleted */
+.highlight .ge {  } /* Generic.Emph */
+.highlight .gr {  } /* Generic.Error */
+.highlight .gh { color: #005cc5 } /* Generic.Heading */
+.highlight .gi { color: #22863a; background-color: #f0fff4 } /* Generic.Inserted */
+.highlight .go {  } /* Generic.Output */
+.highlight .gp {  } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #6f42c1; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #005cc5 } /* Keyword.Constant */
+.highlight .kd { color: #d73a49; font-weight: bold; } /* Keyword.Declaration */
+.highlight .kn { color: #d73a49 } /* Keyword.Namespace */
+.highlight .kp { color: #d73a49 } /* Keyword.Pseudo */
+.highlight .kr { color: #d73a49 } /* Keyword.Reserved */
+.highlight .kt { color: #d73a49 } /* Keyword.Type */
+.highlight .m { color: #666666 } /* Literal.Number */
+.highlight .s { color: #032f62 } /* Literal.String */
+.highlight .na { } /* Name.Attribute */
+.highlight .nb { color: #005cc5 } /* Name.Builtin */
+.highlight .nc { color: #6f42c1; font-weight: bold; } /* Name.Class */
+.highlight .no { color: #005cc5 } /* Name.Constant */
+.highlight .nd { color: #6f42c1 } /* Name.Decorator */
+.highlight .ni { color: #005cc5 } /* Name.Entity */
+.highlight .ne { color: #005cc5 } /* Name.Exception */
+.highlight .nf { color: #6f42c1 } /* Name.Function */
+.highlight .nl { color: #005cc5 } /* Name.Label */
+.highlight .nn { color: #6f42c1 } /* Name.Namespace */
+.highlight .nt { color: #22863a } /* Name.Tag */
+.highlight .nv { color: #24292e } /* Name.Variable */
+.highlight .ow { color: #d73a49; } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #005cc5 } /* Literal.Number.Bin */
+.highlight .mf { color: #005cc5 } /* Literal.Number.Float */
+.highlight .mh { color: #005cc5 } /* Literal.Number.Hex */
+.highlight .mi { color: #005cc5 } /* Literal.Number.Integer */
+.highlight .mo { color: #005cc5 } /* Literal.Number.Oct */
+.highlight .sa { color: #d73a49 } /* Literal.String.Affix */
+.highlight .sb { color: #032f62 } /* Literal.String.Backtick */
+.highlight .sc { color: #032f62 } /* Literal.String.Char */
+.highlight .dl { color: #d73a49 } /* Literal.String.Delimiter */
+.highlight .sd { color: #032f62 } /* Literal.String.Doc */
+.highlight .s2 { color: #032f62 } /* Literal.String.Double */
+.highlight .se { color: #032f62 } /* Literal.String.Escape */
+.highlight .sh { color: #032f62 } /* Literal.String.Heredoc */
+.highlight .si { color: #005cc5 } /* Literal.String.Interpol */
+.highlight .sx { color: #032f62 } /* Literal.String.Other */
+.highlight .sr { color: #032f62 } /* Literal.String.Regex */
+.highlight .s1 { color: #032f62 } /* Literal.String.Single */
+.highlight .ss { color: #005cc5 } /* Literal.String.Symbol */
+.highlight .bp { color: #005cc5 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #005cc5 } /* Name.Function.Magic */
+.highlight .vc { color: #24292e; font-style: italic; } /* Name.Variable.Class */
+.highlight .vg { color: #24292e } /* Name.Variable.Global */
+.highlight .vi { color: #24292e } /* Name.Variable.Instance */
+.highlight .vm { color: #005cc5 } /* Name.Variable.Magic */
+.highlight .il { color: #005cc5 } /* Literal.Number.Integer.Long */
--- a/docs/themes/smithy/static/smithy.js
+++ b/docs/themes/smithy/static/smithy.js
@ -0,0 +1,22 @@
+$(function() {
+    // Scroll spy to change highlighted navigation element.
+    const scrollSpy = function() {
+        const section = document.querySelectorAll(".section");
+        const sections = {};
+        Array.prototype.forEach.call(section, function (e) {
+            sections[e.id] = e.offsetTop;
+        });
+        return function() {
+            const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
+            for (let i in sections) {
+                if (sections[i] <= scrollPosition) {
+                    $('#right-column .current').removeClass('current');
+                    $("#right-column a[href='#" + i + "']").addClass('current');
+                }
+            }
+        };
+    }();
+
+    $(window).scroll(scrollSpy);
+    scrollSpy();
+});