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_light(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                 @media screen and (prefers-color-scheme: dark) {
  31                         background-color: _palette_dark(bg-alt);
  32                 }
  33
  34                 .logo {
  35                         border: 0;
  36                         display: inline-block;
  37                         font-size: 0.8em;
  38                         height: inherit;
  39                         line-height: inherit;
  40                         padding: 0 1.5em;
  41
  42                         strong {
  43                                 @include vendor('transition', (
  44                                         'background-color #{_duration(transition)} ease-in-out',
  45                                         'color #{_duration(transition)} ease-in-out'
  46                                 ));
  47                                 background-color: _palette_light(fg-bold);
  48                                 color: _palette_light(bg);
  49                                 display: inline-block;
  50                                 line-height: 1.65em;
  51                                 margin-right: 0.325em;
  52                                 padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);
  53                                 @media screen and (prefers-color-scheme: dark) {
  54                                         background-color: _palette_dark(fg-bold);
  55                                         color: _palette_dark(bg);
  56                                 }
  57                         }
  58
  59                         &:hover {
  60                                 strong {
  61                                         background-color: _palette_light(highlight);
  62                                         @media screen and (prefers-color-scheme: dark) {
  63                                                 background-color: _palette_dark(highlight);
  64                                         }
  65                                 }
  66                         }
  67
  68                         &:active {
  69                                 strong {
  70                                         background-color: desaturate(darken(_palette_light(highlight), 15), 5);
  71                                         @media screen and (prefers-color-scheme: dark) {
  72                                                 background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
  73                                         }
  74                                 }
  75                         }
  76                 }
  77
  78                 nav {
  79                         @include vendor('display', 'flex');
  80                         @include vendor('justify-content', 'flex-end');
  81                         @include vendor('flex-grow', '1');
  82                         height: inherit;
  83                         line-height: inherit;
  84
  85                         a {
  86                                 border: 0;
  87                                 display: block;
  88                                 font-size: 0.8em;
  89                                 height: inherit;
  90                                 line-height: inherit;
  91                                 padding: 0 0.75em;
  92                                 position: relative;
  93                                 vertical-align: middle;
  94
  95                                 &:last-child {
  96                                         padding-right: 1.5em;
  97                                 }
  98
  99                                 &[href="#menu"] {
 100                                         padding-right: 3.325em !important;
 101
 102                                         &:before, &:after {
 103                                                 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_light(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>');
 104                                                 background-position: center;
 105                                                 background-repeat: no-repeat;
 106                                                 background-size: 24px 32px;
 107                                                 content: '';
 108                                                 display: block;
 109                                                 height: 100%;
 110                                                 position: absolute;
 111                                                 right: 1.5em;
 112                                                 top: 0;
 113                                                 vertical-align: middle;
 114                                                 width: 24px;
 115                                                 @media screen and (prefers-color-scheme: dark) {
 116                                                         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_dark(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>');
 117                                                 }
 118                                         }
 119
 120                                         &:after {
 121                                                 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
 122                                                 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_light(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>');
 123                                                 opacity: 0;
 124                                                 z-index: 1;
 125                                                 @media screen and (prefers-color-scheme: dark) {
 126                                                         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_dark(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>');
 127                                                 }
 128                                         }
 129
 130                                         &:hover, &:active {
 131                                                 &:after {
 132                                                         opacity: 1;
 133                                                 }
 134                                         }
 135
 136                                         &:last-child {
 137                                                 padding-right: 3.875em !important;
 138
 139                                                 &:before, &:after {
 140                                                         right: 2em;
 141                                                 }
 142                                         }
 143                                 }
 144                         }
 145                 }
 146
 147                 &.reveal {
 148                         @include vendor('animation', 'reveal-header 0.35s ease');
 149                 }
 150
 151                 &.alt {
 152                         @include vendor('transition', 'opacity #{_duration(banner)} ease');
 153                         @include vendor('transition-delay', '0.75s');
 154                         @include vendor('animation', 'none');
 155                         background-color: transparent;
 156                         box-shadow: none;
 157                         position: absolute;
 158
 159                         &.style1 { .logo { strong { color: _palette_light(accent1); } } }
 160                         &.style2 { .logo { strong { color: _palette_light(accent2); } } }
 161                         &.style3 { .logo { strong { color: _palette_light(accent3); } } }
 162                         &.style4 { .logo { strong { color: _palette_light(accent4); } } }
 163                         &.style5 { .logo { strong { color: _palette_light(accent5); } } }
 164                         &.style6 { .logo { strong { color: _palette_light(accent6); } } }
 165                         @media screen and (prefers-color-scheme: dark) {
 166                                 &.style1 { .logo { strong { color: _palette_dark(accent1); } } }
 167                                 &.style2 { .logo { strong { color: _palette_dark(accent2); } } }
 168                                 &.style3 { .logo { strong { color: _palette_dark(accent3); } } }
 169                                 &.style4 { .logo { strong { color: _palette_dark(accent4); } } }
 170                                 &.style5 { .logo { strong { color: _palette_dark(accent5); } } }
 171                                 &.style6 { .logo { strong { color: _palette_dark(accent6); } } }
 172                         }
 173                 }
 174
 175                 body.is-preload & {
 176                         &.alt {
 177                                 opacity: 0;
 178                         }
 179                 }
 180
 181                 @include breakpoint('<=xlarge') {
 182                         nav {
 183                                 a {
 184                                         &[href="#menu"] {
 185                                                 padding-right: 3.75em !important;
 186
 187                                                 &:last-child {
 188                                                         padding-right: 4.25em !important;
 189                                                 }
 190                                         }
 191                                 }
 192                         }
 193                 }
 194
 195                 @include breakpoint('<=large') {
 196                         nav {
 197                                 a {
 198                                         &[href="#menu"] {
 199                                                 padding-right: 4em !important;
 200
 201                                                 &:last-child {
 202                                                         padding-right: 4.5em !important;
 203                                                 }
 204                                         }
 205                                 }
 206                         }
 207                 }
 208
 209                 @include breakpoint('<=small') {
 210                         height: 2.75em;
 211                         line-height: 2.75em;
 212
 213                         .logo {
 214                                 padding: 0 1em;
 215                         }
 216
 217                         nav {
 218                                 a {
 219                                         padding: 0 0.5em;
 220
 221                                         &:last-child {
 222                                                 padding-right: 1em;
 223                                         }
 224
 225                                         &[href="#menu"] {
 226                                                 padding-right: 3.25em !important;
 227
 228                                                 &:before, &:after {
 229                                                         right: 0.75em;
 230                                                 }
 231
 232                                                 &:last-child {
 233                                                         padding-right: 4em !important;
 234
 235                                                         &:before, &:after {
 236                                                                 right: 1.5em;
 237                                                         }
 238                                                 }
 239                                         }
 240                                 }
 241                         }
 242                 }
 243
 244                 @include breakpoint('<=xsmall') {
 245                         .logo {
 246                                 span {
 247                                         display: none;
 248                                 }
 249                         }
 250
 251                         nav {
 252                                 a {
 253                                         &[href="#menu"] {
 254                                                 overflow: hidden;
 255                                                 padding-right: 0 !important;
 256                                                 text-indent: 5em;
 257                                                 white-space: nowrap;
 258                                                 width: 5em;
 259
 260                                                 &:before, &:after {
 261                                                         right: 0;
 262                                                         width: inherit;
 263                                                 }
 264
 265                                                 &:last-child {
 266                                                         &:before, &:after {
 267                                                                 width: 4em;
 268                                                                 right: 0;
 269                                                         }
 270                                                 }
 271                                         }
 272                                 }
 273                         }
 274                 }
 275         }