diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/sass/_theme_badge.sass | 94 | ||||
-rw-r--r-- | src/sass/_theme_badge_fa.sass | 67 | ||||
-rw-r--r-- | src/sass/_theme_breadcrumbs.sass | 35 | ||||
-rw-r--r-- | src/sass/_theme_font_awesome_compatibility.sass | 24 | ||||
-rw-r--r-- | src/sass/_theme_font_local.sass | 44 | ||||
-rw-r--r-- | src/sass/_theme_layout.sass | 424 | ||||
-rw-r--r-- | src/sass/_theme_mathjax.sass | 5 | ||||
-rw-r--r-- | src/sass/_theme_rst.sass | 617 | ||||
-rw-r--r-- | src/sass/_theme_variables.sass | 72 | ||||
-rw-r--r-- | src/sass/badge_only.sass | 16 | ||||
-rw-r--r-- | src/sass/theme.sass | 50 | ||||
-rw-r--r-- | src/theme.js | 266 |
12 files changed, 1714 insertions, 0 deletions
diff --git a/src/sass/_theme_badge.sass b/src/sass/_theme_badge.sass new file mode 100644 index 0000000..b24ec10 --- /dev/null +++ b/src/sass/_theme_badge.sass @@ -0,0 +1,94 @@ +.rst-versions + position: fixed + bottom: 0 + left: 0 + width: $nav-desktop-width + color: $section-background-color + background: darken($menu-background-color, 8%) + font-family: $base-font-family + z-index: $z-index-tray + a + color: $link_color + text-decoration: none + .rst-badge-small + display: none + .rst-current-version + padding: $base-line-height / 2 + background-color: darken($menu-background-color, 5%) + display: block + text-align: right + font-size: 90% + cursor: pointer + color: $green + +clearfix + .fa + color: $section-background-color + .fa-book + float: left + .icon-book + float: left + &.rst-out-of-date + background-color: $red + color: $white + &.rst-active-old-version + background-color: $yellow + color: $black + &.shift-up + height: auto + max-height: 100% + overflow-y: scroll + &.shift-up .rst-other-versions + display: block + .rst-other-versions + font-size: 90% + padding: $base-line-height / 2 + color: $text-medium + display: none + hr + display: block + height: 1px + border: 0 + margin: 20px 0 + padding: 0 + border-top: solid 1px lighten($menu-background-color, 5%) + dd + display: inline-block + margin: 0 + a + display: inline-block + padding: $base-line-height / 4 + color: $section-background-color + &.rst-badge + width: auto + bottom: 20px + right: 20px + left: auto + border: none + max-width: $nav-desktop-width + max-height: 90% + .icon-book + float: none + line-height: 30px + .fa-book + float: none + line-height: 30px + &.shift-up .rst-current-version + text-align: right + .fa-book + float: left + .icon-book + float: left + > .rst-current-version + width: auto + height: 30px + line-height: 30px + padding: 0 $base-line-height / 4 + display: block + text-align: center + ++media($tablet) + .rst-versions + width: 85% + display: none + &.shift + display: block diff --git a/src/sass/_theme_badge_fa.sass b/src/sass/_theme_badge_fa.sass new file mode 100644 index 0000000..e2e54a5 --- /dev/null +++ b/src/sass/_theme_badge_fa.sass @@ -0,0 +1,67 @@ +// Slimmer version of FA for use on the badge_only.sass file. + ++font-face(FontAwesome, '#{$fa-font-path}/fontawesome-webfont') + +.fa:before + display: inline-block + font-family: FontAwesome + font-style: normal + font-weight: normal + line-height: 1 + text-decoration: inherit + +a .fa + display: inline-block + text-decoration: inherit + + +li + .fa + display: inline-block + .fa-large:before, + .fa-large:before + /* 1.5 increased font size for fa-large * 1.25 width + width: 1.5 * 1.25em + +ul.fas + list-style-type: none + margin-left: 2em + text-indent: -0.8em + li + .fa + width: 0.8em + .fa-large:before, + .fa-large:before + /* 1.5 increased font size for fa-large * 1.25 width + vertical-align: baseline + // width: 1.5*1.25em + +.fa-book:before + content: "\f02d" + +.icon-book:before + content: "\f02d" + +.fa-caret-down:before + content: "\f0d7" + +.icon-caret-down:before + content: "\f0d7" + +.fa-caret-up:before + content: "\f0d8" + +.icon-caret-up:before + content: "\f0d8" + +.fa-caret-left:before + content: "\f0d9" + +.icon-caret-left:before + content: "\f0d9" + +.fa-caret-right:before + content: "\f0da" + +.icon-caret-right:before + content: "\f0da" diff --git a/src/sass/_theme_breadcrumbs.sass b/src/sass/_theme_breadcrumbs.sass new file mode 100644 index 0000000..7050d6b --- /dev/null +++ b/src/sass/_theme_breadcrumbs.sass @@ -0,0 +1,35 @@ +.wy-breadcrumbs + +clearfix + +.wy-breadcrumbs > li + display: inline-block + padding-top: 5px + &.wy-breadcrumbs-aside + float: right + /* Style literals as links */ + code + all: inherit + color: inherit + +.breadcrumb-item::before + content: "/" + color: #bbb + font-size: 13px + padding: 0 6px 0 3px + +.wy-breadcrumbs-extra + margin-bottom: 0 + color: $text-light + font-size: 80% + display: inline-block + + ++media($mobile) + .wy-breadcrumbs-extra + display: none + .wy-breadcrumbs li.wy-breadcrumbs-aside + display: none + +@media print + .wy-breadcrumbs li.wy-breadcrumbs-aside + display: none diff --git a/src/sass/_theme_font_awesome_compatibility.sass b/src/sass/_theme_font_awesome_compatibility.sass new file mode 100644 index 0000000..5857956 --- /dev/null +++ b/src/sass/_theme_font_awesome_compatibility.sass @@ -0,0 +1,24 @@ +.icon + @extend .fa +.icon-home + @extend .fa-home +.icon-search + @extend .fa-search +.icon-book + @extend .fa-book +.icon-caret-down + @extend .fa-caret-down +.icon-github + @extend .fa-github +.icon-bitbucket + @extend .fa-bitbucket +.icon-gitlab + @extend .fa-gitlab +.icon-fire + @extend .fa-fire +.icon-circle-arrow-right + @extend .fa-arrow-circle-right +.icon-circle-arrow-left + @extend .fa-arrow-circle-left +.icon-link + @extend .fa-link diff --git a/src/sass/_theme_font_local.sass b/src/sass/_theme_font_local.sass new file mode 100644 index 0000000..48f22e7 --- /dev/null +++ b/src/sass/_theme_font_local.sass @@ -0,0 +1,44 @@ +$lato-font-path: "~lato-font/fonts" +$roboto-font-path: "~roboto-fontface/fonts/roboto-slab" + +@font-face + font-family: 'Lato' + src: url('#{$lato-font-path}/lato-normal/lato-normal.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal/lato-normal.woff') format('woff') + font-weight: 400 + font-style: normal + font-display: $font-display + +@font-face + font-family: 'Lato' + src: url('#{$lato-font-path}/lato-bold/lato-bold.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold/lato-bold.woff') format('woff') + font-weight: 700 + font-style: normal + font-display: $font-display + +@font-face + font-family: 'Lato' + src: url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff') format('woff') + font-weight: 700 + font-style: italic + font-display: $font-display + +@font-face + font-family: 'Lato' + src: url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff') format('woff') + font-weight: 400 + font-style: italic + font-display: $font-display + +@font-face + font-family: 'Roboto Slab' + font-style: normal + font-weight: 400 + src: url('#{$roboto-font-path}/Roboto-Slab-Regular.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Regular.woff') format('woff') + font-display: $font-display + +@font-face + font-family: 'Roboto Slab' + font-style: normal + font-weight: 700 + src: url('#{$roboto-font-path}/Roboto-Slab-Bold.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Bold.woff') format('woff') + font-display: $font-display diff --git a/src/sass/_theme_layout.sass b/src/sass/_theme_layout.sass new file mode 100644 index 0000000..e23b1f0 --- /dev/null +++ b/src/sass/_theme_layout.sass @@ -0,0 +1,424 @@ +// Set uniform (but not relative) base font size +html + font-size: $base-font-size + +.wy-affix + position: fixed + top: $gutter + +.wy-menu + a:hover + text-decoration: none + +.wy-menu-horiz + +clearfix + ul, li + display: inline-block + li:hover + background: rgba(255, 255, 255, 0.1) + li + &.divide-left + border-left: solid 1px hsl(0, 0%, 25%) + &.divide-right + border-right: solid 1px hsl(0, 0%, 25%) + a + height: $base-font-size * 2 + display: inline-block + line-height: $base-font-size * 2 + padding: 0 $base-font-size + +.wy-menu-vertical + width: $nav-desktop-width + + header, p.caption + color: $nav-caption + height: $base-font-size * 2 + line-height: $base-font-size * 2 + padding: 0 $gutter + margin: ($base-line-height / 2) 0 0 0 + display: block + font-weight: bold + text-transform: uppercase + font-size: 85% + white-space: nowrap + + ul + margin-bottom: 0 + li + &.divide-top + border-top: solid 1px hsl(0, 0%, 25%) + &.divide-bottom + border-bottom: solid 1px hsl(0, 0%, 25%) + &.current + background: darken($menu-vertical-background-color, 10%) + a + color: $menu-link-medium + border-right: solid 1px darken($menu-vertical-background-color, 20%) + padding: ($gutter / 4) ($gutter * 1.5) + &:hover + background: darken($menu-vertical-background-color, 15%) + code + border: none + background: inherit + color: inherit + padding-left: 0 + padding-right: 0 + // Expand links + button.toctree-expand + display: block + float: left + margin-left: -1.2em + @extend .fa + @extend .fa-plus-square-o + line-height: 18px + color: darken($menu-link-medium, 20%) + border: none + background: none + padding: 0 + + // On state for the first level + li.on a, li.current > a + color: $menu-link-color + padding: ($gutter / 4) $gutter + font-weight: bold + position: relative + background: $menu-vertical-background-color + border: none + padding-left: $gutter -4px + &:hover + background: $menu-vertical-background-color + button.toctree-expand + color: $menu-link-medium + button.toctree-expand + @extend .fa + @extend .fa-minus-square-o + display: block + line-height: 18px + color: darken($menu-link-medium, 30%) + + li.toctree-l1.current > a + border-bottom: solid 1px darken($menu-vertical-background-color, 20%) + border-top: solid 1px darken($menu-vertical-background-color, 20%) + + // This is the on state for pages beyond second level + + %hide_show_toctree_ul + > ul + display: none + &.current > ul + display: block + + %shrink_toctree_element + font-size: 0.9em + + %toctree_link_color + color: $menu-link-color + + %toctree_hover_link_color + color: $menu-link-medium + + %display_current_toctree_element + display: block + + @for $toc_level from 1 through 10 + .toctree-l#{$toc_level}.current .toctree-l#{$toc_level + 1} + @extend %hide_show_toctree_ul + + @if $toc_level > 1 + li.toctree-l#{$toc_level} + a + @extend %toctree_link_color + &.current + > a + padding: ($gutter / 4) ($gutter * ($toc_level - 1 + 0.5)) + + li.toctree-l#{$toc_level + 1} > a + @extend %display_current_toctree_element + padding: ($gutter / 4) ($gutter * ($toc_level + 0.5)) + padding-right: $gutter + a:hover button.toctree-expand + @extend %toctree_hover_link_color + @if $toc_level > 2 and $toc_level < 5 + li.toctree-l#{$toc_level} + @extend %shrink_toctree_element + + li.toctree-l2 + &.current + > a + background: darken($menu-vertical-background-color, 20%) + li.toctree-l3 > a + background: darken($menu-vertical-background-color, 20%) + button.toctree-expand + color: darken($menu-vertical-background-color, 35%) + li.toctree-l3 + &.current + > a + background: darken($menu-vertical-background-color, 25%) + li.toctree-l4 > a + background: darken($menu-vertical-background-color, 25%) + button.toctree-expand + color: darken($menu-vertical-background-color, 40%) + + li.current ul + display: block + li ul + margin-bottom: 0 + display: none + li ul li a + margin-bottom: 0 + color: $menu-link-light + font-weight: normal + a + line-height: 18px + padding: ($gutter / 4) $gutter + display: block + position: relative + font-size: 90% + color: $menu-link-light + &:hover + background-color: lighten($menu-background-color, 10%) + cursor: pointer + button.toctree-expand + color: $menu-link-light + &:active + background-color: $menu-logo-color + cursor: pointer + color: $menu-link-active + button.toctree-expand + color: $menu-link-active + +.wy-side-nav-search + display: block + width: $nav-desktop-width + padding: $gutter / 2 + margin-bottom: $gutter / 2 + z-index: $z-index-popover + background-color: $nav-search-background-color + text-align: center + color: $nav-search-color + input[type=text] + width: 100% + border-radius: 50px + padding: 6px 12px + border-color: darken($link-color, 5%) + img + display: block + margin: auto auto ($gutter / 2) auto + height: 45px + width: 45px + background-color: $menu-logo-color + padding: 5px + border-radius: 100% + > a, .wy-dropdown > a + color: $nav-search-color + font-size: 100% + font-weight: bold + display: inline-block + padding: ($base-line-height / 6) ($base-line-height / 4) + margin-bottom: $gutter / 2 + max-width: 100% + &:hover + background: rgba(255, 255, 255, 0.1) + img.logo + display: block // display on its own line all the time + margin: 0 auto + height: auto // undo badge styling above + width: auto + border-radius: 0 + max-width: 100% // shrink on mobile, if appropriate + background: rgba(0, 0, 0, 0) // make hover background of parent show up properly + &.icon + img.logo + margin-top: 0.85em // space it away from the title text + > div.version + margin-top: -1 * $gutter / 4 + margin-bottom: $gutter / 2 + font-weight: normal + color: rgba(255, 255, 255, 0.3) + +.wy-nav .wy-menu-vertical + header + color: $link-color + a + color: $text-light + &:hover + background-color: $link-color + color: $white + +[data-menu-wrap] + +transition(all 0.2s ease-in) + position: absolute + opacity: 1 + width: 100% + opacity: 0 + &.move-center + left: 0 + right: auto + opacity: 1 + &.move-left + right: auto + left: -100% + opacity: 0 + &.move-right + right: -100% + left: auto + opacity: 0 + +.wy-body-for-nav + background: $section-background-color + +.wy-grid-for-nav + position: absolute + width: 100% + height: 100% + +.wy-nav-side + position: fixed + top: 0 + bottom: 0 + left: 0 + padding-bottom: 2em + width: $nav-desktop-width + overflow-x: hidden + overflow-y: hidden + min-height: 100% + color: $menu-medium + background: $nav-background-color + z-index: $z-index-popover + +.wy-side-scroll + width: $nav-desktop-width + 20px + position: relative + overflow-x: hidden + overflow-y: scroll + height: 100% + +.wy-nav-top + display: none + background: $link-color + color: $white + padding: ($gutter / 4) ($gutter / 2) + position: relative + line-height: 50px + text-align: center + font-size: 100% + +clearfix + a + color: $white + font-weight: bold + img + margin-right: $base-line-height / 2 + height: 45px + width: 45px + background-color: $menu-logo-color + padding: 5px + border-radius: 100% + i + font-size: 30px + float: left + cursor: pointer + padding-top: inherit + +.wy-nav-content-wrap + margin-left: $nav-desktop-width + background: $section-background-color + min-height: 100% + +.wy-nav-content + padding: $gutter ($gutter * 2) + height: 100% + max-width: $nav-content-width + margin: auto + +.wy-body-mask + position: fixed + width: 100% + height: 100% + background: rgba(0, 0, 0, 0.2) + display: none + z-index: $z-index-modal - 1 + &.on + display: block +footer + color: $footer-color + p + margin-bottom: $base-line-height / 2 + span.commit code + padding: 0px + font-family: $code-font-family + font-size: 1em + background: none + border: none + color: $footer-color + +.rst-footer-buttons + &:before, &:after + width: 100% + +clearfix + +.rst-breadcrumbs-buttons + margin-top: 12px + +clearfix + +#search-results + .search li + margin-bottom: $base-line-height + border-bottom: solid 1px $table_border_color + padding-bottom: $base-line-height + .search li:first-child + border-top: solid 1px $table_border_color + padding-top: $base-line-height + .search li a + font-size: 120% + margin-bottom: $base-line-height / 2 + display: inline-block + .context + color: $text-medium + font-size: 90% + +.genindextable li > ul + margin-left: $base-line-height + ++media($tablet) + .wy-body-for-nav + background: $section-background-color + .wy-nav-top + display: block + .wy-nav-side + @if $nav-desktop-position == left + left: -$nav-desktop-width + @else + right: -$nav-desktop-width + &.shift + width: 85% + left: 0 + .wy-side-scroll + width: auto + .wy-side-nav-search + width: auto + .wy-menu.wy-menu-vertical + width: auto + .wy-nav-content-wrap + margin-left: 0 + .wy-nav-content + padding: $gutter + &.shift + position: fixed + min-width: 100% + left: 85% + top: 0 + height: 100% + overflow: hidden + +@media screen and (min-width: $nav-media-query) + .wy-nav-content-wrap + background: rgba(0, 0, 0, 0.05) + .wy-nav-content + margin: 0 + background: $section-background-color + +@media print + .rst-versions, footer, .wy-nav-side + display: none + .wy-nav-content-wrap + margin-left: 0 diff --git a/src/sass/_theme_mathjax.sass b/src/sass/_theme_mathjax.sass new file mode 100644 index 0000000..1004993 --- /dev/null +++ b/src/sass/_theme_mathjax.sass @@ -0,0 +1,5 @@ +span[id*='MathJax-Span'] + color: $mathjax-color + +.math + text-align: center diff --git a/src/sass/_theme_rst.sass b/src/sass/_theme_rst.sass new file mode 100644 index 0000000..e8cebf3 --- /dev/null +++ b/src/sass/_theme_rst.sass @@ -0,0 +1,617 @@ +// ------------------------------------------------------------------------------------------------------------------- +// CONTRIBUTORS, PLEASE READ THIS! +// ------------------------------------------------------------------------------------------------------------------- +// Couple things... +// 1. Lots of this @extends from wyrm_core/_type.sass (http://www.github.com/snide/wyrm/. +// * Try not to replace any @extends code. It's pretty generic stuff meant to work together. +// * That said, know that I'm very unlikely to accept PRs from wyrm just to change style here. +// 2. I plan to remove the !importants in here. Part of it is due to laziness, part to sphinx's fondness for nesting. +// 3. Try to use variables from wyrm_core/wy_variables.sass. Notable are... +// * $base-line-height // All margins, padding and line-height should use this in .25 increments. +// * $text-color, $text-light, $text-dark...etc +// * $base-font-family, $custom-font-family, $code-font-family +// 4. If you have changes for mobile/tablet, put them at the bottom of the sass file. +// -------------------------------------------------------------------------------------------------------------------- + +.rst-content + // Some browsers like to give arbitrary margins :( make them all consistent. + h1, h2, h3, h4, h5, h6 + margin-bottom: $base-line-height + + // Sphinx by default applies HxW style attributes to images. This fixes that oversite. + img + max-width: 100% + height: auto + + div.figure, figure + margin-bottom: $base-line-height + .caption-text + font-style: italic + p:last-child.caption + margin-bottom: 0px + &.align-center + text-align: center + + // Usually it's a good idea to give images some space. + .section >, section > + img, a > img + margin-bottom: $base-line-height + + // normalize browser styling + abbr[title] + text-decoration: none + + // Style external links + &.style-external-links a.reference.external:after + font-family: FontAwesome + content: "\f08e" + color: $text-light + vertical-align: super + font-size: 60% + margin: 0 0.2em + + // For the most part, its safe to assume that sphinx wants you to use a blockquote as an indent. It gets + // used in many different ways, so don't assume you can apply some fancy style, just leave it be. + blockquote + margin-left: $base-line-height + line-height: $base-line-height + margin-bottom: $base-line-height + + pre.literal-block + white-space: pre + margin: 0 + padding: ($base-line-height / 2) ($base-line-height / 2) + font-family: $code-font-family + display: block + overflow: auto + pre.literal-block, div[class^='highlight'] + border: 1px solid $table-border-color + overflow-x: auto + // 1px hack otherwise border won't show. lame + margin: 1px 0 $base-line-height 0 + div[class^='highlight'] + padding: 0px + border: none + margin: 0 + // Needs 100% width for line highlighting to work properly + div[class^='highlight'] td.code + width: 100% + .linenodiv pre + border-right: solid 1px lighten($table-border-color, 2%) + margin: 0 + padding: ($base-line-height / 2) ($base-line-height / 2) + font-family: $code-font-family + user-select: none + pointer-events: none + div[class^='highlight'] pre + white-space: pre + margin: 0 + padding: ($base-line-height / 2) ($base-line-height / 2) + display: block + overflow: auto + & .hll + // Line emphasis spans full width + display: block + margin: 0 (-1 * $base-line-height / 2) + padding: 0 ($base-line-height / 2) + pre.literal-block, div[class^='highlight'] pre, .linenodiv pre + font-family: $code-font-family + font-size: 12px + line-height: 1.4 + + // Do not allow selection of code block prompts and line numbers + div.highlight + span.linenos, .gp + user-select: none + pointer-events: none + + span.linenos + display: inline-block + padding-left: 0px + padding-right: ($base-line-height / 2) + margin-right: ($base-line-height / 2) + border-right: 1px solid lighten($table-border-color, 2%) + + .code-block-caption + font-style: italic + font-size: 85% + line-height: 1 + padding: 1em 0 + text-align: center + + @media print + .codeblock, div[class^='highlight'], div[class^='highlight'] pre + white-space: pre-wrap + + // These are the various note pullouts that sphinx applies + .note, .attention, .caution, .danger, .error, .hint, .important, .tip, .warning, .seealso, .admonition-todo, .admonition + @extend .wy-alert + // These block elements are unsuitable for having floating objects next + // to them + clear: both + .last, > *:last-child + margin-bottom: 0 + .admonition-title + @extend .wy-alert-title + @extend .fa + @extend .fa-exclamation-circle + &:before + margin-right: 4px + .note, .seealso + @extend .wy-alert.wy-alert-info + .hint, .tip, .important + @extend .wy-alert.wy-alert-success + .error, .danger + @extend .wy-alert.wy-alert-danger + .warning, .caution, .attention, .admonition-todo + @extend .wy-alert.wy-alert-warning + // Some people put tables in notes. Let's give them very basic support. + .admonition table + border-color: rgba(0, 0, 0, 0.1) + td, th + background: transparent !important + border-color: rgba(0, 0, 0, 0.1) !important + + .section, section, .toctree-wrapper + ul + @extend .wy-plain-list-disc + ol.loweralpha, ol.loweralpha > li + list-style: lower-alpha + ol.upperalpha, ol.upperalpha > li + list-style: upper-alpha + ol, ol.arabic + @extend .wy-plain-list-decimal + // Complex bullet lists, they have more item margins than simple lists + ol li, ul li + > * + margin-top: $base-line-height / 2 + margin-bottom: $base-line-height / 2 + &:first-child + margin-top: 0rem + > p + &, &:last-child + margin-bottom: $base-line-height / 2 + &:only-child, &:only-child:last-child + margin-bottom: 0rem + > ul, > ol + margin-bottom: $base-line-height / 2 + // Simple lists, no item margins + ol.simple li, ul.simple li + > * + margin-top: 0rem + margin-bottom: 0rem + ul, ol + margin-top: 0rem + margin-bottom: 0rem + + .line-block + margin-left: 0px + margin-bottom: $base-line-height + line-height: $base-line-height + .line-block .line-block + margin-left: $base-line-height + margin-bottom: 0px + + // Generics handling of headings and toc stuff. + .topic-title + font-weight: bold + margin-bottom: $base-line-height / 2 + .toc-backref + color: $text-color + .align-right + float: right + margin: 0px 0px $base-line-height $base-line-height + .align-left + float: left + margin: 0px $base-line-height $base-line-height 0px + .align-center + margin: auto + // Do not override display:table for tables + &:not(table) + display: block + .toctree-wrapper > p.caption + @extend h2 + + // This is the #href that shows up on hover. Sphinx's is terrible so I hack it away. + h1, h2, h3, h4, h5, h6, dl dt, p, p.caption, table > caption, .code-block-caption, .eqno + .headerlink + opacity: 0 + font-size: 14px + font-family: FontAwesome + margin-left: 0.5em + @extend .fa + &:focus + opacity: 1 + &:hover .headerlink + opacity: 1 + + // Make links inside paragraphs wrap when they are too long + p a + overflow-wrap: anywhere + // Consistent font sizing for table typography + .wy-table + th, td + p, ul + font-size: inherit + + // override the Wyrm accessibility anti-pattern of hiding button focus + .btn:focus + outline: 2px solid + + table > caption .headerlink:after + font-size: 12px + + .centered + text-align: center + + // Sidebar content. You'll see at the bottom of this file I change it in mobile. + .sidebar + float: right + width: 40% + display: block + margin: 0 0 $base-line-height $base-line-height + padding: $base-line-height + background: $sidebar-background-color + border: solid 1px $sidebar-border-color + // Sidebar content is usually less relevant, so adjust the margins and sizes. + p, ul, dl + font-size: 90% + .last, > *:last-child + margin-bottom: 0 + .sidebar-title + display: block + font-family: $custom-font-family + font-weight: bold + background: $table-border-color + padding: ($base-line-height / 4) ($base-line-height / 2) + margin: -$base-line-height + margin-bottom: $base-line-height + font-size: 100% + // Sphinx can highlight searched text with ?highlighted=searchterm + .highlighted + background: $highlight-color + box-shadow: 0 0 0 ($base-line-height / 12) $highlight-color + display: inline + font-weight: bold + + // These are the little citation links [1] that show up within paragraphs. + .footnote-reference, .citation-reference + vertical-align: baseline + position: relative + top: -0.4em + line-height: 0 + font-size: 90% + > span.fn-bracket + display: none + + // Horizontal lists have multiple columns; use full width + .hlist + width: 100% + + // Definition lists term/classifier separator + // Adds a separator for Sphinx > 1.x as a pseudo-element + // and hides the hardcoded separator from Sphinx 1.x + dl dt span.classifier + &:before + content: " : " + dl dt span.classifier-delimiter + display: none !important + + // The html4 writer outputs the citation and footnotes as a table, and the + // html5 writer outputs these as a definition list (docutils < 0.18) or an + // aside/div (docutils 0.18+). We will use the fairly well supported css + // `grid` attributes to make these back into a table + // HTML4 writer + html.writer-html4 & + table.docutils.citation, table.docutils.footnote + background: none + border: none + td, tr + border: none + background-color: transparent !important + white-space: normal + td.label + padding-left: 0 + padding-right: 0 + vertical-align: top + // HTML5 writer + html.writer-html5 & + // docutils < 0.18 grid layout. Some spacing is the dl/dt/dd margins + dl.footnote, dl.citation, dl.field-list + display: grid + grid-template-columns: auto minmax(80%, 95%) + > dt + display: inline-grid + grid-template-columns: max-content auto + // docutils => 0.18 grid layout + aside.footnote, aside.citation, div.citation + display: grid + // Two any width columns for label and backrefs, a noop column to expand + // to fill the width allocated to the first two columns, and then the + // content column for the paragraphs. + grid-template-columns: auto auto minmax(0.65rem, auto) minmax(40%, 95%) + & > span.label + grid-column-start: 1 + grid-column-end: 2 + & > span.backrefs + grid-column-start: 2 + grid-column-end: 3 + grid-row-start: 1 + grid-row-end: 3 + & > p + grid-column-start: 4 + grid-column-end: 5 + + // Shared backrefs styling for docutils versions + @mixin footnote-backrefs + text-align: left + font-style: italic + margin-left: .65rem + word-break: break-word + word-spacing: -0.1rem + max-width: 5rem + + > a + &:not(:first-child)::before + content: " " + word-break: keep-all + + // docutils < 0.18 html5 writer styling + dl.footnote, dl.citation, dl.field-list, + margin-bottom: $base-line-height + > dt + padding-left: 1rem + > dt, > dd + margin-bottom: 0rem + dl.footnote, dl.citation + font-size: .9rem + > dt + margin: 0rem 0.5rem 0.5rem 0rem + line-height: 1.2rem + word-break: break-all + font-weight: normal + > span.brackets + &:before + content: "[" + &:after + content: "]" + > span.fn-backref + @include footnote-backrefs + > dd + margin: 0rem 0rem 0.5rem 0rem + line-height: 1.2rem + p + font-size: 0.9rem + + // docutils => 0.18 html5 writer styling + aside.footnote, aside.citation, div.citation + padding-left: 1rem + padding-right: 1rem + font-size: 0.9rem + line-height: 1.2rem + p + font-size: 0.9rem + line-height: 1.2rem + margin-bottom: $base-line-height / 2 + span.backrefs + @include footnote-backrefs + span.label + line-height: 1.2rem + aside.footnote-list, aside.citation-list, div.citation-list + margin-bottom: $base-line-height + + dl.option-list + kbd + font-size: 0.9rem + // Both + html.writer-html4 & table.docutils.citation, table.docutils.footnote, + html.writer-html5 & dl.footnote, + html.writer-html5 & dl.citation, + html.writer-html5 & aside.footnote, + html.writer-html5 & aside.footnote-list aside.footnote, + html.writer-html5 & div.citation-list > div.citation + color: $text-medium + code + color: $gray + + // Remove the large vertical space between citations and footnotes + .wy-table-responsive.citation, .wy-table-responsive.footnote + margin-bottom: 0 + // Re-add vertical space to element directly following citation and footnotes, + // if the following element is of a different type + .wy-table-responsive.citation + :not(.citation), + .wy-table-responsive.footnote + :not(.footnote) + margin-top: $base-line-height + // Re-add vertical space after citation and footnotes if it is the last child of a parent + .wy-table-responsive.citation:last-child, .wy-table-responsive.footnote:last-child + margin-bottom: $base-line-height + table.docutils + @extend .wy-table + @extend .wy-table-bordered-all + th + border-color: $table-border-color + html.writer-html5 & + border: 1px solid $table-border-color + html.writer-html5 & + th > p, td > p + line-height: 1rem + margin-bottom: 0rem + font-size: 0.9rem + &:not(.field-list) + @extend .wy-table-striped + // Remove bottom margin for the last element (and it's last child) + td .last, td .last > *:last-child + margin-bottom: 0 + // This table is what gets spit out for auto-generated API stuff. I style it smaller bits of padding. + table.field-list + @extend .wy-table + border: none + td + border: none + p + line-height: inherit + td > strong + display: inline-block + .field-name + padding-right: 10px + text-align: left + white-space: nowrap + .field-body + text-align: left + + // These are the "literals" that get spit out when you mark stuff as ``code`` as your write. + tt, code + @extend code + color: $black + font-family: $code-font-family + padding: 2px 5px + big, em + font-size: 100% !important + line-height: normal + + &.literal + color: $text-code-color + white-space: normal + &.xref, a & + font-weight: bold + color: $text-codexref-color + // https://github.com/readthedocs/sphinx_rtd_theme/issues/1368 + overflow-wrap: normal + pre, kbd, samp + font-family: $code-font-family + // If the literal is inside an a tag, let's color it like a link + a tt, a code + color: $link-color + dl + margin-bottom: $base-line-height + dt + font-weight: bold + margin-bottom: $base-line-height / 2 + // Most of the content within these dls are one liners, so I halve the normal margins. + p, table, ul, ol + margin-bottom: $base-line-height / 2 + // rST seems to want dds to be treated as the browser would, indented. + dd + margin: 0 0 ($base-line-height / 2) $base-line-height + line-height: $base-line-height + > p:last-child, + > ol:last-child, + > ul:last-child, + > table:last-child + margin-bottom: 0 + html.writer-html4 & dl:not(.docutils), + html.writer-html5 & dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) + margin-bottom: $base-line-height + > dt + display: table + margin: ($base-line-height / 4) 0 + font-size: 90% + line-height: normal + background: lighten($class-color, 50%) + color: $class-color + border-top: solid 3px lighten($class-color, 20%) + padding: $base-line-height / 4 + position: relative + &:before + color: lighten($class-color, 20%) + .headerlink + color: $text-color + font-size: 100% !important + // In the html4 writer, parameters is a table. In html5 writer, parameters + // is a nested dl.field-list + dl:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt + margin-bottom: $base-line-height / 4 + border: none + border-left: solid 3px hsl(0, 0%, 80%) + background: hsl(0, 0%, 94%) + color: $method-color + .headerlink + color: $headerlink-color + font-size: 100% !important + > dt:first-child + margin-top: 0 + // Since dts get the callout style, we treat this less as callouts. + tt, code + &.descname, &.descclassname + background-color: transparent + border: none + padding: 0 + font-size: 100% !important + &.descname + font-weight: bold + // This is for more advanced parameter control + .optional + display: inline-block + padding: 0 4px + color: $black + font-weight: bold + .property + display: inline-block + padding-right: 8px + max-width: 100% + // This is keywords such as "const" + .k + font-style: italic + .sig-name, .descname, .descclassname + font-family: $code-font-family + color: $black + // Doc links to sourcecode + .viewcode-link, .viewcode-back + display: inline-block + color: $text-viewcode-color + font-size: 80% + padding-left: $base-line-height + .viewcode-back + display: block + float: right + p.rubric + margin-bottom: 12px + font-weight: bold + //Download link + code.download + background: inherit + padding: inherit + font-weight: normal + font-family: inherit + font-size: inherit + color: inherit + border: inherit + white-space: inherit + span:first-child + -webkit-font-smoothing: subpixel-antialiased + @extend .fa + @extend .fa-download + &:before + margin-right: 4px + .guilabel, + .menuselection + font-size: 80% + font-weight: 700 + border-radius: $base-line-height / 6 + padding: ($base-line-height / 10) ($base-line-height / 4) + margin: auto ($base-line-height / 12) + .guilabel, + border: 1px solid lighten($guilabel-color, 25%) + background: lighten($guilabel-color, 50%) + .menuselection + border: 1px solid lighten($menuselection-color, 25%) + background: lighten($menuselection-color, 50%) + *:not(dl.option-list) > :not(dt):not(kbd):not(.kbd) > kbd, + *:not(dl.option-list) > :not(dt):not(kbd):not(.kbd) > .kbd + color: inherit + font-size: 80% + background-color: lighten($text-light, 30%) + border: 1px solid darken($text-light, 5%) + border-radius: $base-line-height / 6 + box-shadow: grey 0px $base-line-height / 12 + padding: $base-line-height / 10 $base-line-height / 4 + margin: auto 0 + .versionmodified + font-style: italic + + +// Mobile specific ++media($mobile) + .rst-content + .sidebar + width: 100% diff --git a/src/sass/_theme_variables.sass b/src/sass/_theme_variables.sass new file mode 100644 index 0000000..a92bdb4 --- /dev/null +++ b/src/sass/_theme_variables.sass @@ -0,0 +1,72 @@ +// In here are variables used for sphinx_rtd_theme, they either add to or overwrite the default ones +// that are set in wyrm_core/wy_variables.sass. You'll find wyrm in bower_components if you're looking +// for a reference. + +$fa-font-path: "~font-awesome/fonts" +$static-img: "../img/" + +$nav-content-width: 800px +$nav-media-query: $nav-desktop-width + $nav-content-width + +$mathjax-color: $text-color + +$headerlink-color: $text-color + +// Code colors +$text-viewcode-color: $green +$text-codexref-color: $text-color + +// Definition list colors +$class-color: $blue +$method-color: $gray + +// :guilabel: color +$guilabel-color: $blue + +// :menuselection: label color +$menuselection-color: $blue + +// Footer colors +$footer-color: $text-medium + +// Menu colors +$menu-vertical-background-color: $section-background-color + +// Menu text colors +$menu-color: $gray +$menu-dark: lighten($menu-color,10%) !default +$menu-medium: lighten($menu-color,27.5%) !default +$menu-light: lighten($menu-color,45%) !default +$menu-lighter: lighten($menu-color,60%) !default + +// Menu link colors +$menu-link-color: $text-color +$menu-link-dark: $text-dark +$menu-link-medium: $text-medium +$menu-link-light: $text-lighter +$menu-link-active: $white + +// Navigation colors +$nav-background-color: $menu-background-color +$nav-search-background-color: $blue +$nav-search-color: $section-background-color +$nav-link-color: $blue +$nav-link-color-visited: $purple +$nav-link-color-hover: lighten($nav-link-color, 6%) !default +$nav-link-color-alt: hsl(33, 100%, 51%) +$nav-caption: lighten($blue, 15%) + +// Sidebar colors +$sidebar-background-color: $table-stripe-color +$sidebar-border-color: $table-border-color +$sidebar-title-background-color: $table-border-color + +// Sphinx highlight color +$highlight-color: $yellow + +$base-font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif +$custom-font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif +$custom-font-family2: Georgia, serif +$code-font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace + +$font-display: block diff --git a/src/sass/badge_only.sass b/src/sass/badge_only.sass new file mode 100644 index 0000000..2b09416 --- /dev/null +++ b/src/sass/badge_only.sass @@ -0,0 +1,16 @@ +// ------------------------------------------------------------ +// CONTRIBUTORS, PLEASE READ THIS! +// ------------------------------------------------------------ +// This generates the RTD sticky badge for non RTD themes. As +// always, only files labeled "theme_*.sass should be edited". +// ------------------------------------------------------------ +$border-box-sizing: false !default + +@import wyrm_core/wy_variables +@import theme_variables +@import ~bourbon/app/assets/stylesheets/bourbon +@import ~bourbon-neat/app/assets/stylesheets/neat +@import wyrm_core/mixin +@import wyrm_core/grid_settings +@import _theme_badge_fa +@import _theme_badge diff --git a/src/sass/theme.sass b/src/sass/theme.sass new file mode 100644 index 0000000..73e77e4 --- /dev/null +++ b/src/sass/theme.sass @@ -0,0 +1,50 @@ +// ------------------------------------------------------------ +// CONTRIBUTORS, PLEASE READ THIS! +// ------------------------------------------------------------ +// This theme pulls from other frontend projects. The only +// things you should edit are the sass files that start with +// "theme_*.sass". All other files are loaded through bower. +// ------------------------------------------------------------ + +// Variable defaults set by Wyrm +@import wyrm_core/wy_variables + +// Variable overrides that change coloring and fonts for this theme. +@import theme_variables + +// bourbon.io framework +@import ~bourbon/app/assets/stylesheets/bourbon + +// Bourbon.io/neat framework, with some default media queries +@import wyrm_core/grid_settings +@import ~bourbon-neat/app/assets/stylesheets/neat +// Some corrections for neat +@import wyrm_core/neat_extra + +// Custom reset +@import wyrm_core/reset + +// Wyrm mixins +@import wyrm_core/mixin + +// Font Awesome with wyrm extras +@import ~font-awesome/scss/font-awesome +@import wyrm_core/font_icon_defaults + +// Wyrm core styles used in this theme +@import wyrm_core/alert +@import wyrm_core/button +@import wyrm_core/dropdown +@import wyrm_core/form +@import wyrm_core/generic +@import wyrm_core/table +@import wyrm_core/type + +// Theme specific styles. These are likely the files you want to edit. +@import theme_breadcrumbs +@import theme_layout +@import theme_badge +@import theme_rst +@import theme_mathjax +@import theme_font_awesome_compatibility +@import theme_font_local diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000..db546b4 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,266 @@ +// jQuery is included via the sphinxcontrib-jquery extension that we depend on +var jQuery = (typeof(window) != 'undefined') ? window.jQuery : require('jquery'); + +// Sphinx theme nav state +function ThemeNav () { + + var nav = { + navBar: null, + win: null, + winScroll: false, + winResize: false, + linkScroll: false, + winPosition: 0, + winHeight: null, + docHeight: null, + isRunning: false + }; + + nav.enable = function (withStickyNav) { + var self = this; + + // TODO this can likely be removed once the theme javascript is broken + // out from the RTD assets. This just ensures old projects that are + // calling `enable()` get the sticky menu on by default. All other cals + // to `enable` should include an argument for enabling the sticky menu. + if (typeof(withStickyNav) == 'undefined') { + withStickyNav = true; + } + + if (self.isRunning) { + // Only allow enabling nav logic once + return; + } + + self.isRunning = true; + jQuery(function ($) { + self.init($); + + self.reset(); + self.win.on('hashchange', self.reset); + + if (withStickyNav) { + // Set scroll monitor + self.win.on('scroll', function () { + if (!self.linkScroll) { + if (!self.winScroll) { + self.winScroll = true; + requestAnimationFrame(function() { self.onScroll(); }); + } + } + }); + } + + // Set resize monitor + self.win.on('resize', function () { + if (!self.winResize) { + self.winResize = true; + requestAnimationFrame(function() { self.onResize(); }); + } + }); + + self.onResize(); + }); + + }; + + // TODO remove this with a split in theme and Read the Docs JS logic as + // well, it's only here to support 0.3.0 installs of our theme. + nav.enableSticky = function() { + this.enable(true); + }; + + nav.init = function ($) { + var doc = $(document), + self = this; + + this.navBar = $('div.wy-side-scroll:first'); + this.win = $(window); + + // Set up javascript UX bits + $(document) + // Shift nav in mobile when clicking the menu. + .on('click', "[data-toggle='wy-nav-top']", function() { + $("[data-toggle='wy-nav-shift']").toggleClass("shift"); + $("[data-toggle='rst-versions']").toggleClass("shift"); + }) + + // Nav menu link click operations + .on('click', ".wy-menu-vertical .current ul li a", function() { + var target = $(this); + // Close menu when you click a link. + $("[data-toggle='wy-nav-shift']").removeClass("shift"); + $("[data-toggle='rst-versions']").toggleClass("shift"); + // Handle dynamic display of l3 and l4 nav lists + self.toggleCurrent(target); + self.hashChange(); + }) + .on('click', "[data-toggle='rst-current-version']", function() { + $("[data-toggle='rst-versions']").toggleClass("shift-up"); + }) + + // Make tables responsive + $("table.docutils:not(.field-list,.footnote,.citation)") + .wrap("<div class='wy-table-responsive'></div>"); + + // Add extra class to responsive tables that contain + // footnotes or citations so that we can target them for styling + $("table.docutils.footnote") + .wrap("<div class='wy-table-responsive footnote'></div>"); + $("table.docutils.citation") + .wrap("<div class='wy-table-responsive citation'></div>"); + + // Add expand links to all parents of nested ul + $('.wy-menu-vertical ul').not('.simple').siblings('a').each(function () { + var link = $(this); + expand = + $('<button class="toctree-expand" title="Open/close menu"></button>'); + expand.on('click', function (ev) { + self.toggleCurrent(link); + ev.stopPropagation(); + return false; + }); + link.prepend(expand); + }); + }; + + nav.reset = function () { + // Get anchor from URL and open up nested nav + var anchor = encodeURI(window.location.hash) || '#'; + + try { + var vmenu = $('.wy-menu-vertical'); + var link = vmenu.find('[href="' + anchor + '"]'); + if (link.length === 0) { + // this link was not found in the sidebar. + // Find associated id element, then its closest section + // in the document and try with that one. + var id_elt = $('.document [id="' + anchor.substring(1) + '"]'); + var closest_section = id_elt.closest('div.section'); + link = vmenu.find('[href="#' + closest_section.attr("id") + '"]'); + if (link.length === 0) { + // still not found in the sidebar. fall back to main section + link = vmenu.find('[href="#"]'); + } + } + // If we found a matching link then reset current and re-apply + // otherwise retain the existing match + if (link.length > 0) { + $('.wy-menu-vertical .current') + .removeClass('current') + .attr('aria-expanded','false'); + link.addClass('current') + .attr('aria-expanded','true'); + link.closest('li.toctree-l1') + .parent() + .addClass('current') + .attr('aria-expanded','true'); + for (let i = 1; i <= 10; i++) { + link.closest('li.toctree-l' + i) + .addClass('current') + .attr('aria-expanded','true'); + } + link[0].scrollIntoView(); + } + } + catch (err) { + console.log("Error expanding nav for anchor", err); + } + + }; + + nav.onScroll = function () { + this.winScroll = false; + var newWinPosition = this.win.scrollTop(), + winBottom = newWinPosition + this.winHeight, + navPosition = this.navBar.scrollTop(), + newNavPosition = navPosition + (newWinPosition - this.winPosition); + if (newWinPosition < 0 || winBottom > this.docHeight) { + return; + } + this.navBar.scrollTop(newNavPosition); + this.winPosition = newWinPosition; + }; + + nav.onResize = function () { + this.winResize = false; + this.winHeight = this.win.height(); + this.docHeight = $(document).height(); + }; + + nav.hashChange = function () { + this.linkScroll = true; + this.win.one('hashchange', function () { + this.linkScroll = false; + }); + }; + + nav.toggleCurrent = function (elem) { + var parent_li = elem.closest('li'); + parent_li + .siblings('li.current') + .removeClass('current') + .attr('aria-expanded','false'); + parent_li + .siblings() + .find('li.current') + .removeClass('current') + .attr('aria-expanded','false'); + var children = parent_li.find('> ul li'); + // Don't toggle terminal elements. + if (children.length) { + children + .removeClass('current') + .attr('aria-expanded','false'); + parent_li + .toggleClass('current') + .attr('aria-expanded', function(i, old) { + return old == 'true' ? 'false' : 'true'; + }); + } + } + + return nav; +}; + +module.exports.ThemeNav = ThemeNav(); + +if (typeof(window) != 'undefined') { + window.SphinxRtdTheme = { + Navigation: module.exports.ThemeNav, + // TODO remove this once static assets are split up between the theme + // and Read the Docs. For now, this patches 0.3.0 to be backwards + // compatible with a pre-0.3.0 layout.html + StickyNav: module.exports.ThemeNav, + }; +} + + +// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel +// https://gist.github.com/paulirish/1579671 +// MIT license + +(function() { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; +}()); |