/// /// Future Imperfect by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) ///
/* Header */
body {
padding-top: 3.5em;
}
header {
@include vendor('display', 'flex'); @include vendor('justify-content', 'space-between'); background-color: _palette(bg); border-bottom: solid 1px _palette(border); height: 3.5em; left: 0; line-height: 3.5em; position: fixed; top: 0; width: 100%; z-index: _misc(z-index-base); a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding-left: 0; li { display: inline-block; padding-left: 0; } } h1 { height: inherit; line-height: inherit; padding: 0 0 0 1.5em; white-space: nowrap; a { font-size: 0.7em; } } .links { @include vendor('flex', '1'); border-left: solid 1px _palette(border); height: inherit; line-height: inherit; margin-left: 1.5em; overflow: hidden; padding-left: 1.5em; ul { li { border-left: solid 1px _palette(border); line-height: 1; margin-left: 1em; padding-left: 1em; &:first-child { border-left: 0; margin-left: 0; padding-left: 0; } a { border-bottom: 0; font-family: _font(family-heading); font-size: 0.7em; font-weight: _font(weight-heading); letter-spacing: _font(kerning-heading); text-transform: uppercase; } } } } .main { height: inherit; line-height: inherit; text-align: right; ul { height: inherit; line-height: inherit; li { border-left: solid 1px _palette(border); height: inherit; line-height: inherit; white-space: nowrap; >* { display: block; float: left; } >a { @include icon(false, solid); border-bottom: 0; color: _palette(fg-light); overflow: hidden; position: relative; text-indent: 4em; width: 4em; &:before { display: block; height: inherit; left: 0; line-height: inherit; position: absolute; text-align: center; text-indent: 0; top: 0; width: inherit; } } } } } form { margin: 0; input { display: inline-block; height: 2.5em; position: relative; top: -2px; vertical-align: middle; } } #search { @include vendor('transition', 'all 0.5s ease'); max-width: 0; opacity: 0; overflow: hidden; padding: 0; white-space: nowrap; input { width: 12em; } &.visible { max-width: 12.5em; opacity: 1; padding: 0 0.5em 0 0; } } @include breakpoint('<=medium') { .links { display: none; } } @include breakpoint('<=small') { height: 2.75em; line-height: 2.75em; h1 { padding: 0 0 0 1em; } .main { .search { display: none; } } }
}