+ {%- block sidebartitle %}
+
{%- if theme_display_version %}
{%- set nav_version = version %}
{%- if READTHEDOCS and current_version %}
{%- set nav_version = current_version %}
{%- endif %}
- {%- if nav_version %}
+
{%- endif %}
{%- include "searchbox.html" %}
diff --git a/sphinx_rtd_theme/versions.html b/sphinx_rtd_theme/versions.html
index bab969e64..35cb0b706 100644
--- a/sphinx_rtd_theme/versions.html
+++ b/sphinx_rtd_theme/versions.html
@@ -2,8 +2,8 @@
{# Add rst-badge after rst-versions for small badge style. #}
- Read the Docs
- v: {{ current_version }}
+ Read the Docs
+ version: {{ current_version }}
{% endif %}
diff --git a/src/sass/_theme_badge.sass b/src/sass/_theme_badge.sass
index b24ec10f4..392d5d587 100644
--- a/src/sass/_theme_badge.sass
+++ b/src/sass/_theme_badge.sass
@@ -3,18 +3,24 @@
bottom: 0
left: 0
width: $nav-desktop-width
- color: $section-background-color
- background: darken($menu-background-color, 8%)
+ color: $text-color
+ background: #F7F7F7
font-family: $base-font-family
z-index: $z-index-tray
+
+ small
+ color: $text-color
+ font-size: 95%
+ a
+ color: $nav-link-color
+
a
- color: $link_color
+ color: $text-color
text-decoration: none
.rst-badge-small
display: none
.rst-current-version
- padding: $base-line-height / 2
- background-color: darken($menu-background-color, 5%)
+ padding: $base-line-height / 1.5
display: block
text-align: right
font-size: 90%
@@ -22,10 +28,10 @@
color: $green
+clearfix
.fa
- color: $section-background-color
- .fa-book
- float: left
- .icon-book
+ color: #868686
+ .rst-current-version-label
+ color: $text-color
+ font-weight: 600
float: left
&.rst-out-of-date
background-color: $red
@@ -33,6 +39,8 @@
&.rst-active-old-version
background-color: $yellow
color: $black
+ span
+ color: $text-color
&.shift-up
height: auto
max-height: 100%
@@ -51,13 +59,17 @@
margin: 20px 0
padding: 0
border-top: solid 1px lighten($menu-background-color, 5%)
+ dt
+ color: #868686
+ padding: 0.25rem 0
dd
display: inline-block
margin: 0
+ line-height: 1.4rem
a
display: inline-block
padding: $base-line-height / 4
- color: $section-background-color
+ color: $text-color
&.rst-badge
width: auto
bottom: 20px
diff --git a/src/sass/_theme_font_local.sass b/src/sass/_theme_font_local.sass
index 48f22e733..2cae13f8b 100644
--- a/src/sass/_theme_font_local.sass
+++ b/src/sass/_theme_font_local.sass
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')
+
$lato-font-path: "~lato-font/fonts"
$roboto-font-path: "~roboto-fontface/fonts/roboto-slab"
diff --git a/src/sass/_theme_layout.sass b/src/sass/_theme_layout.sass
index e23b1f0f2..77abfccf2 100644
--- a/src/sass/_theme_layout.sass
+++ b/src/sass/_theme_layout.sass
@@ -1,3 +1,6 @@
+$gutter: 1.25rem
+$menu-link-font-family: "SF Pro Display", "Inter", "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif
+
// Set uniform (but not relative) base font size
html
font-size: $base-font-size
@@ -7,6 +10,7 @@ html
top: $gutter
.wy-menu
+ padding: 0 $gutter
a:hover
text-decoration: none
@@ -15,7 +19,7 @@ html
ul, li
display: inline-block
li:hover
- background: rgba(255, 255, 255, 0.1)
+ background: transparent
li
&.divide-left
border-left: solid 1px hsl(0, 0%, 25%)
@@ -35,34 +39,43 @@ html
height: $base-font-size * 2
line-height: $base-font-size * 2
padding: 0 $gutter
- margin: ($base-line-height / 2) 0 0 0
+ margin: ($base-line-height / 4) 0
display: block
font-weight: bold
+ font-family: $menu-link-font-family
text-transform: uppercase
- font-size: 85%
+ font-size: 89%
white-space: nowrap
+ p.caption
+ white-space: pre-wrap
+ height: auto
+ min-height: $base-font-size * 2
+
ul
margin-bottom: 0
+ a
+ font-weight: 400
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%)
+ // background: darken($menu-vertical-background-color, 10%)
a
color: $menu-link-medium
- border-right: solid 1px darken($menu-vertical-background-color, 20%)
+ // border-right: solid 1px darken($menu-vertical-background-color, 20%)
padding: ($gutter / 4) ($gutter * 1.5)
&:hover
- background: darken($menu-vertical-background-color, 15%)
+ background: transparent
code
border: none
background: inherit
color: inherit
padding-left: 0
padding-right: 0
+ color: #FF3737
// Expand links
button.toctree-expand
display: block
@@ -78,15 +91,15 @@ html
// On state for the first level
li.on a, li.current > a
- color: $menu-link-color
+ color: $menu-link-dark
padding: ($gutter / 4) $gutter
font-weight: bold
position: relative
- background: $menu-vertical-background-color
+ background: transparent
border: none
padding-left: $gutter -4px
&:hover
- background: $menu-vertical-background-color
+ background: transparent
button.toctree-expand
color: $menu-link-medium
button.toctree-expand
@@ -97,8 +110,8 @@ html
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%)
+ // 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
@@ -127,14 +140,12 @@ html
@if $toc_level > 1
li.toctree-l#{$toc_level}
a
- @extend %toctree_link_color
+ // @extend %toctree_link_color
+ padding: $gutter / 3 ($gutter) * ($toc_level)
&.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: ($gutter / 4) ($gutter * ($toc_level + 1))
padding-right: $gutter
a:hover button.toctree-expand
@extend %toctree_hover_link_color
@@ -145,17 +156,17 @@ html
li.toctree-l2
&.current
> a
- background: darken($menu-vertical-background-color, 20%)
+ // background: darken($menu-vertical-background-color, 20%)
li.toctree-l3 > a
- background: darken($menu-vertical-background-color, 20%)
+ // 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%)
+ // background: darken($menu-vertical-background-color, 25%)
li.toctree-l4 > a
- background: darken($menu-vertical-background-color, 25%)
+ // background: darken($menu-vertical-background-color, 25%)
button.toctree-expand
color: darken($menu-vertical-background-color, 40%)
@@ -173,7 +184,8 @@ html
padding: ($gutter / 4) $gutter
display: block
position: relative
- font-size: 90%
+ font-size: 100%
+ font-family: $menu-link-font-family
color: $menu-link-light
&:hover
background-color: lighten($menu-background-color, 10%)
@@ -181,26 +193,36 @@ html
button.toctree-expand
color: $menu-link-light
&:active
- background-color: $menu-logo-color
+ // background-color: $menu-logo-color
cursor: pointer
- color: $menu-link-active
+ // color: $menu-link-active
button.toctree-expand
- color: $menu-link-active
+ // color: $menu-link-active
.wy-side-nav-search
display: block
width: $nav-desktop-width
- padding: $gutter / 2
+ padding: $gutter * 1.3 $gutter * 2 $gutter / 2
margin-bottom: $gutter / 2
z-index: $z-index-popover
background-color: $nav-search-background-color
text-align: center
color: $nav-search-color
+
+ &.bottom
+ width: 95%
+ padding: 6px
+ background-color: transparent
+ margin-bottom: 24px
+
input[type=text]
+ display: block
width: 100%
- border-radius: 50px
- padding: 6px 12px
- border-color: darken($link-color, 5%)
+ font-size: 1rem
+ border-radius: 4px
+ padding: 7.5px 12px
+ border-color: #d3d3d3
+ box-shadow: none
img
display: block
margin: auto auto ($gutter / 2) auto
@@ -218,7 +240,7 @@ html
margin-bottom: $gutter / 2
max-width: 100%
&:hover
- background: rgba(255, 255, 255, 0.1)
+ background: transparent
img.logo
display: block // display on its own line all the time
margin: 0 auto
@@ -234,7 +256,7 @@ html
margin-top: -1 * $gutter / 4
margin-bottom: $gutter / 2
font-weight: normal
- color: rgba(255, 255, 255, 0.3)
+ color: $text-color
.wy-nav .wy-menu-vertical
header
@@ -242,7 +264,7 @@ html
a
color: $text-light
&:hover
- background-color: $link-color
+ background-color: transparent
color: $white
[data-menu-wrap]
@@ -270,18 +292,18 @@ html
.wy-grid-for-nav
position: absolute
width: 100%
- height: 100%
+ top: 71px
+ bottom: 0
.wy-nav-side
position: fixed
- top: 0
+ top: 71px
bottom: 0
left: 0
- padding-bottom: 2em
+ padding-bottom: 3.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
@@ -295,8 +317,8 @@ html
.wy-nav-top
display: none
- background: $link-color
- color: $white
+ background: transparent
+ color: $text-color
padding: ($gutter / 4) ($gutter / 2)
position: relative
line-height: 50px
@@ -304,7 +326,7 @@ html
font-size: 100%
+clearfix
a
- color: $white
+ color: $text-color
font-weight: bold
img
margin-right: $base-line-height / 2
@@ -315,6 +337,7 @@ html
border-radius: 100%
i
font-size: 30px
+ color: #C4C4C4
float: left
cursor: pointer
padding-top: inherit
@@ -406,13 +429,11 @@ footer
position: fixed
min-width: 100%
left: 85%
- top: 0
+ top: 71px
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
@@ -422,3 +443,121 @@ footer
display: none
.wy-nav-content-wrap
margin-left: 0
+
+.wy-header
+ display: flex
+ align-items: center
+ justify-content: space-between
+ padding: 0 26px
+ border-bottom: 1px solid #d7d7d7
+ position: fixed
+ background-color: $white
+ z-index: 201
+ top: 0
+ right: 0
+ left: 0
+
+ .wy-header-left
+ display: flex
+ align-items: center
+
+ .wy-github-stars
+ line-height: 0
+ margin: 0 $gutter * 1.5
+
+ .wy-header-logo-wrapper
+ display: flex
+ align-items: center
+ height: 70px
+
+ img
+ display: block
+ width: auto
+ height: 35px
+
+.wy-main-nav
+ .wy-main-nav-checkbox
+ display: none
+
+ .wy-main-nav-toggle
+ display: none
+
+ ul
+ display: flex
+
+ li + li
+ margin-left: 30px
+
+ a
+ color: $text-color
+ font-weight: 600
+
++media($tablet)
+ .wy-header
+ position: relative
+ flex-direction: column
+ align-items: stretch
+
+ &::before
+ content: " "
+ height: 1px
+ background-color: #E9E9E9
+ left: 0
+ right: 0
+ top: 70px
+ position: absolute
+
+ .wy-main-nav
+ .wy-main-nav-menu
+ display: none
+ padding: $gutter
+ border-bottom: 1px solid #E9E9E9
+ position: absolute
+ top: 70px
+ z-index: 100
+ background: #fff
+ width: 100%
+ left: 0
+
+ .wy-main-nav-toggle
+ display: block
+ position: absolute
+ right: 0
+ top: 0
+ font-size: 14px
+ font-weight: 600
+ color: #919191
+ height: 70px
+ line-height: 70px
+ padding: 0 26px
+
+ &::before
+ content: " "
+ display: none
+
+ .wy-main-nav-checkbox:checked + .wy-main-nav-toggle
+ width: 90px
+ font-size: 0
+ color: transparent
+
+ &::before
+ display: block
+ width: 13px
+ height: 13px
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNDg5MTQ1IDAuNDg5NTcyQy0wLjA5NjY0MzUgMS4wNzUzNiAtMC4wOTY2NDA4IDIuMDI1MTEgMC40ODkxNDUgMi42MTA4OUw0LjM3ODIzIDYuNDk5OThMMC40ODkxNDUgMTAuMzg5MUMtMC4wOTY2NDM1IDEwLjk3NDkgLTAuMDk2NjQwOCAxMS45MjQ2IDAuNDg5MTQ1IDEyLjUxMDRDMS4wNzQ5MyAxMy4wOTYyIDIuMDI0NjggMTMuMDk2MiAyLjYxMDQ3IDEyLjUxMDRMNi40OTk1NSA4LjYyMTNMMTAuMzg4NiAxMi41MTA0QzEwLjk3NDQgMTMuMDk2MiAxMS45MjQyIDEzLjA5NjIgMTIuNTEgMTIuNTEwNEMxMy4wOTU3IDExLjkyNDYgMTMuMDk1NyAxMC45NzQ5IDEyLjUxIDEwLjM4OTFMOC42MjA4NyA2LjQ5OTk4TDEyLjUxIDIuNjEwODlDMTMuMDk1NyAyLjAyNTEgMTMuMDk1NyAxLjA3NTM2IDEyLjUxIDAuNDg5NTcyQzExLjkyNDIgLTAuMDk2MjEzNSAxMC45NzQ0IC0wLjA5NjIxNjMgMTAuMzg4NiAwLjQ4OTU3Mkw2LjQ5OTU1IDQuMzc4NjZMMi42MTA0NyAwLjQ4OTU3MkMyLjAyNDY4IC0wLjA5NjIxMzUgMS4wNzQ5MyAtMC4wOTYyMTYzIDAuNDg5MTQ1IDAuNDg5NTcyWiIgZmlsbD0iIzkwOTA5MCIvPgo8L3N2Zz4KCg==")
+ background-size: cover
+ position: absolute
+ top: 50%
+ left: 50%
+ transform: translate3d(-50%, -50%, 0)
+
+ .wy-main-nav-checkbox:checked + label + .wy-main-nav-menu
+ display: block
+
+ li + li
+ margin-left: 0
+
+ a
+ display: block
+ text-align: center
+ padding: $gutter 0
diff --git a/src/sass/_theme_variables.sass b/src/sass/_theme_variables.sass
index a92bdb4d1..b33c1004f 100644
--- a/src/sass/_theme_variables.sass
+++ b/src/sass/_theme_variables.sass
@@ -1,6 +1,11 @@
// 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.
+$white: #ffffff
+$text-color: #000000
+$text-light: #868686
+$nav-desktop-width: 320px
+$section-background-color: $white
$fa-font-path: "~font-awesome/fonts"
$static-img: "../img/"
@@ -30,7 +35,9 @@ $menuselection-color: $blue
$footer-color: $text-medium
// Menu colors
+$menu-background-color: $white
$menu-vertical-background-color: $section-background-color
+$menu-top-link-color: red
// Menu text colors
$menu-color: $gray
@@ -40,21 +47,21 @@ $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
+$menu-link-color: $text-light
+$menu-link-dark: $text-color
+$menu-link-medium: $text-light
+$menu-link-light: $text-light
+$menu-link-active: $black
// Navigation colors
$nav-background-color: $menu-background-color
-$nav-search-background-color: $blue
+$nav-search-background-color: $white
$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%)
+$nav-caption: $text-color
// Sidebar colors
$sidebar-background-color: $table-stripe-color
@@ -64,8 +71,8 @@ $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
+$base-font-family: "Inter", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif
+$custom-font-family: "Inter", "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
diff --git a/src/sass/theme.sass b/src/sass/theme.sass
index 73e77e4f6..eb487ced4 100644
--- a/src/sass/theme.sass
+++ b/src/sass/theme.sass
@@ -48,3 +48,25 @@
@import theme_mathjax
@import theme_font_awesome_compatibility
@import theme_font_local
+
+// Overrides
+.rst-content
+ pre.literal-block,
+ div[class^="highlight"],
+ tt,
+ code,
+ .sidebar,
+ .admonition
+ border-radius: 2px
+
+ .admonition-title
+ border-top-left-radius: 2px
+ border-top-right-radius: 2px
+
+ tt.literal,
+ tt.literal,
+ code.literal
+ color: #FF3737
+
+ .highlight
+ background-color: #FAFAFA
\ No newline at end of file
diff --git a/src/theme.js b/src/theme.js
index db546b4a3..3476a768b 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -83,6 +83,7 @@ function ThemeNav () {
.on('click', "[data-toggle='wy-nav-top']", function() {
$("[data-toggle='wy-nav-shift']").toggleClass("shift");
$("[data-toggle='rst-versions']").toggleClass("shift");
+ $(".wy-header").toggleClass("shift");
})
// Nav menu link click operations
@@ -91,6 +92,7 @@ function ThemeNav () {
// Close menu when you click a link.
$("[data-toggle='wy-nav-shift']").removeClass("shift");
$("[data-toggle='rst-versions']").toggleClass("shift");
+ $(".wy-header").toggleClass("shift");
// Handle dynamic display of l3 and l4 nav lists
self.toggleCurrent(target);
self.hashChange();
@@ -263,4 +265,4 @@ if (typeof(window) != 'undefined') {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
-}());
+})();