.header {
background-color: $color-header-background!important; font-family: $font-sans; position: fixed; top: 0; z-index: 2; @media screen and (max-width: $media-breakpoint-sm-max) { height: $size-about-pane-mobile; padding: 15px; width: 100%; } @media screen and (min-width: $media-breakpoint-md-min) { height: 100%; padding: 1%; width: $size-about-pane; max-width: 285px; } a, a:active, a:hover, a:visited { text-decoration: none; } .site-avatar { padding: 0 25%; margin-bottom: 30px; @media screen and (max-width: $media-breakpoint-sm-max) { display: none; } z-index: 4; } .site-title { font-family: $font-site-title; font-size: $size-standard-font*2.5; color: $color-white; text-shadow: 0.15rem 0.15rem #000; z-index: 6; position: relative; } .site-subtitle { color: $color-lightblue; z-index: 8; position: relative; margin: 25px 0; text-transform: uppercase; font-size: 1.1em; text-align: center; } .site-nav { line-height: $size-standard-line-height * 1.2; ul { list-style-type: none; margin-left: 0; padding-top: 10%; padding-left: 10px; li { font-size: 1.3em; font-weight: 700; line-height: $size-standard-line-height; text-transform: lowercase; padding: 10px 0; a { color: $color-white; &:hover { text-decoration: none; color: $color-purple; transition: color $transition-time; } } &.current-page { background: $color-header-background-active; color: $color-orange; margin-left: -10px; padding-left: 10px; width: $size-about-pane - 35px; a, a:hover { color: $color-orange; } } } } } .social-links { bottom: 0; height: 80px; left: 0; position: absolute; width: 100%; z-index: 10; background-color: $color-social-icons-background; // If screen is resized too small, plop the footer in the bottom @media screen and (max-height: 600px) { //position: relative; //display: none; } ul { display: flex; justify-content: space-between; list-style-type: none; margin: 20px 10px; padding-left: 0; li { display: block; margin: 0; padding: 0; a { color: $color-social-icons-color; font-size: 2em; &:hover { color: $color-social-icons-hover; transition: color $transition-time; } } } // .social-links ul li } // .social-links ul } // .social-links .menu-toggle { margin-left: auto; z-index: 20; display: none; @media screen and (max-width: $media-breakpoint-sm-max) { display: inline-block; right: 10px; top: 15px; position: absolute; cursor: pointer; color: $color-lightgrey; font-size: 1.2em; } }
} // header
@media screen and (max-width: $media-breakpoint-sm-max) {
.site-subtitle { display: none; } .header .site-nav { flex: 1; padding-top: 10%; ul { padding-top: 10px!important; li.current-page { width: 100vw!important; } } } .main-navigation { background-color: $color-header-background!important; position: absolute; -webkit-transition: right .3s ease-in-out !important; transition: right .3s ease-in-out !important; right: -100%; width: 100%; display: flex; flex-direction: column; min-height: 100vh; top:0; } .social-links { position: relative!important; padding-top: 5px; } .menu--opened { .page-content { height: 100%; left: 0; top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100%; } .main-navigation, .site-nav, .social-links { right: 0; visibility: visible; } }
}