dnrops
/
smithy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Michael Dowling 2020-07-12 09:02:52 -07:00
parent 660fe834c6
commit 32ca3c1ca2
6 changed files with 144 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
# doc builds # doc builds
docs/smithy.egg-info docs/smithy.egg-info
docs/dist docs/dist
docs/src
*.pyc *.pyc
# Eclipse # Eclipse

1
docs/smithy/__init__.py
View File

@ -35,6 +35,7 @@ class HTMLTranslator(SphinxHTMLTranslator):
# Make production lists use ABNF and not BNF notation. # Make production lists use ABNF and not BNF notation.
def visit_productionlist(self, node): def visit_productionlist(self, node):
# type: (nodes.Node) -> None # type: (nodes.Node) -> None
node.get('classes', []).append("productionlist")
self.body.append(self.starttag(node, 'pre')) self.body.append(self.starttag(node, 'pre'))
lastname = None lastname = None
for production in node: for production in node:

52
docs/themes/smithy/layout.html vendored
View File

@ -2,58 +2,12 @@
{%- block extrahead %} {%- block extrahead %}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="smithy-version" content="{{ version }}">
{% endblock %} {% endblock %}
{%- block scripts %} {%- block scripts %}
{{ super() }} {{ super() }}
<script type="text/javascript"> <script type="text/javascript" src="{{ pathto('_static/smithy.js', 1) }}"></script>
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>
{%- endblock %} {%- endblock %}
{%- block css -%} {%- block css -%}
@ -63,7 +17,6 @@
{% endblock -%} {% endblock -%}
<div id="site-container"> <div id="site-container">
{%- block header %} {%- block header %}
<header> <header>
<div class="header-flex width-wrapper"> <div class="header-flex width-wrapper">
@ -144,7 +97,6 @@
</section> </section>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
</div><!-- site-container --> </div><!-- site-container -->
{%- block relbar2 %}{% endblock %} {%- block relbar2 %}{% endblock %}

78
docs/themes/smithy/static/default.css_t vendored
View File

