diff --git a/source/_static/img/icons/dark-mode-active.svg b/source/_static/img/icons/dark-mode-active.svg
deleted file mode 100644
index 85906168..00000000
--- a/source/_static/img/icons/dark-mode-active.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/source/_static/img/icons/dark-mode.svg b/source/_static/img/icons/dark-mode.svg
deleted file mode 100644
index 387304ab..00000000
--- a/source/_static/img/icons/dark-mode.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/source/_static/img/icons/reading-mode-active.svg b/source/_static/img/icons/reading-mode-active.svg
deleted file mode 100644
index 6dffeb17..00000000
--- a/source/_static/img/icons/reading-mode-active.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/source/_static/img/icons/reading-mode.svg b/source/_static/img/icons/reading-mode.svg
deleted file mode 100644
index b87bd435..00000000
--- a/source/_static/img/icons/reading-mode.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/source/_static/scss/includes/_base.scss b/source/_static/scss/includes/_base.scss
index 8ca3720c..a9cc54e5 100644
--- a/source/_static/scss/includes/_base.scss
+++ b/source/_static/scss/includes/_base.scss
@@ -34,4 +34,5 @@ body {
background-color: var(--body-bg);
display: flex;
flex-direction: column;
+ word-break: break-word;
}
\ No newline at end of file
diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss
index 3f37bf80..21a0dd01 100644
--- a/source/_static/scss/includes/_header.scss
+++ b/source/_static/scss/includes/_header.scss
@@ -29,19 +29,130 @@
}
.header__logo {
+ display: flex;
+
& > svg {
width: 6.25rem;
fill: var(--logo-fill-color);
}
}
-.header__top__title {
- line-height: 100%;
- font-weight: 500;
- color: var(--header-headings-color);
- margin-left: 0.5rem;
- font-size: $font-size-sm;
- padding-bottom: 0.1rem;
+.header__docs {
+ position: relative;
+ font-size: $font-size-xs;
+ margin-left: 1rem;
+
+ @include breakpoint-min(breakpoints(lg)) {
+ position: absolute;
+ bottom: -2.425rem;
+ right: 1.75rem;
+ z-index: 1;
+
+ &:before {
+ content: "Go to:";
+ position: absolute;
+ left: -2.75rem;
+ top: 0.35rem;
+ font-weight: $font-weight-medium;
+ color: var(--headings-color);
+ pointer-events: none;
+ }
+ }
+
+ &:hover {
+ .header__docs__menu {
+ display: flex;
+ }
+
+ .header__docs__current {
+ border-radius: $border-radius $border-radius 0 0;
+ }
+ }
+}
+
+:root {
+ &.read-mode {
+ .header__docs {
+ @include breakpoint-min(breakpoints(lg)) {
+ right: 4.5rem;
+ }
+ }
+ }
+
+ &:not(.dark-mode) {
+ .header__docs {
+ @include breakpoint-max(breakpoints(lg)) {
+ .header__docs__current {
+ --docs-menu-border-color: #{rgba($white, 0.25)};
+ --docs-menu-bg: transparent;
+ --headings-color: #{$white};
+ }
+
+ &:hover {
+ .header__docs__current {
+ --docs-menu-bg: #{$white};
+ --headings-color: $headings-color;
+ }
+ }
+ }
+ }
+
+ }
+}
+
+.header__docs__current {
+ color: var(--headings-color);
+ font-weight: $font-weight-medium;
+ border: 1px solid var(--docs-menu-border-color);
+ border-radius: $border-radius;
+ display: flex;
+ white-space: nowrap;
+ align-items: center;
+ height: 2rem;
+ padding: 0.075rem 0.75rem 0;
+ background-color: var(--docs-menu-bg);
+
+ & > svg {
+ margin-top: 1px;
+ margin-left: 0.5rem;
+ }
+}
+
+.header__docs__menu {
+ position: absolute;
+ margin-top: -1px;
+ left: 0;
+ top: 100%;
+ width: 100%;
+ flex-direction: column;
+ gap: 1px;
+ display: none;
+ background-color: var(--nav-dropdown-bg);
+ padding: 0.25rem;
+ z-index: 10;
+ border-radius: 0 0 $border-radius $border-radius;
+ border: 1px solid var(--docs-menu-border-color);
+
+ & > a {
+ padding: 0.35rem 1.6rem 0.35rem 0.6rem;
+ display: flex;
+ align-items: center;
+ border-radius: $border-radius;
+ white-space: nowrap;
+ color: var(--text-muted-color);
+ border: 1px solid transparent;
+
+ &:hover {
+ background-color: var(--theme-light-bg);
+ color: var(--text-color);
+ }
+
+ &.current {
+ background-color: var(--theme-light-hover-bg);
+ pointer-events: none;
+ color: var(--text-color);
+ }
+ }
}
.header__actions {
@@ -65,26 +176,13 @@
}
.icon--switch {
- transition: background-color 500ms, border-color 500ms;
background-color: var(--header-actions-icon-bg);
border-color: var(--header-actions-icon-border-color);
+ color: var(--text-color);
&:hover {
background-color: var(--header-actions-icon-hover-bg);
}
-
- & > svg {
- stroke: var(--header-actions-icon-stroke);
- stroke-width: var(--header-actions-icon-stroke-width);
-
- &:last-child {
- & > path {
- &:last-child {
- fill: var(--header-actions-icon-path-fill);
- }
- }
- }
- }
}
}
diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss
index fa859a85..2415c801 100644
--- a/source/_static/scss/includes/_misc.scss
+++ b/source/_static/scss/includes/_misc.scss
@@ -49,8 +49,8 @@
// Buttons icons
// ----------------------
.icon {
- width: 1.75rem;
- height: 1.75rem;
+ width: 2rem;
+ height: 2rem;
border: 1px solid transparent;
border-radius: $border-radius;
background-color: transparent;
@@ -79,11 +79,9 @@
& > svg {
transform: scale(1);
opacity: 1;
- transition: transform 300ms, opacity 300ms;
position: absolute;
&:last-child:not(:only-child) {
- transform: scale(0);
opacity: 0;
}
}
@@ -92,12 +90,10 @@
& > svg,
& > img {
&:first-child {
- transform: scale(0);
opacity: 0;
}
&:last-child {
- transform: scale(1);
opacity: 1;
}
}
diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss
index d71d134a..f3c9448f 100644
--- a/source/_static/scss/includes/_theme.scss
+++ b/source/_static/scss/includes/_theme.scss
@@ -12,14 +12,14 @@ $theme-properties: (
--headings-color: $black #E3EEEF,
// Theme
- --theme-light-bg: $light-300 $dark-200,
- --theme-light-hover-bg: $light-500 $dark-300,
+ --theme-light-bg: $light-200 $dark-200,
+ --theme-light-hover-bg: $light-300 $dark-300,
// Header
--header-bg: $header-light-bg $dark-0,
--logo-fill-color: $theme-red $white,
--header-actions-icon-bg: $white $dark-0,
- --header-actions-icon-border-color: transparent $dark-500,
+ --header-actions-icon-border-color: transparent $dark-300,
--header-actions-icon-stroke: $black $dark-500,
--header-actions-icon-stroke-width: 1.5 1.25,
--header-actions-icon-path-fill: $header-light-bg $dark-500,
@@ -129,6 +129,10 @@ $theme-properties: (
--is-meta-key-border-color: #c5cad0 $dark-400,
--is-search-border-color: $light-500 $dark-300,
--is-search-focus-box-shadow: rgba($light-500, 0.35) rgba($dark-100, 0.75),
+
+ // Docs menu
+ --docs-menu-border-color: $light-300 $dark-300,
+ --docs-menu-bg: $white transparent,
);
// Activate dark/light themes
diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss
index 1185f308..4ff90455 100644
--- a/source/_static/scss/includes/_toc.scss
+++ b/source/_static/scss/includes/_toc.scss
@@ -74,6 +74,8 @@ div.topic {
flex: 1;
position: relative;
border: none;
+ padding: 0;
+ margin: 0.25rem 0;
.topic-title {
@include breakpoint-max(breakpoints(lg)) {
diff --git a/source/_templates/header.html b/source/_templates/header.html
index 9238f444..e7bd51c1 100644
--- a/source/_templates/header.html
+++ b/source/_templates/header.html
@@ -6,7 +6,22 @@
-
+
+