assets/main/sass/layout/_header.scss

   1 ///
   2 /// Massively 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         #header {
  10                 @include color-typography(invert);
  11                 @include vendor('align-items', 'center');
  12                 @include vendor('display', 'flex');
  13                 @include vendor('flex-direction', 'column');
  14                 @include vendor('justify-content', 'flex-end');
  15                 @include vendor('pointer-events', 'none');
  16                 @include vendor('user-select', 'none');
  17                 height: 20rem;
  18                 padding-bottom: (_size(padding) * 4);
  19                 position: relative;
  20                 text-align: center;
  21                 z-index: 2;
  22
  23                 .logo {
  24                         @include vendor('transition', (
  25                                 'border-color #{_duration(transition)} ease-in-out',
  26                                 'color #{_duration(transition)} ease-in-out',
  27                                 'opacity 0.5s ease',
  28                                 'transform 0.5s ease',
  29                                 'visibility 0.5s'
  30                         ));
  31                         @include vendor('pointer-events', 'auto');
  32                         border-style: solid;
  33                         border-color: _palette(invert, border);
  34                         border-width: 5px !important;
  35                         font-family: _font(family-heading);
  36                         font-size: 2.25rem;
  37                         font-weight: _font(weight-heading);
  38                         letter-spacing: 0.075em;
  39                         line-height: 1;
  40                         padding: 1rem 1.75rem;
  41                         text-transform: uppercase;
  42                         visibility: visible;
  43
  44                         &:hover {
  45                                 border-color: _palette(invert, accent) !important;
  46                                 color: _palette(invert, accent) !important;
  47                         }
  48                 }
  49
  50                 @include breakpoint('<=medium') {
  51                         height: 14rem;
  52                         padding-bottom: (_size(padding) * 2);
  53                 }
  54
  55                 @include breakpoint('<=small') {
  56                         padding-bottom: (_size(padding) * 1.5);
  57
  58                         .logo {
  59                                 font-size: 1.75rem;
  60                                 border-width: 3px !important;
  61                         }
  62                 }
  63         }