BookStack Code Mirror - website/blob - themes/bookstack/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   .menu {
  39     padding-top: 8px;
  40   }
  41 }
  42
  43 .logo {
  44   text-align: left;
  45   margin: $-m 0;
  46   h1, img {
  47     vertical-align: top;
  48     display: inline-block;
  49     margin: 0;
  50   }
  51   h1 {
  52     color: #FFF;
  53     font-size: 1.8em;
  54     font-weight: 400;
  55     padding: 4px 0;
  56   }
  57   svg {
  58     margin-right: $-m;
  59     height: 43px;
  60     width: auto;
  61   }
  62   @include smaller-than($s) {
  63     h1 {
  64       font-size: 1.8em;
  65     }
  66     svg {
  67       height: 32px;
  68       margin-right: $-s;
  69     }
  70   }
  71   a {
  72     display: inline-block;
  73   }
  74   a:hover {
  75     text-decoration: none;
  76   }
  77 }