160 lines
3.0 KiB
SCSS
160 lines
3.0 KiB
SCSS
////////////////////
|
|
// Variables
|
|
////////////////////
|
|
|
|
$nav-height-sm: rem-calc(60px);
|
|
$nav-height-lg: rem-calc(80px);
|
|
$nav-zindex: 10;
|
|
|
|
////////////////////
|
|
// Navigation
|
|
////////////////////
|
|
|
|
.nav {
|
|
position: relative;
|
|
width: 100%;
|
|
background-color: $white;
|
|
border-bottom: 1px solid $slate-300;
|
|
z-index: $nav-zindex;
|
|
}
|
|
|
|
.nav__container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: $nav-height-sm;
|
|
background-color: $white;
|
|
|
|
@media (min-width: $bp-md) {
|
|
height: $nav-height-lg;
|
|
}
|
|
}
|
|
|
|
.nav .logo {
|
|
@media(max-width: $bp-md - 1px) {
|
|
max-width: rem-calc(105px);
|
|
}
|
|
}
|
|
|
|
.nav__menu-trigger {
|
|
@extend .btn-reset;
|
|
width: $nav-height-sm;
|
|
height: $nav-height-sm;
|
|
margin-right: -$cp-sm;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
outline: none;
|
|
}
|
|
|
|
// Prevent background page from scrolling when menu is active
|
|
.menu-active {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-list {
|
|
@media (max-width: $bp-md - 1px) {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: $nav-height-sm $cp-sm rem-calc(20px);
|
|
background-color: $teal;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition-duration: 0.2s;
|
|
transition-property: opacity, visibility, transform;
|
|
transition-timing-function: ease-in-out;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
// Show nav list when .menu-active class is toggled
|
|
.menu-active .nav-list{
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.nav-list__item {
|
|
display: inline;
|
|
border-bottom: 1px solid $teal-dark;
|
|
|
|
@media (min-width: $bp-md) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
|
|
@media (min-width: $bp-md) {
|
|
margin-left: rem-calc(20px);
|
|
}
|
|
|
|
@media (min-width: $bp-lg) {
|
|
margin-left: rem-calc(40px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-list__link {
|
|
display: block;
|
|
padding: rem-calc(20px 10px);
|
|
color: $white;
|
|
|
|
@media (min-width: $bp-md) {
|
|
display: inline;
|
|
padding: rem-calc(10px 0);
|
|
color: $slate-600;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.active {
|
|
color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mobile social media icons
|
|
.nav-social-list {
|
|
margin-top: auto;
|
|
margin-bottom: rem-calc(15px);
|
|
border-bottom: 1px solid $teal-dark;
|
|
}
|
|
|
|
.nav-social-list__item {
|
|
display: inline-block;
|
|
padding: rem-calc(20px 8px 20px 0);
|
|
}
|
|
|
|
// Mobile github links
|
|
.nav-github-link:not(:last-child) {
|
|
margin-right: rem-calc(12px);
|
|
padding-right: rem-calc(12px);
|
|
border-right: 1px solid $teal-dark;
|
|
}
|
|
|
|
////////////////////
|
|
// Skip Nav Link
|
|
////////////////////
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -$nav-height-lg;
|
|
padding: 1rem;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
color: $white;
|
|
text-decoration: none;
|
|
background: $teal-dark;
|
|
transition: top .2s ease-in-out;
|
|
z-index: $nav-zindex + 1;
|
|
|
|
&:focus {
|
|
top: 0;
|
|
}
|
|
}
|