374 lines
6.0 KiB
CSS
374 lines
6.0 KiB
CSS
.navbar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
|
|
background-color: var(--primary-background);
|
|
}
|
|
|
|
.navContent {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: none;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
max-width: calc(1440rem / 16);
|
|
height: auto;
|
|
padding: calc(28rem / 16) calc(136rem / 16);
|
|
}
|
|
|
|
.logo,
|
|
.logoMobile {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo:hover,
|
|
.logoMobile:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logoMobile {
|
|
display: none;
|
|
}
|
|
|
|
.logo img {
|
|
width: calc(96rem / 16);
|
|
}
|
|
|
|
.hamburger {
|
|
display: none;
|
|
}
|
|
|
|
.navMenu {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: none;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
width: calc(512rem / 16);
|
|
}
|
|
|
|
.navMenu li {
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.navMenu a {
|
|
color: var(--primary-heading);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navMenu a.currentPage {
|
|
color: var(--primary-accent);
|
|
}
|
|
|
|
.navMenu > li > a:hover {
|
|
color: var(--primary-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Prevents the menu items from shifting when made bold on hover */
|
|
.navMenu > li > a::before {
|
|
display: block;
|
|
content: attr(title);
|
|
font-weight: 600;
|
|
height: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.navMenu > li > a {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.itemWrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.dropdownIcon {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown {
|
|
visibility: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
|
|
margin: 0;
|
|
margin-top: calc(48rem / 16);
|
|
padding: 0;
|
|
|
|
border-radius: calc(8rem / 16);
|
|
background-color: var(--primary-background);
|
|
box-shadow: 0 calc(8rem / 16) 1rem var(--primary-accent-light);
|
|
|
|
font-size: calc(14rem / 16);
|
|
}
|
|
|
|
.dropdown li {
|
|
width: 100%;
|
|
}
|
|
|
|
.dropdown li a {
|
|
padding: calc(8rem / 16);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dropdown li:hover a,
|
|
.dropdown li a:focus {
|
|
background-color: var(--primary-accent-light);
|
|
}
|
|
|
|
.dropdown li:first-child a {
|
|
padding-top: 1rem;
|
|
border-radius: calc(8rem / 16) calc(8rem / 16) 0 0;
|
|
}
|
|
|
|
.dropdown li:last-child a {
|
|
padding-bottom: 1rem;
|
|
border-radius: 0 0 calc(8rem / 16) calc(8rem / 16);
|
|
}
|
|
|
|
.navMenu li:hover .dropdown,
|
|
.navMenu li:focus-within .dropdown {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* On a smaller desktop screen, keep the same navbar layout but decrease the
|
|
* horizontal padding so it still fits
|
|
*/
|
|
@media only screen and (max-width: calc(960rem / 16)) {
|
|
.navContent {
|
|
padding: calc(28rem / 16) calc(64rem / 16);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: calc(768rem / 16)) {
|
|
.navContent {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-areas: ". logo hamburger";
|
|
column-gap: 0;
|
|
justify-items: end;
|
|
align-items: center;
|
|
|
|
padding: calc(20rem / 16);
|
|
}
|
|
|
|
.logo {
|
|
grid-area: logo;
|
|
justify-self: center;
|
|
}
|
|
|
|
.logoMobile {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
margin-bottom: calc(20rem / 16);
|
|
}
|
|
|
|
.logo img,
|
|
.logoMobile img {
|
|
width: calc(80rem / 16);
|
|
}
|
|
|
|
.logoMobile img {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.hamburger {
|
|
grid-area: hamburger;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: calc(12rem / 16);
|
|
width: calc(36rem / 16);
|
|
box-sizing: content-box;
|
|
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.hamburger:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navMobileBackground {
|
|
position: fixed;
|
|
visibility: hidden;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 20;
|
|
|
|
background-color: var(--navbar-page-overlay);
|
|
opacity: 0;
|
|
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.navMenuWrapper {
|
|
position: fixed;
|
|
|
|
width: calc(288rem / 16);
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
overflow: auto;
|
|
z-index: 30;
|
|
|
|
padding: calc(calc(64rem / 16) - 1rem);
|
|
padding-left: calc(calc(78rem / 16) - 1rem);
|
|
|
|
background-color: var(--secondary-background);
|
|
|
|
transform: translateX(100vw);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.navMenu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(4rem / 16);
|
|
|
|
width: auto;
|
|
|
|
font-size: calc(18rem / 16);
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
.navMenu > .itemWrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-areas:
|
|
"link button"
|
|
"dropdown dropdown";
|
|
column-gap: 0;
|
|
row-gap: 0;
|
|
justify-items: start;
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
.navMenu > .itemWrapper > a {
|
|
grid-area: link;
|
|
}
|
|
|
|
.dropdownIcon {
|
|
grid-area: button;
|
|
justify-self: end;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
padding: 1rem;
|
|
box-sizing: content-box;
|
|
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.dropdownIcon:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown {
|
|
grid-area: dropdown;
|
|
|
|
display: none;
|
|
visibility: visible;
|
|
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
|
|
position: static;
|
|
|
|
margin: 0;
|
|
margin-left: calc(18rem / 16);
|
|
margin-bottom: calc(18rem / 16);
|
|
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.dropdown > .itemWrapper {
|
|
align-items: start;
|
|
}
|
|
|
|
.dropdown li {
|
|
width: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown li a {
|
|
width: auto;
|
|
}
|
|
|
|
.dropdown li:hover a,
|
|
.dropdown li a:focus {
|
|
background: none;
|
|
}
|
|
|
|
.dropdown li:hover a {
|
|
color: default;
|
|
font-weight: default;
|
|
}
|
|
|
|
.dropdown li:first-child a {
|
|
padding-top: calc(8rem / 16);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.dropdown li:last-child a {
|
|
padding-bottom: calc(8rem / 16);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.show {
|
|
display: block;
|
|
}
|
|
|
|
.show.navMobileBackground {
|
|
visibility: visible;
|
|
opacity: 100%;
|
|
}
|
|
|
|
.show.navMobileBackground + .navMenuWrapper {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.rotate {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|