@ -39,12 +39,28 @@ blockquote {
} }
.width-wrapper { .width-wrapper {
max-width: 1120px; max-width: 1140px;
margin: auto; margin: auto;
position: relative; position: relative;
padding: 0 1em; 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 ------ */ /* ----- Headings ------ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -91,12 +107,12 @@ h5 {
} }
h6 { h6 {
font-size: 1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
h7 { h7 {
font-size: 0.85em; font-size: 1em;
font-weight: bold; font-weight: bold;
} }
@ -117,7 +133,7 @@ h7 {
} }
#splash h1 { #splash h1 {
color: #fff; color: #dda15e;
padding: 0; padding: 0;
margin: 0 0 1rem; margin: 0 0 1rem;
font-size: 1.7em; font-size: 1.7em;
@ -532,35 +548,29 @@ pre {
padding: 1em; padding: 1em;
overflow: auto; overflow: auto;
line-height: 1.45; line-height: 1.45;
background-color: #222; background-color: #fff;
border-radius: 3px; border-radius: 3px;
font-size: 14px; border: 1px solid #ccc;
color: #A9B7C6; font-size: 15px;
color: #222;
overflow-x: auto overflow-x: auto
white-space: pre; white-space: pre;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
} }
code, pre { code, pre {
font-family: {{ theme_code_font }}; font-family: {{ theme_code_font }};
} }
pre a {
color: #A5C25C;
text-decoration: underline;
}
pre a:hover {
color: #A5C25C;
}
/* Hacky but fixes links inside of grammars */ /* Hacky but fixes links inside of grammars */
pre a code.xref { pre a code.xref {
font-size: 100%; font-size: 100%;
} }
.productionlist strong {
font-size: 1.15em;
}
/* ----- Tables with line numbers (..code directives) ------ */ /* ----- Tables with line numbers (..code directives) ------ */
@ -660,8 +670,9 @@ table.highlighttable pre {
.column-body { .column-body {
position: sticky; position: sticky;
top: 30px;
overflow: auto; overflow: auto;
top: 30px;
height: calc(100vh - 30px); /* 30px is == top */
} }
#document-body { #document-body {
@ -761,14 +772,17 @@ table.highlighttable pre {
/* -- admonitions ----------------------------------------------------------- */ /* -- admonitions ----------------------------------------------------------- */
.rubric { .rubric {
margin: 2em 0 1em 0; margin: 1.15em 0;
font-weight: bold; font-weight: bold;
font-size: 1.15em;
} }
.admonition { .admonition {
margin: 20px 0; margin: 20px 0;
padding: 1em 0.8em; padding: 0 2em;
border-bottom: 1px solid #ddd; border-width: 0 0 0 6px;
border-style: solid;
border-color: #ccc;
} }
.admonition dt { .admonition dt {
@ -780,37 +794,41 @@ table.highlighttable pre {
} }
.admonition-title { .admonition-title {
margin: 0px 0 1em; margin: 0;
padding: 0; padding: 0 0.5em 0 0;
font-size: 1em; font-size: 1em;
line-height: 1.1;
font-weight: bold; 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.danger,
.admonition.error { .admonition.error {
background-color: #f8d7da; border-color: #f8d7da;
} }
.admonition.important, .admonition.important,
.admonition.warning, .admonition.warning,
.admonition.attention, .admonition.attention,
.admonition.caution { .admonition.caution {
background-color: #f6eab7; border-color: #f6eab7;
} }
.admonition.note, .admonition.note,
.admonition.hint { .admonition.hint {
background-color: #ddecfc; border-color: #ddecfc;
} }
.admonition.tip { .admonition.tip {
background-color: #dff6da; border-color: #dff6da;
} }
div.seealso { div.seealso {
background-color: #eee; border: none;
} }
div.admonition tt.xref, div.admonition a tt { div.admonition tt.xref, div.admonition a tt {

135
docs/themes/smithy/static/pygments.css vendored
View File

@ -1,65 +1,70 @@
/* Based on https://github.com/smasue/pygments */ /* https://github.com/PhilipTrauner/pygments-github-css/blob/master/LICENSE */
.highlight { color: #A9B7C6; background-color: #222; border-radius: 3px; } .highlight .hll { background-color: #ffffcc }
.highlight .hll { background-color: #49483e; } .highlight { background: #f8f8f8; }
.highlight .c { color: #75715e; } .highlight .c { color: #6a737d } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010; } .highlight .err { } /* Error */
.highlight .k { color: #E3812E; } .highlight .k { color: #d73a49 } /* Keyword */
.highlight .l { color: #6897BB; } .highlight .o { } /* Operator */
.highlight .n { color: #A9B7C6; } .highlight .ch { color: #6a737d } /* Comment.Hashbang */
.highlight .o { color: #A9B7C6; } .highlight .cm { color: #6a737d } /* Comment.Multiline */
.highlight .p { color: #A9B7C6; } .highlight .cp { color: #d73a49 } /* Comment.Preproc */
.highlight .cm { color: #89846d; } .highlight .cpf { color: #032f62 } /* Comment.PreprocFile */
.highlight .cp { color: #75715e; } .highlight .c1 { color: #6a737d } /* Comment.Single */
.highlight .c1 { color: #75715e; } .highlight .cs { color: #6a737d } /* Comment.Special */
.highlight .cs { color: #75715e; } .highlight .gd { color: #b31d28; background-color: #ffeef0 } /* Generic.Deleted */
.highlight .ge { font-style:italic; } .highlight .ge { } /* Generic.Emph */
.highlight .gs { font-weight:bold; } .highlight .gr { } /* Generic.Error */
.highlight .kc { color: #E3812E; } .highlight .gh { color: #005cc5 } /* Generic.Heading */
.highlight .kd { color: #E3812E; } .highlight .gi { color: #22863a; background-color: #f0fff4 } /* Generic.Inserted */
.highlight .kn { color: #A9B7C6; } .highlight .go { } /* Generic.Output */
.highlight .kp { color: #E3812E; } .highlight .gp { } /* Generic.Prompt */
.highlight .kr { color: #E3812E; } .highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .kt { color: #E3812E; } .highlight .gu { color: #6f42c1; font-weight: bold } /* Generic.Subheading */
.highlight .ld { color: #A5C25C; } .highlight .gt { color: #0044DD } /* Generic.Traceback */
.highlight .m { color: #6897BB; } .highlight .kc { color: #005cc5 } /* Keyword.Constant */
.highlight .s { color: #A5C25C; } .highlight .kd { color: #d73a49; font-weight: bold; } /* Keyword.Declaration */
.highlight .na { color: #9876AA; } .highlight .kn { color: #d73a49 } /* Keyword.Namespace */
.highlight .nb { color: #A9B7C6; } .highlight .kp { color: #d73a49 } /* Keyword.Pseudo */
.highlight .nc { color: #cfd4c5; } .highlight .kr { color: #d73a49 } /* Keyword.Reserved */
.highlight .no { color: #E3812E; } .highlight .kt { color: #d73a49 } /* Keyword.Type */
.highlight .nd { color: #f1c829; } .highlight .m { color: #666666 } /* Literal.Number */
.highlight .ni { color: #A9B7C6; } .highlight .s { color: #032f62 } /* Literal.String */
.highlight .ne { color: #88be05; } .highlight .na { } /* Name.Attribute */
.highlight .nf { color: #88be05; } .highlight .nb { color: #005cc5 } /* Name.Builtin */
.highlight .nl { color: #A9B7C6; } .highlight .nc { color: #6f42c1; font-weight: bold; } /* Name.Class */
.highlight .nn { color: #A9B7C6; } .highlight .no { color: #005cc5 } /* Name.Constant */
.highlight .nx { color: #88be05; } .highlight .nd { color: #6f42c1 } /* Name.Decorator */
.highlight .py { color: #A9B7C6; } .highlight .ni { color: #005cc5 } /* Name.Entity */
.highlight .nt { color: #f1c829; } .highlight .ne { color: #005cc5 } /* Name.Exception */
.highlight .nv { color: #A9B7C6; } .highlight .nf { color: #6f42c1 } /* Name.Function */
.highlight .ow { color: #A9B7C6; } .highlight .nl { color: #005cc5 } /* Name.Label */
.highlight .w { color: #A9B7C6; } .highlight .nn { color: #6f42c1 } /* Name.Namespace */
.highlight .mf { color: #6897BB; } .highlight .nt { color: #22863a } /* Name.Tag */
.highlight .mh { color: #6897BB; } .highlight .nv { color: #24292e } /* Name.Variable */
.highlight .mi { color: #6897BB; } .highlight .ow { color: #d73a49; } /* Operator.Word */
.highlight .mo { color: #6897BB; } .highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .sb { color: #A5C25C; } .highlight .mb { color: #005cc5 } /* Literal.Number.Bin */
.highlight .sc { color: #A5C25C; } .highlight .mf { color: #005cc5 } /* Literal.Number.Float */
.highlight .sd { color: #A5C25C; } .highlight .mh { color: #005cc5 } /* Literal.Number.Hex */
.highlight .s2 { color: #A5C25C; } .highlight .mi { color: #005cc5 } /* Literal.Number.Integer */
.highlight .se { color: #6897BB; } .highlight .mo { color: #005cc5 } /* Literal.Number.Oct */
.highlight .sh { color: #A5C25C; } .highlight .sa { color: #d73a49 } /* Literal.String.Affix */
.highlight .si { color: #A5C25C; } .highlight .sb { color: #032f62 } /* Literal.String.Backtick */
.highlight .sx { color: #A5C25C; } .highlight .sc { color: #032f62 } /* Literal.String.Char */
.highlight .sr { color: #A5C25C; } .highlight .dl { color: #d73a49 } /* Literal.String.Delimiter */
.highlight .s1 { color: #A5C25C; } .highlight .sd { color: #032f62 } /* Literal.String.Doc */
.highlight .ss { color: #A5C25C; } .highlight .s2 { color: #032f62 } /* Literal.String.Double */
.highlight .bp { color: #A9B7C6; } .highlight .se { color: #032f62 } /* Literal.String.Escape */
.highlight .vc { color: #CFD4C5; font-style: italic; } .highlight .sh { color: #032f62 } /* Literal.String.Heredoc */
.highlight .vg { color: #A9B7C6; } .highlight .si { color: #005cc5 } /* Literal.String.Interpol */
.highlight .vi { color: #A9B7C6; } .highlight .sx { color: #032f62 } /* Literal.String.Other */
.highlight .il { color: #6897BB; } .highlight .sr { color: #032f62 } /* Literal.String.Regex */
.highlight .gu { color: #75715e; } .highlight .s1 { color: #032f62 } /* Literal.String.Single */
.highlight .gd { color: #A9B7C6; } .highlight .ss { color: #005cc5 } /* Literal.String.Symbol */
.highlight .gi { color: #88be05; } .highlight .bp { color: #005cc5 } /* Name.Builtin.Pseudo */
.highlight .l-Scalar-Plain { color: #88be05; } .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 */

22
docs/themes/smithy/static/smithy.js vendored Normal file
View File

@ -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();
});