From caa88cc9e0cdfd68c8c40a7e3292625fb82aac2f Mon Sep 17 00:00:00 2001 From: Miki Date: Mon, 29 Aug 2022 11:07:08 -0700 Subject: [PATCH] Adopts the new top nav from the website (#984) Signed-off-by: Miki Signed-off-by: Miki --- _config.yml | 1 + _data/top_nav.yml | 50 +++++++++++ _includes/header.html | 44 +++++++--- _sass/_nested-nav.scss | 130 ++++++++++++++++++++++++++++ _sass/color_schemes/opensearch.scss | 11 +++ _sass/custom/custom.scss | 20 +---- 6 files changed, 227 insertions(+), 29 deletions(-) create mode 100644 _data/top_nav.yml create mode 100644 _sass/_nested-nav.scss diff --git a/_config.yml b/_config.yml index 52873bd9..5511f0c6 100644 --- a/_config.yml +++ b/_config.yml @@ -184,3 +184,4 @@ exclude: - vendor/gems/ - vendor/ruby/ - README.md + - .idea diff --git a/_data/top_nav.yml b/_data/top_nav.yml new file mode 100644 index 00000000..3bf3e019 --- /dev/null +++ b/_data/top_nav.yml @@ -0,0 +1,50 @@ +items: + - + label: Download + fragments: + - downloads + - versions + url: /downloads.html#opensearch + - + label: About + fragments: + - about + - releases + - faq + children: + - + label: OpenSearch + url: /about.html + - + label: Releases + url: /releases.html + - + label: FAQ + url: /faq + - + label: Community + fragments: + - events + - community_projects + - blog + - partners + children: + - + label: Blog + url: /blog + - + label: Forum + url: https://forum.opensearch.org/ + - + label: Events + url: /events + - + label: Partners + url: /partners + - + label: Projects + url: /community_projects + - + label: Documentation + fragment: docs + url: /docs/ \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html index 2bc568ab..a9e8f3f3 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,5 +1,4 @@ -{% assign url_full = site.baseurl | append: page.url %} -{% assign url_parts = url_full | split: "/" %} +{% assign url_parts = page.url | split: "/" %} {%if page.alert %} + \ No newline at end of file diff --git a/_sass/_nested-nav.scss b/_sass/_nested-nav.scss new file mode 100644 index 00000000..6b30ca4f --- /dev/null +++ b/_sass/_nested-nav.scss @@ -0,0 +1,130 @@ +#top { + z-index: 9; +} + +@media screen and (min-width: 46.25rem) { + [role="banner"] { + overflow: visible; + + .nav-menu-on { + overflow: visible; + + .nested-nav { + li { + font-size: 0.8125rem; + } + } + } + + [role="navigation"] ul.nested-nav > li:before { + display: inline-block; + } + } + + [role="navigation"] .nested-nav { + > li { + position: relative; + float: left; + + > a { + padding: .5em 0; + } + + > ul { + list-style: none; + position: absolute; + background: #fff; + padding: 0; + margin: 0; + min-width: 100%; + box-shadow: 0 2px 5px rgba(0, 0, 0, .2); + border-radius: 2px; + left: -.5em; + + li { + margin: 0; + float: none; + + &:before { + display: none; + } + + a { + color: $text; + padding: .46875rem .9375rem; + display: block; + font-size: 90%; + white-space: nowrap; + + &:hover { + color: $attention; + } + } + } + } + + &:not(:first-child) { + > ul { + left: .5em; + } + } + + &:hover { + > ul { + display: block; + visibility: visible; + opacity: 1; + top: calc(100% + .5em); + transition: opacity .25s ease-out, top .25s ease-out, visibility 0s; + } + } + } + + ul { + /*display: none;*/ + visibility: hidden; + display: block; + opacity: 0; + transition: opacity .25s ease-out, top 0s .5s, visibility 0s .5s; + top: calc(100%); + } + + a { + cursor: pointer; + } + } +} + +/* This is placed in a media query to prevent the momentary distortion of the page + * when it is rendered and the browser takes its time to evaluate the @media. + */ +@media screen and (max-width: 46.24rem) { + [role="banner"] .nested-nav { + li { + line-height: 1.5em; + font-size: 1.125rem; + + ul { + margin: 0 0 10px; + } + + a { + padding: 0; + + &:not(:last-child) { + pointer-events: none; + } + } + } + + > li { + > a.in-category:not(:last-child) { + color: white; + } + } + } + + [role="banner"] [role="navigation"] .nested-nav li:before { + display: none; + } +} \ No newline at end of file diff --git a/_sass/color_schemes/opensearch.scss b/_sass/color_schemes/opensearch.scss index c98b7901..c1014088 100644 --- a/_sass/color_schemes/opensearch.scss +++ b/_sass/color_schemes/opensearch.scss @@ -70,3 +70,14 @@ $base-button-color: $grey-lt-300; // $search-background-color: $grey-dk-250; // $table-background-color: $grey-dk-250; // $feedback-color: darken($sidebar-color, 3%); + +$content-width: 740px; +$toc-width: 232px; + +$media-queries: ( + xs: 320px, + sm: 462.5px, + md: $content-width, + lg: $content-width + $nav-width, + xl: $content-width + $nav-width + $toc-width +); \ No newline at end of file diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index bc4ae921..1e439430 100755 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -41,15 +41,6 @@ $content-width: 740px !default; $table-border-color: $grey-lt-300; $toc-width: 232px !default; -// Replaces xl size -$media-queries: ( - xs: 320px, - sm: 500px, - md: $content-width, - lg: $content-width + $nav-width, - xl: $content-width + $nav-width + $toc-width -); - body { @include serif; } @@ -409,11 +400,6 @@ body { [role="complementary"] { @include sans-serif; // reverse font style on sidebar and secondary areas } - - // don't activate mobile styles for larger screens - @include mq(md) { - min-width: 768px; - } } main { @@ -923,7 +909,7 @@ main { @include clearfix; } -@media screen and (max-width: 46.24rem) { +@media screen and (max-width: ($content-width - 1)) { [role="banner"] .nav-menu-on .small-nav { li { @@ -1233,4 +1219,6 @@ version-selector { to { transform: rotate(359deg) } -} \ No newline at end of file +} + +@import "../_nested-nav.scss"; \ No newline at end of file