From d72963eb60a0f8f9195e0a20eb891945a2b08339 Mon Sep 17 00:00:00 2001 From: Mark Gerrard Date: Thu, 30 Nov 2023 16:54:15 +0000 Subject: [PATCH] Mobile improvements for header --- _docs/assets/js/mobile-navbar.js | 26 ++ _docs_theme/main.html | 36 +- extra_sass/_masthead.scss | 710 ++++++++++++++++--------------- mkdocs.yml | 3 + 4 files changed, 408 insertions(+), 367 deletions(-) create mode 100644 _docs/assets/js/mobile-navbar.js diff --git a/_docs/assets/js/mobile-navbar.js b/_docs/assets/js/mobile-navbar.js new file mode 100644 index 00000000..07c42801 --- /dev/null +++ b/_docs/assets/js/mobile-navbar.js @@ -0,0 +1,26 @@ +const hamburgerMenuIcon = document.getElementById("hamburgerMenuIcon"); +const closeMenuIcon = document.getElementById("closeMenuIcon"); +const overlayMenuClick = document.getElementById("overlay-menu"); +const overlayMenu = document.querySelector(".overlay-menu"); +const mobileMenuWrapper = document.querySelector( + ".mobile-menu-wrapper" +); + +closeMenuIcon.addEventListener("click", () => { + closeMenu(); +}); + +overlayMenuClick.addEventListener("click", () => { + closeMenu(); +}); + +hamburgerMenuIcon.addEventListener("click", () => { + overlayMenu.classList.add("active-overlay"); + mobileMenuWrapper.classList.add("active-menu"); +}); + +function closeMenu() { + overlayMenu.classList.remove("active-overlay"); + mobileMenuWrapper.classList.remove("active-menu"); +} + diff --git a/_docs_theme/main.html b/_docs_theme/main.html index b1dc57b6..ee570a15 100644 --- a/_docs_theme/main.html +++ b/_docs_theme/main.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% block header %} -
+
Go to WM Cloud Free forever. No credit card needed
- -
-
- - -
+ + +
+
+ + +
{% endblock %} diff --git a/extra_sass/_masthead.scss b/extra_sass/_masthead.scss index e9eee108..8fee79aa 100644 --- a/extra_sass/_masthead.scss +++ b/extra_sass/_masthead.scss @@ -1,400 +1,402 @@ /* ========================================================================== - MASTHEAD - ========================================================================== */ +MASTHEAD +========================================================================== */ - @import "_variables"; - @import "vendor/breakpoint/stylesheets/breakpoint"; +@import "_variables"; +@import "vendor/breakpoint/stylesheets/breakpoint"; - $masthead-link-color: $orange; - $masthead-link-color-hover: mix(#000, $gray, 25%); +$masthead-link-color: $orange; +$masthead-link-color-hover: mix(#000, $gray, 25%); - .masthead { - background-color: #fff; - position: relative; - animation: intro 0.3s both; - animation-delay: 0.15s; - z-index: 20; - max-width: 1280px; - margin: 0 4rem; - display: grid; - padding: $p-m 0; +.masthead { + background-color: #fff; + position: relative; + animation: intro 0.3s both; + animation-delay: 0.15s; + z-index: 20; + padding: 0.75rem 0; + font-size: 16px; + line-height: 24px; + font-family: "DMSans"; + width: 100vw; + display: grid; + grid-template-columns: 60% 1fr; + align-items: center; + + @include breakpoint($large) { + padding: $p-xl 0; grid-template-columns: 254px 1fr auto; - font-size: 16px; - line-height: 24px; - align-items: center; - font-family: "DMSans"; - - @include breakpoint($medium) { - padding: $p-xl 0; - } + margin: 0 auto; + max-width: 61rem; } - - .masthead__nav { +} + +.masthead__nav { + display: flex; + align-items: center; + padding: 0 0.2rem; + + ul { display: flex; - align-items: center; - padding: 0 0.2rem; - - ul { - display: flex; - gap: 24px; - justify-self: center; - } - - .divSubNav a { - display: block; - } + gap: 24px; + justify-self: center; } - - .masthead__logo { - margin-left: 12px; + + .divSubNav a { + display: block; } - - .masthead__cta { - text-align: center; - display: none; - - @include breakpoint($large) { - display: block; - } - - &-note { - display: block; - font-size: 12px; - color: black; - font-weight: 500; - } +} + +.masthead__logo { + margin-left: 12px; +} + +.masthead__cta { + text-align: center; + display: none; + + @include breakpoint($large) { + display: block; } - - .masthead__menu { - display: flex; - align-items: center; - justify-content: flex-start; - @media (max-width: 1023px) { - justify-content: space-between; - } - - ul { - margin-left: auto; - margin-right: 8em; - padding: 0; - clear: both; - list-style-type: none; - } + + &-note { + display: block; + font-size: 12px; + color: black; + font-weight: 500; } - - .masthead__menu-item { - display: inline-block; +} + +.masthead__menu { + display: flex; + align-items: center; + justify-content: flex-start; + @media (max-width: 1023px) { + justify-content: space-between; + } + + ul { + margin-left: auto; + margin-right: 8em; + padding: 0; + clear: both; list-style-type: none; - white-space: nowrap; - padding-left: 20px; - - &--lg { - padding-right: 2em; - } } - - .social-links { - display: flex; - align-items: center; - - li { - margin: 0 0 0 20px; - &:first-child { - margin-left: 0; - } - } - .separator-line-nav { - margin: 0 20px; +} + +.masthead__menu-item { + display: inline-block; + list-style-type: none; + white-space: nowrap; + padding-left: 20px; + + &--lg { + padding-right: 2em; + } +} + +.social-links { + display: flex; + align-items: center; + + li { + margin: 0 0 0 20px; + &:first-child { + margin-left: 0; } } - - .schedule-demo-nav, - .schedule-demo-mobile-nav { - cursor: pointer; - background: #f0f5ff; - border: 1px solid rgba(15, 178, 239, 0.5); - border-radius: 4px; - padding: 3px 10px; - color: #0fb2ef; - font-family: "Ubuntu"; - font-style: normal; - font-weight: 700; - font-size: 16px; + .separator-line-nav { + margin: 0 20px; + } +} + +.schedule-demo-nav, +.schedule-demo-mobile-nav { + cursor: pointer; + background: #f0f5ff; + border: 1px solid rgba(15, 178, 239, 0.5); + border-radius: 4px; + padding: 3px 10px; + color: #0fb2ef; + font-family: "Ubuntu"; + font-style: normal; + font-weight: 700; + font-size: 16px; +} + +schedule-demo-nav-mobile { + margin-bottom: 10px; +} + +.hamburgerMenuIcon { + margin-right: 12px; + padding: 0; + background: none; + border: none; + display: none; + + img { + width: 100%; + } +} + +.mobile-menu-wrapper { + display: none; + + a:not(.btn) { + display: block; + padding: $p-m 0; + font-size: $type-size-4; + color: $text-color; + text-decoration: none; } - - schedule-demo-nav-mobile { - margin-bottom: 10px; +} + +.overlay-menu { + display: none; +} + +@media (max-width: 1023px) { + #site-nav, + .social-links { + display: none; } - + .hamburgerMenuIcon { + display: block; + width: 24px; + height: 24px; + margin-right: 1rem; justify-self: flex-end; - margin-right: 12px; - padding: 0; - background: none; - border: none; - display: none; - - img { - width: 100%; - } } - + + .closeMenuIcon { + position: absolute; + right: 16px; + top: 16px; + width: 18px; + } + .mobile-menu-wrapper { - display: none; - - a:not(.btn) { + display: block; + background-color: #fff; + position: fixed; + right: -50vw; + top: 0; + height: 100%; + width: 50vw; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + z-index: 100; + -webkit-transition: right 0.2s linear; + -moz-transition: right 0.2s linear; + -o-transition: right 0.2s linear; + transition: right 0.2s linear; + padding: 38px 24px; + + &__cta { display: block; - padding: $p-m 0; - font-size: $type-size-4; - color: $text-color; + margin-bottom: 4px; + padding: 14px 24px; + margin-left: auto; + background: #2d69f6; + color: white; + border-radius: 4px; + background-color: #2d69f6; text-decoration: none; + text-align: center; + + &:hover { + color: #fafafa; + } } - } - - .overlay-menu { - display: none; - } - - @media (max-width: 1023px) { - #site-nav, - .social-links { - display: none; + + ul { + margin: 0; + padding: 0; + list-style: none; } - - .hamburgerMenuIcon { + + &.active-menu { display: block; - width: 24px; - height: 24px; - align-self: flex-start; - } - - .closeMenuIcon { - position: absolute; - right: 16px; - top: 16px; - width: 18px; + right: 0; + width: 80vw; } - - .mobile-menu-wrapper { + } + .overlay-menu { + &.active-overlay { display: block; - background-color: #fff; position: fixed; - right: -50vw; top: 0; + left: 0; + width: 100%; height: 100%; - width: 50vw; - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - z-index: 100; - -webkit-transition: right 0.2s linear; - -moz-transition: right 0.2s linear; - -o-transition: right 0.2s linear; - transition: right 0.2s linear; - padding: 38px 24px; - - &__cta { - display: block; - margin-bottom: 4px; - padding: 14px 24px; - margin-left: auto; - background: #2d69f6; - color: white; - border-radius: 4px; - background-color: #2d69f6; - text-decoration: none; - text-align: center; - - &:hover { - color: #fafafa; - } - } - - ul { - margin: 0; - padding: 0; - list-style: none; - } - - &.active-menu { - display: block; - right: 0; - width: 80vw; - } - } - .overlay-menu { - &.active-overlay { - display: block; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 50; - background-color: rgba(7, 0, 71, 0.5); - } - } - .mobile-social-links { - display: flex; - justify-content: flex-end; - - li { - margin-left: 10px; - &:first-child { - margin-left: 0; - } - } + z-index: 50; + background-color: rgba(7, 0, 71, 0.5); } } - - .navlink { - position: relative !important; - padding-bottom: 0; - cursor: pointer; - - &:hover { - & > a { - color: $link-color; + .mobile-social-links { + display: flex; + justify-content: flex-end; + + li { + margin-left: 10px; + &:first-child { + margin-left: 0; } } - - a { - padding: 0 !important; - margin: 0 0 5px 0; - width: fit-content !important; - height: 32px; - font-weight: 500; - color: $text-color; - } - } - - .navlink-image { - width: 20px; - filter: invert(47%); - vertical-align: middle; - } - - .divSubNav { - position: relative; - cursor: default; - display: none; - position: absolute; - content: ""; - left: 0; - top: 0; - width: fit-content; - padding-top: 32px; } - - .divSubNav__inner { - position: relative; - padding: 10px 15px; - background: #ffffff; - box-shadow: 0px -5px 20px rgba(210, 223, 249, 0.5); - border-radius: 4px; - - &:before { - position: absolute; - content: ""; - left: 15px; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 7px solid #fff; - top: -7px; +} + +.navlink { + position: relative !important; + padding-bottom: 0; + cursor: pointer; + + &:hover { + & > a { + color: $link-color; } } - - .divSubNav a { + + a { padding: 0 !important; margin: 0 0 5px 0; width: fit-content !important; - - &:hover { - color: $link-color; - } - } - - .divSubNav a:last-child { - margin-bottom: 0; - } - - .divSubNav a::before { - background: none !important; - } - - .navlink:hover > .divSubNav { - display: block; - } - - .navHover::before { - background: unset !important; - } - - .navlink::before { - background: unset !important; - } - - .navlink a::before { - background: unset !important; - } - - .wiremock-cloud-logo-navbar-item { - padding-left: 20px; - padding-top: 0; - } - - .wiremock-cloud-logo-navbar-item div span { - text-align: right; + height: 32px; + font-weight: 500; + color: $text-color; } - - .wiremock-cloud-logo-navbar { - margin: 0; - background: unset !important; - } - - .wiremock-cloud-logo-navbar div { - border-color: #0fb2ef; - background-color: #e4f0f7; - border-style: solid; - border-radius: 8px; - border-width: 4px; - align-items: center; - justify-content: center; - margin: 0; - height: 45px; - position: relative; - } - - .wiremock-cloud-logo-navbar div img { - vertical-align: middle; - width: 100%; - background-color: #e4f0f7; - height: 36px; - padding: 4px; - padding-left: 12px; - padding-right: 12px; - } - - .wiremock-cloud-logo-navbar div div { - font-size: x-small; - font-weight: bold; +} + +.navlink-image { + width: 20px; + filter: invert(47%); + vertical-align: middle; +} + +.divSubNav { + position: relative; + cursor: default; + display: none; + position: absolute; + content: ""; + left: 0; + top: 0; + width: fit-content; + padding-top: 32px; +} + +.divSubNav__inner { + position: relative; + padding: 10px 15px; + background: #ffffff; + box-shadow: 0px -5px 20px rgba(210, 223, 249, 0.5); + border-radius: 4px; + + &:before { position: absolute; - bottom: 2px; - left: 4px; - border-style: none; - height: fit-content; + content: ""; + left: 15px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 7px solid #fff; + top: -7px; + } +} + +.divSubNav a { + padding: 0 !important; + margin: 0 0 5px 0; + width: fit-content !important; + + &:hover { + color: $link-color; } - +} + +.divSubNav a:last-child { + margin-bottom: 0; +} + +.divSubNav a::before { + background: none !important; +} + +.navlink:hover > .divSubNav { + display: block; +} + +.navHover::before { + background: unset !important; +} + +.navlink::before { + background: unset !important; +} + +.navlink a::before { + background: unset !important; +} + +.wiremock-cloud-logo-navbar-item { + padding-left: 20px; + padding-top: 0; +} + +.wiremock-cloud-logo-navbar-item div span { + text-align: right; +} + +.wiremock-cloud-logo-navbar { + margin: 0; + background: unset !important; +} + +.wiremock-cloud-logo-navbar div { + border-color: #0fb2ef; + background-color: #e4f0f7; + border-style: solid; + border-radius: 8px; + border-width: 4px; + align-items: center; + justify-content: center; + margin: 0; + height: 45px; + position: relative; +} + +.wiremock-cloud-logo-navbar div img { + vertical-align: middle; + width: 100%; + background-color: #e4f0f7; + height: 36px; + padding: 4px; + padding-left: 12px; + padding-right: 12px; +} + +.wiremock-cloud-logo-navbar div div { + font-size: x-small; + font-weight: bold; + position: absolute; + bottom: 2px; + left: 4px; + border-style: none; + height: fit-content; +} + +.wiremock-cloud-logo-note { + margin-left: auto; + margin-right: 4em; + float: right; + font-size: small; +} + +@media (max-width: 1023px) { .wiremock-cloud-logo-note { - margin-left: auto; - margin-right: 4em; - float: right; - font-size: small; - } - - @media (max-width: 1023px) { - .wiremock-cloud-logo-note { - display: none; - } + display: none; } +} diff --git a/mkdocs.yml b/mkdocs.yml index d1da308c..c00ab0da 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -85,6 +85,9 @@ extra_css: #- assets/css/main.css #- assets/css/main.css.map +extra_javascript: + - assets/js/mobile-navbar.js + plugins: - extra-sass - search