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