diff --git a/src/css/base.css b/src/css/base.css index e4823bf..d694722 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -125,3 +125,21 @@ body ::-webkit-scrollbar-thumb { max-width: 1280px; margin: 0 auto; } + +/** pseudo-tailwind classes */ + +.flex { + display: flex; +} + +.flex-col { + flex-direction: column; +} + +.m-0 { + margin: 0; +} + +.justify-between { + justify-content: space-between; +} diff --git a/src/css/header.css b/src/css/header.css index 2044138..f9588e2 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -283,7 +283,7 @@ body { transition: max-height 0.2s ease, padding 0.2s ease; } - .navbar-sub .container { + .navbar-sub .navlinks { flex-direction: column; } diff --git a/src/css/page-versions.css b/src/css/page-versions.css index 5658aae..da09d53 100644 --- a/src/css/page-versions.css +++ b/src/css/page-versions.css @@ -11,16 +11,23 @@ } .page-versions .version-menu-toggle { - color: inherit; + color: var(--color-white); background: url(../img/chevron.svg) no-repeat; background-position: right 0.5rem top 50%; background-size: auto 0.75em; border: none; outline: none; line-height: inherit; - padding: 0.5rem 1.5rem 0.5rem 0.5rem; + padding: 7px 1.5rem 7px 30px; position: relative; - z-index: var(--z-index-page-version-menu); + z-index: var(--z-index-page-version-menu-button); + font-size: 16px; + opacity: 0.8; +} + +.page-versions .version-menu-toggle:hover { + opacity: 1; + text-decoration: none; } .page-versions .version-menu { @@ -34,6 +41,9 @@ top: 0; right: 0; white-space: nowrap; + z-index: var(--z-index-page-version-menu); + color: var(--color-white); + font-size: 16px; } .page-versions:not(.is-active) .version-menu { @@ -41,11 +51,13 @@ } .page-versions .version { + color: var(--color-white); display: block; padding-top: 0.5rem; } .page-versions .version.is-current { + color: var(--color-white); display: none; } diff --git a/src/css/vars.css b/src/css/vars.css index 41c65bf..1d6d6ed 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -58,7 +58,7 @@ --toolbar-border-color: var(--panel-border-color); --toolbar-font-color: var(--color-jet-30); --toolbar-muted-color: var(--color-gray-30); - --page-version-menu-background: var(--color-smoke-70); + --page-version-menu-background: var(--color-jet-70); --page-version-missing-font-color: var(--color-gray-30); /* admonitions */ --caution-color: #a0439c; @@ -140,5 +140,6 @@ --z-index-nav: 1; --z-index-toolbar: 2; --z-index-page-version-menu: 3; - --z-index-navbar: 4; + --z-index-page-version-menu-button: 4; + --z-index-navbar: 5; } diff --git a/src/img/chevron.svg b/src/img/chevron.svg index 836c90f..f1bfde9 100644 --- a/src/img/chevron.svg +++ b/src/img/chevron.svg @@ -53,7 +53,7 @@ id="layer1" transform="translate(0,-1022.3622)"> - + - + {{#with @root.page.versions}} +
+ +
+ {{#each this}} + {{./displayVersion}} + {{/each}} +
+
+ {{/with}} + + + diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs index b77ee40..29e9220 100644 --- a/src/partials/nav-menu.hbs +++ b/src/partials/nav-menu.hbs @@ -5,18 +5,6 @@ {{#with @root.page.componentVersion}}

{{./title}}

{{/with}} - {{#with @root.page.versions}} -
- -
- {{#each this}} - {{./displayVersion}} - {{/each}} -
-
- {{/with}} {{> nav-tree navigation=this}}