Skip to content

Commit

Permalink
Website: update website header & mobile navigation menu (#17718)
Browse files Browse the repository at this point in the history 
Closes: #17708

Changes:
- Updated the website's header navigation to match the latest Figma
wireframes.
- Updated the padding of the mobile navigation menu to keep padding
consistent when the menu is opened/closed
  • Loading branch information
@eashaw
eashaw authored Mar 21, 2024
1 parent 4f7ebe2 commit 1226af3
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 160 deletions.
211 changes: 125 additions & 86 deletions website/assets/styles/layout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ html, body {

[purpose='page-header'] {
max-width: 1200px;
padding: 19px 64px;
height: 80px;
color: @core-fleet-black;
[purpose='header-logo'] {
max-width: 118px;
img {
Expand Down Expand Up @@ -99,23 +101,20 @@ html, body {

[purpose='mobile-nav-toggle-btn'] {
color: #192147;
cursor: unset;
cursor: pointer;
font-size: 16px;
text-decoration: none;
font-family: @navigation-font;
font-weight: @bold;
height: 100%;
padding-left: 24px;
user-select: none;
img {
margin-left: 8px;
width: 16px;
}
}
[purpose='mobile-nav'] {
[purpose='mobile-header-logo'] {
img {
height: 92px;
width: 162px;
}
}
position: fixed;
min-height: 100vh;
top: 0;
Expand All @@ -124,52 +123,79 @@ html, body {
bottom: 0;
pointer-events: none;
background-color: #ffffff;
a:not(.btn) {
width: 100%;
padding: 8px 24px 8px 0px;
margin-bottom: 4px;
font-weight: 700;
color: #212529;
cursor: pointer;
}
hr {
margin-top: 4px;
margin-bottom: 8px;
}
[purpose='mobile-nav-header'] {
padding: 19px 40px;
height: 80px;
}
[purpose='mobile-nav-container'] {
padding: 8px 40px 0px 40px;
}
[purpose='mobile-header-logo'] {
img {
height: 41px;
width: 118px;
}
}
[purpose='mobile-nav-close-btn'] {
font-size: 16px;
padding-left: 24px;
cursor: pointer;
text-decoration: none;
user-select: none;
img {
width: 16px;
}
}

[purpose='mobile-dropdown-link'] {
width: 100%;
padding: 8px 24px 8px 0px;
margin-bottom: 8px;
font-weight: 700;
cursor: pointer;
color: @core-fleet-black;
&:hover {
color: @core-vibrant-blue;
text-decoration: none;
}
}
[purpose='mobile-dropdown-toggle'] {
width: 100%;
padding: 8px 24px 8px 0px;
margin-bottom: 4px;
font-weight: 700;
cursor: pointer;
color: @core-fleet-black;
margin-bottom: 0px;
&[aria-expanded='true'] {
color: #6a67fe;
outline: none;
margin-bottom: 4px;
}
&:hover {
color: #6a67fe;
}
}
[purpose='mobile-nav-btn'] {
text-decoration: none;
font-weight: 700;
color: @core-fleet-black;
&:hover {
color: @core-vibrant-blue;
}
}
[purpose='mobile-dropdown'] {
[purpose='beta-label'] {
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
display: inline-block;
padding: 1px 6px;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: 11px;
line-height: 20px;
margin-left: 8px;
vertical-align: middle;
cursor: pointer;
display: flex;
flex-direction: column;
&.collapse {
display: none;
}
&.collapse.show {
display: flex;
}
span {
display: inline-flex;
Expand All @@ -192,16 +218,13 @@ html, body {
color: #6a67fe;
text-decoration: none;
}
[purpose='beta-label'] {
color: #FFF;
font-weight: 700;
font-size: 11px;
line-height: 20px;
margin-bottom: 0px;
[purpose='indented-mobile-links'] {
padding-left: 16px;
}
}
}
[purpose='header-nav'] {

[purpose='glass-header-btn'] {
color: #FFFFFF;
height: 32px;
Expand All @@ -213,11 +236,12 @@ html, body {
border-radius: 4px;
background-color: @core-vibrant-red;
text-decoration: none;
white-space: nowrap;
}
[purpose='header-nav-btn'][aria-expanded='true'] {
font-weight: 700;
outline: none;
color: #192147;
color: @core-fleet-black-75;;
}
[purpose='header-nav-btn']:before {
display: block;
Expand All @@ -227,11 +251,22 @@ html, body {
overflow: hidden;
visibility: hidden;
}
[purpose='log-out-button'] {
padding-left: 16px;
color: @core-fleet-black-75;
white-space: nowrap;
&:hover {
color: @core-fleet-black-75;
font-weight: 700;
text-decoration: none;
}
}
[purpose='header-nav-btn'] {
color: #192147;
color: @core-fleet-black-75;
font-weight: 400;
cursor: pointer;
display: inline-block;
padding: 6px 16px;
}
[purpose='header-nav-btn']:hover {
font-weight: 700;
Expand All @@ -248,13 +283,9 @@ html, body {
}
}
}
[purpose='logout-btn'] {
color: @core-fleet-black;
text-decoration: none;
line-height: 23px;
}
&:hover {
font-weight: 700;
[purpose='gh-button'] {
margin-left: 24px;
margin-right: 24px;
}
[purpose='header-dropdown'] {
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.4);
Expand All @@ -263,41 +294,32 @@ html, body {
color: @core-fleet-black;
font-weight: 400;
line-height: 20px;
&:not(:last-of-type) {
margin-bottom: 4px;
}
}
a:hover {
color: #6a67fe;
text-decoration: none;
}
[purpose='beta-label'] {
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
display: inline-block;
padding: 1px 6px;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: 11px;
line-height: 20px;
margin-left: 8px;
vertical-align: middle;
}
}
}
}
[purpose='admin-nav'] {
justify-content: center;
a {
margin-left: 30px;
margin-right: 30px;
color: @core-fleet-black-75;
&:hover {
[purpose='admin-nav'] {
justify-content: center;
a {
margin-left: 30px;
margin-right: 30px;
color: @core-fleet-black-75;
&:hover {
color: @core-fleet-black;
}
}
span {
color: @core-fleet-black;
font-weight: 600;
margin-right: 30px;
}
}
span {
color: @core-fleet-black;
font-weight: 600;
margin-right: 30px;
}
}

// Footer styles
Expand Down Expand Up @@ -411,8 +433,6 @@ html, body {
}
}



body.detected-mobile {
// Above and beyond the media queries below, this selector (which relies on
// `parasails` automatically attaching this class, if appropriate) contains
Expand All @@ -421,9 +441,9 @@ body.detected-mobile {
// devices (like the iPad) as well as handset devices (like the iPhone).
// …
}
@media (max-width: 992px) {
.homepage-cta-banner+.homepage-header-top {
top: 72px;
@media (max-width: 991px) {
[purpose='page-header'] {
padding: 19px 40px;
}
[purpose='page-wrap'] {
padding-bottom: 460px;
Expand All @@ -432,13 +452,23 @@ body.detected-mobile {
padding: 64px 40px;
height: 460px;
}

[purpose='footer-socials'] {
margin-bottom: 32px;
}
}

@media (max-width: 767px) {
[purpose='page-header'] {
padding: 19px 32px;
[purpose='mobile-nav'] {
[purpose='mobile-nav-header'] {
padding: 19px 32px;
}
[purpose='mobile-nav-container'] {
padding: 8px 32px 0px 32px;
}
}
}
[purpose='page-wrap'] {
padding-bottom: 701px;
}
Expand All @@ -451,18 +481,24 @@ body.detected-mobile {
}

}
@media (max-width: 605px) {
.homepage-cta-banner + .homepage-header-top {
top: 92px;
}
}
@media (max-width: 575px) {
[purpose='page-wrap'] {
padding-bottom: 925px;
}
[purpose='page-wrap'].reduced-footer-links {
padding-bottom: 97px;
}
[purpose='page-header'] {
padding: 19px 24px;
[purpose='mobile-nav'] {
[purpose='mobile-nav-header'] {
padding: 19px 24px;
}
[purpose='mobile-nav-container'] {
padding: 8px 24px 0px 24px;
}
}
}
[purpose='reduced-nav-footer'] {
height: 97px;
}
Expand Down Expand Up @@ -490,14 +526,17 @@ body.detected-mobile {
}
}

@media (max-width: 393px) {
.homepage-cta-banner + .homepage-header-top {
top: 112px;
}
}
@media (max-width: 330px) {
.homepage-cta-banner + .homepage-header-top {
top: 132px;
@media (max-width: 375px) {
[purpose='page-header'] {
padding: 19px 16px;
[purpose='mobile-nav'] {
[purpose='mobile-nav-header'] {
padding: 19px 16px;
}
[purpose='mobile-nav-container'] {
padding: 8px 16px 0px 16px;
}
}
}
}

Expand Down
Loading

0 comments on commit 1226af3

Please sign in to comment.