$footer-height: 4.9ex;
html {
height: 100%;
} body {
position: relative; max-width: 64em; min-height: 100%; margin: 0 auto; padding: 0;
}
global-header {
padding: .01% 0 0; ul { margin: 0; padding: 0; } li { list-style-type: none; } a, .form-link-submit { color: inherit; text-decoration: none; }
}
@include breakpoint($mobile) {
#global-header { position: fixed; z-index: 10; width: 100%; color: $mobile-header-color; background: $mobile-header-background; h1 { margin: .5ex 0; padding: 0 .5em; font-size: 1.5em; } } .nav-toggle { cursor: pointer; position: absolute; top: .5ex; right: .25em; width: 40px; height: 34px; border-radius: 4px; &.open { background-color: $mobile-nav-hover-background; } } #global-nav { @include single-box-shadow(#fff, 0, 2px, 0); border: 2px solid $mobile-header-background; border-width: 0 2px 2px; ul { clear: both; color: $base-color; background: $base-background; } a, strong, .form-link-submit { display: block; padding: 1ex 1em; } a, .form-link-submit { border-top: 1px dotted $mobile-nav-link-border-color; &:hover { color: $global-nav-hover-color; } } ul:first-child li:first-child { a, .form-link-submit { border: 0; } } strong { font-weight: normal; color: $mobile-nav-current-color; background: $mobile-nav-current-background; } .form-link { display: block; } .form-link-submit { width: 100%; text-align: left; } } #global-content { padding: 5ex 1em $footer-height+1ex; }
}
@include breakpoint($desktop) {
#global-header { color: $global-header-color; h1 { padding: 0 .4em; } } #global-nav { @include clearfix; padding: .5ex 1em 0; border-bottom: 2px solid $global-nav-color; line-height: 2.18ex; color: $global-nav-color; li { display: inline-block; } a, strong, .form-link-submit { display: inline-block; margin-bottom: -2px; padding: .5ex 1.5em 1ex .5em; border-left: .5em solid $global-nav-color; vertical-align: middle; } a, .form-link-submit { &:hover { color: $global-nav-hover-color; border-color: $global-nav-hover-color; } } strong { font-weight: normal; border-color: $global-nav-current-color; color: $global-nav-current-color; } .form-link { vertical-align: middle; } .form-link-submit { height: 2.18ex; padding: .4ex 1.5em 1.1ex 1em; border-left: 1px dotted $global-nav-color; } .nav-account-welcome { border: 0; } } ul.nav-account { float: right; } ul.nav-sections { float: left; } #global-content { padding: 1ex 1em $footer-height+1ex; }
}
global-footer {
@include box-sizing(border-box); position: absolute; bottom: 0; width: 100%; height: $footer-height; padding: .01% 1em; border-top: 2px dotted $global-footer-background; color: $global-footer-color; .copyright { font-size: .8em; }
}