From 0ae58075652454f6bd535e39fdcd7be27f846fd5 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 11 Apr 2022 15:17:04 +0200 Subject: [PATCH 1/3] Fix top navbar style --- templates/header/topbar_begin.html | 78 +----------------------------- templates/header/topbar_end.html | 75 ++++++++++++++++++++++++++++ templates/style/_navbar.scss | 35 +++++++++++--- 3 files changed, 104 insertions(+), 84 deletions(-) diff --git a/templates/header/topbar_begin.html b/templates/header/topbar_begin.html index f621074b8..c28e5ed4d 100644 --- a/templates/header/topbar_begin.html +++ b/templates/header/topbar_begin.html @@ -3,9 +3,6 @@ The only piece of context it can take is `search_query`, which should be a string and will populate the search field if it exists #} - -{%- import "macros.html" as macros -%} -
diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss index 82a1bf171..ff9a58d0e 100644 --- a/templates/style/_navbar.scss +++ b/templates/style/_navbar.scss @@ -28,6 +28,12 @@ div.nav-container { color: var(--color-navbar-standard); /* The font size must be specified in pixels because the height is specified in pixels. */ font: 16px $font-family-sans; + position: relative; + + .container, .pure-menu-horizontal { + position: relative; + height: 100%; + } li { border-left: 1px solid var(--color-border); @@ -73,18 +79,18 @@ div.nav-container { } } - .pure-menu-right { - float: right; - } - form.landing-search-form-nav { max-width: 1200px; + height: 100%; + display: flex; + flex-direction: row; #search-input-nav { - float: right; max-width: 150px; display: none; border-left: 1px solid var(--color-border); + height: 100%; + overflow-x: hidden; @media #{$media-sm} { display: block; @@ -107,7 +113,7 @@ div.nav-container { font-size: 0.8em; box-shadow: none; background-color: var(--color-background); - height: 31px; + height: 100%; } } @@ -122,8 +128,21 @@ div.nav-container { See https://github.com/rust-lang/docs.rs/issues/1669. */ .pure-menu-item a { - /* 0.5 em is the padding */ - max-height: calc(#{$top-navbar-height} - 0.5em * 2); + max-height: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + } + + .docsrs-logo, .pure-menu-item a { + padding: 8px 1em; + } + + .pure-menu-item { + height: 100%; + } + + .spacer { + flex-grow: 1; } } From 0469099e47fec6d36d2dc53ee52af84c0d0edf31 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Wed, 13 Apr 2022 15:22:32 -0700 Subject: [PATCH 2/3] Fix up top-navbar tweaks --- templates/style/_navbar.scss | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss index ff9a58d0e..8cc00fba1 100644 --- a/templates/style/_navbar.scss +++ b/templates/style/_navbar.scss @@ -28,7 +28,6 @@ div.nav-container { color: var(--color-navbar-standard); /* The font size must be specified in pixels because the height is specified in pixels. */ font: 16px $font-family-sans; - position: relative; .container, .pure-menu-horizontal { position: relative; @@ -121,23 +120,7 @@ div.nav-container { outline: unset; } - - /* In some unusual situations, like a locally installed copy of "Fira Sans," elements - of the navbar might overflow vertically and start interfering with the main body - content. To ensure that doesn't happen, hide any vertical overflow. - See https://github.com/rust-lang/docs.rs/issues/1669. - */ - .pure-menu-item a { - max-height: 100%; - overflow-x: hidden; - text-overflow: ellipsis; - } - - .docsrs-logo, .pure-menu-item a { - padding: 8px 1em; - } - - .pure-menu-item { + .docsrs-logo, .pure-menu-item, .pure-menu-item a { height: 100%; } From 6f9815cb39e194083c1bfbbba1f97dae47792cbb Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Thu, 14 Apr 2022 10:24:49 -0700 Subject: [PATCH 3/3] Switch font sizes to px --- templates/style/_navbar.scss | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss index 8cc00fba1..9458d3aad 100644 --- a/templates/style/_navbar.scss +++ b/templates/style/_navbar.scss @@ -45,18 +45,18 @@ div.nav-container { background-color: var(--color-background); } &:after { - font-size: 0.8em; + font-size: 12.8px; content: "\25BC" } } .pure-menu-link { - font-size: 0.8em; + font-size: 12.8px; font-weight: 400; color: var(--color-navbar-standard); &.description { - font-size: 0.9em; + font-size: 14.4px; } // Improves menu link readability when inverting the colors on focus. @@ -89,7 +89,6 @@ div.nav-container { display: none; border-left: 1px solid var(--color-border); height: 100%; - overflow-x: hidden; @media #{$media-sm} { display: block; @@ -103,13 +102,13 @@ div.nav-container { color: var(--color-navbar-standard); cursor: pointer; padding-left: 0.5rem; - font-size: 0.8em; + font-size: 12.8px; } input { border: none; margin: 0 1em 0 0; - font-size: 0.8em; + font-size: 12.8px; box-shadow: none; background-color: var(--color-background); height: 100%; @@ -120,6 +119,10 @@ div.nav-container { outline: unset; } + .docsrs-logo, .pure-menu-item a { + padding: 6.4px 16px 6.4px 16px; + } + .docsrs-logo, .pure-menu-item, .pure-menu-item a { height: 100%; } @@ -273,7 +276,7 @@ div.nav-container { p.description { font-family: $font-family-sans; - font-size: 0.8em; + font-size: 12.8px; color: var(--color-navbar-standard); padding: 0.5em 1em; margin: 0;