BookStack Code Mirror - website/blob - resources/sass/_header.scss

   1 /**
   2  * Includes the main navigation header and the faded toolbar.
   3  */
   4
   5 header {
   6   display: block;
   7   z-index: 2;
   8   top: 0;
   9   background-color: $primary-dark;
  10   color: #fff;
  11   h2 {
  12     color: #FFF;
  13     font-size: 2.666em;
  14     font-weight: 300;
  15     @include smaller-than($s) {
  16       font-size: 2em;
  17     }
  18   }
  19   .spaced {
  20     margin-top: $-xxl;
  21     margin-bottom: $-xxl*2;
  22     h2, p {
  23       max-width: 420px;
  24     }
  25     @include smaller-than($screen-lg) {
  26       position: relative;
  27       margin-top: $-m;
  28       margin-bottom: $-m*2;
  29     }
  30   }
  31   p {
  32     font-size: 1.2em;
  33     font-weight: 300;
  34   }
  35   .icon svg {
  36     fill: #FFF
  37   }
  38 }
  39
  40 .logo {
  41   text-align: left;
  42   margin: $-m 0;
  43   h1, img {
  44     vertical-align: top;
  45     display: inline-block;
  46     margin: 0;
  47   }
  48   h1 {
  49     color: #FFF;
  50     font-size: 1.8em;
  51     font-weight: 400;
  52     padding: 4px 0;
  53   }
  54   svg {
  55     margin-right: $-m;
  56     height: 43px;
  57     width: auto;
  58   }
  59   @include smaller-than($s) {
  60     h1 {
  61       font-size: 1.8em;
  62     }
  63     svg {
  64       height: 32px;
  65       margin-right: $-s;
  66     }
  67   }
  68   a {
  69     display: inline-block;
  70   }
  71   a:hover {
  72     text-decoration: none;
  73   }
  74 }