assets/sass/layout/_header.scss

   1 ///
   2 /// Forty by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Header */
   8
   9         @include keyframes('reveal-header') {
  10                 0% { top: -4em; opacity: 0; }
  11                 100% { top: 0; opacity: 1; }
  12         }
  13
  14         #header {
  15                 @include vendor('display', 'flex');
  16                 background-color: _palette(bg-alt);
  17                 box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);
  18                 cursor: default;
  19                 font-weight: _font(weight-bold);
  20                 height: 3.25em;
  21                 left: 0;
  22                 letter-spacing: _font(letter-spacing-alt);
  23                 line-height: 3.25em;
  24                 margin: 0;
  25                 position: fixed;
  26                 text-transform: uppercase;
  27                 top: 0;
  28                 width: 100%;
  29                 z-index: _misc(z-index-base);
  30
  31                 .logo {
  32                         border: 0;
  33                         display: inline-block;
  34                         font-size: 0.8em;
  35                         height: inherit;
  36                         line-height: inherit;
  37                         padding: 0 1.5em;
  38
  39                         strong {
  40                                 @include vendor('transition', (
  41                                         'background-color #{_duration(transition)} ease-in-out',
  42                                         'color #{_duration(transition)} ease-in-out'
  43                                 ));
  44                                 background-color: _palette(fg-bold);
  45                                 color: _palette(bg);
  46                                 display: inline-block;
  47                                 line-height: 1.65em;
  48                                 margin-right: 0.325em;
  49                                 padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);
  50                         }
  51
  52                         &:hover {
  53                                 strong {
  54                                         background-color: _palette(highlight);
  55                                 }
  56                         }
  57
  58                         &:active {
  59                                 strong {
  60                                         background-color: desaturate(darken(_palette(highlight), 15), 5);
  61                                 }
  62                         }
  63                 }
  64
  65                 nav {
  66                         @include vendor('display', 'flex');
  67                         @include vendor('justify-content', 'flex-end');
  68                         @include vendor('flex-grow', '1');
  69                         height: inherit;
  70                         line-height: inherit;
  71
  72                         a {
  73                                 border: 0;
  74                                 display: block;
  75                                 font-size: 0.8em;
  76                                 height: inherit;
  77                                 line-height: inherit;
  78                                 padding: 0 0.75em;
  79                                 position: relative;
  80                                 vertical-align: middle;
  81
  82                                 &:last-child {
  83                                         padding-right: 1.5em;
  84                                 }
  85
  86                                 &[href="#menu"] {
  87                                         padding-right: 3.325em !important;
  88
  89                                         &:before, &:after {
  90                                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
  91                                                 background-position: center;
  92                                                 background-repeat: no-repeat;
  93                                                 background-size: 24px 32px;
  94                                                 content: '';
  95                                                 display: block;
  96                                                 height: 100%;
  97                                                 position: absolute;
  98                                                 right: 1.5em;
  99                                                 top: 0;
 100                                                 vertical-align: middle;
 101                                                 width: 24px;
 102                                         }
 103
 104                                         &:after {
 105                                                 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
 106                                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');
 107                                                 opacity: 0;
 108                                                 z-index: 1;
 109                                         }
 110
 111                                         &:hover, &:active {
 112                                                 &:after {
 113                                                         opacity: 1;
 114                                                 }
 115                                         }
 116
 117                                         &:last-child {
 118                                                 padding-right: 3.875em !important;
 119
 120                                                 &:before, &:after {
 121                                                         right: 2em;
 122                                                 }
 123                                         }
 124                                 }
 125                         }
 126                 }
 127
 128                 &.reveal {
 129                         @include vendor('animation', 'reveal-header 0.35s ease');
 130                 }
 131
 132                 &.alt {
 133                         @include vendor('transition', 'opacity #{_duration(banner)} ease');
 134                         @include vendor('transition-delay', '0.75s');
 135                         @include vendor('animation', 'none');
 136                         background-color: transparent;
 137                         box-shadow: none;
 138                         position: absolute;
 139
 140                         &.style1 { .logo { strong { color: _palette(accent1); } } }
 141                         &.style2 { .logo { strong { color: _palette(accent2); } } }
 142                         &.style3 { .logo { strong { color: _palette(accent3); } } }
 143                         &.style4 { .logo { strong { color: _palette(accent4); } } }
 144                         &.style5 { .logo { strong { color: _palette(accent5); } } }
 145                         &.style6 { .logo { strong { color: _palette(accent6); } } }
 146                 }
 147
 148                 body.is-preload & {
 149                         &.alt {
 150                                 opacity: 0;
 151                         }
 152                 }
 153
 154                 @include breakpoint('<=xlarge') {
 155                         nav {
 156                                 a {
 157                                         &[href="#menu"] {
 158                                                 padding-right: 3.75em !important;
 159
 160                                                 &:last-child {
 161                                                         padding-right: 4.25em !important;
 162                                                 }
 163                                         }
 164                                 }
 165                         }
 166                 }
 167
 168                 @include breakpoint('<=large') {
 169                         nav {
 170                                 a {
 171                                         &[href="#menu"] {
 172                                                 padding-right: 4em !important;
 173
 174                                                 &:last-child {
 175                                                         padding-right: 4.5em !important;
 176                                                 }
 177                                         }
 178                                 }
 179                         }
 180                 }
 181
 182                 @include breakpoint('<=small') {
 183                         height: 2.75em;
 184                         line-height: 2.75em;
 185
 186                         .logo {
 187                                 padding: 0 1em;
 188                         }
 189
 190                         nav {
 191                                 a {
 192                                         padding: 0 0.5em;
 193
 194                                         &:last-child {
 195                                                 padding-right: 1em;
 196                                         }
 197
 198                                         &[href="#menu"] {
 199                                                 padding-right: 3.25em !important;
 200
 201                                                 &:before, &:after {
 202                                                         right: 0.75em;
 203                                                 }
 204
 205                                                 &:last-child {
 206                                                         padding-right: 4em !important;
 207
 208                                                         &:before, &:after {
 209                                                                 right: 1.5em;
 210                                                         }
 211                                                 }
 212                                         }
 213                                 }
 214                         }
 215                 }
 216
 217                 @include breakpoint('<=xsmall') {
 218                         .logo {
 219                                 span {
 220                                         display: none;
 221                                 }
 222                         }
 223
 224                         nav {
 225                                 a {
 226                                         &[href="#menu"] {
 227                                                 overflow: hidden;
 228                                                 padding-right: 0 !important;
 229                                                 text-indent: 5em;
 230                                                 white-space: nowrap;
 231                                                 width: 5em;
 232
 233                                                 &:before, &:after {
 234                                                         right: 0;
 235                                                         width: inherit;
 236                                                 }
 237
 238                                                 &:last-child {
 239                                                         &:before, &:after {
 240                                                                 width: 4em;
 241                                                                 right: 0;
 242                                                         }
 243                                                 }
 244                                         }
 245                                 }
 246                         }
 247                 }
 248         }