assets/main/sass/layout/_header.scss

   1 ///
   2 /// Editorial 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 vendor('display', 'flex');
  11                 border-bottom: solid 5px _palette(accent);
  12                 padding: 6em 0 1em 0;
  13                 position: relative;
  14
  15                 > * {
  16                         @include vendor('flex', '1');
  17                         margin-bottom: 0;
  18                 }
  19
  20                 .logo {
  21                         border-bottom: 0;
  22                         color: inherit;
  23                         font-family: _font(family-heading);
  24                         font-size: 1.125em;
  25                 }
  26
  27                 .icons {
  28                         text-align: right;
  29                 }
  30
  31                 @include breakpoint('<=xlarge') {
  32                         padding-top: 5em;
  33                 }
  34
  35                 @include breakpoint('<=small') {
  36                         padding-top: 6.5em;
  37
  38                         .logo {
  39                                 font-size: 1.25em;
  40                                 margin: 0;
  41                         }
  42
  43                         .icons {
  44                                 height: (6.25em / 1.25);
  45                                 line-height: (6.25em / 1.25);
  46                                 position: absolute;
  47                                 right: (-0.625em / 1.25);
  48                                 top: 0;
  49                         }
  50                 }
  51         }