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   position: relative;
  12   h1 {
  13     color: #FFF;
  14     font-size: 2.666rem;
  15     font-weight: 300;
  16     @include smaller-than($s) {
  17       font-size: 2em;
  18     }
  19   }
  20   .spaced {
  21     margin-top: $-xxl;
  22     margin-bottom: $-l*2;
  23     h1, p {
  24       max-width: 420px;
  25     }
  26     @include smaller-than($screen-lg) {
  27       position: relative;
  28       margin-top: $-m;
  29       margin-bottom: $-m*2;
  30     }
  31   }
  32   .icon svg {
  33     fill: #FFF
  34   }
  35 }
  36
  37 #header.header {
  38   z-index: 5;
  39 }
  40
  41 #header .container {
  42   display: flex;
  43   justify-content: space-between;
  44   align-items: center;
  45 }
  46 #header .container > * {
  47   flex: 1;
  48 }
  49
  50 .header .docs-searchbar-js {
  51   text-align: center;
  52   margin-top: 4px;
  53 }
  54
  55 .logo {
  56   text-align: left;
  57   margin: $-m 0;
  58   div, img {
  59     vertical-align: top;
  60     display: inline-block;
  61     margin: 0;
  62   }
  63   div {
  64     color: #FFF;
  65     font-size: 1.8em;
  66     font-weight: 400;
  67     padding: 4px 0;
  68   }
  69   svg {
  70     margin-right: $-m;
  71     height: 43px;
  72     width: auto;
  73   }
  74
  75   @include smaller-than($s) {
  76     margin: $-s 0;
  77     div {
  78       font-size: 1.8em;
  79     }
  80     svg {
  81       height: 32px;
  82       margin-right: $-s;
  83     }
  84   }
  85
  86   a {
  87     display: inline-flex;
  88     align-items: center;
  89   }
  90   a:hover {
  91     text-decoration: none;
  92   }
  93 }
  94
  95
  96 /** Header Menu **/
  97 @media screen and (min-width: $l) {
  98   .main-nav {
  99     display: flex;
 100     justify-content: flex-end;
 101     gap: 1rem;
 102   }
 103   .nav-dropdown-wrap {
 104     position: relative;
 105   }
 106   .nav-dropdown-trigger {
 107     color: #FFF;
 108     display: block;
 109     padding: 1rem;
 110     font-size: 1.1rem;
 111     font-weight: 500;
 112   }
 113   .nav-dropdown-trigger:hover {
 114     color: #FFF;
 115   }
 116
 117   .nav-dropdown-trigger:focus + .nav-dropdown-menu,
 118   .nav-dropdown-trigger:hover + .nav-dropdown-menu,
 119   .nav-dropdown-menu:focus-within,
 120   .nav-dropdown-menu:hover
 121   {
 122     display: block;
 123   }
 124   .nav-dropdown-menu {
 125     display: none;
 126     background-color: #FFF;
 127     border-radius: 4px;
 128     position: absolute;
 129     z-index: 51;
 130     box-shadow: $bs-med,
 131     0 0 120px 0 rgba(0, 0, 0, 0.1);
 132     padding: .5rem;
 133     width: 240px;
 134     right: 0;
 135     top: 96%;
 136   }
 137   .nav-dropdown-menu:after {
 138     content: '';
 139     display: block;
 140     background-color: #FFF;
 141     position: absolute;
 142     top: -7px;
 143     z-index: 2;
 144     right: 2.5rem;
 145     border-radius: 3px;
 146     width: 16px;
 147     height: 16px;
 148     transform: rotate(45deg);
 149   }
 150   .nav-dropdown-item {
 151     color: #222;
 152     padding: .5rem;
 153     display: flex;
 154     gap: 1rem;
 155     border-radius: 4px;
 156     z-index: 3;
 157     position: relative;
 158   }
 159   .nav-dropdown-item:hover {
 160     background-color: rgba($primary, 0.1);
 161     text-decoration: none;
 162   }
 163   .nav-dropdown-item-icon {
 164     padding-top: .2rem;
 165   }
 166   .nav-dropdown-item-icon svg {
 167     width: 32px;
 168     height: 32px;
 169     padding: 6px;
 170     border-radius: 50%;
 171     background-color: rgba($primary, 0.1);
 172     fill: $primary;
 173   }
 174   .nav-dropdown-item-title {
 175     font-weight: 700;
 176   }
 177   .nav-dropdown-item p {
 178     margin: 0;
 179     opacity: .8;
 180     font-size: .8rem;
 181   }
 182   header #menu-button {
 183     display: none;
 184   }
 185 }
 186
 187 @media screen and (max-width: $l) {
 188   header #menu-button {
 189     display: inline-block;
 190     background-color: transparent;
 191     border: 0;
 192     box-shadow: none;
 193     padding: $-m;
 194     line-height: 0;
 195   }
 196   header #menu-button svg {
 197     margin-right: 0;
 198   }
 199   .header .logo {
 200     display: flex;
 201     justify-content: space-between;
 202   }
 203   .header-search-section {
 204     display: none;
 205   }
 206   #header > .container {
 207     display: block;
 208   }
 209   #header .main-nav {
 210     display: none;
 211     margin-top: -1rem;
 212   }
 213   #header .main-nav.showing {
 214     display: block;
 215   }
 216   .nav-dropdown-trigger {
 217     color: #FFF;
 218     pointer-events: none;
 219     font-weight: bold;
 220     margin-bottom: .2rem;
 221     margin-top: .5rem;
 222     display: block;
 223   }
 224   .nav-dropdown-menu {
 225     display: flex;
 226     overflow-x: scroll;
 227     gap: 1rem;
 228     padding-bottom: .5rem;
 229   }
 230   .nav-dropdown-item {
 231     color: #FFF;
 232     border: 1px solid #FFF;
 233     border-radius: 4px;
 234     display: block;
 235     padding: 1rem;
 236     display: flex;
 237     min-width: 200px;
 238   }
 239   .nav-dropdown-item:hover {
 240     text-decoration: none;
 241     color: #FFF;
 242     background-color: rgba(255 255 255 / 10%);
 243   }
 244   .nav-dropdown-item-icon svg {
 245     display: none;
 246   }
 247   .nav-dropdown-item-title {
 248     font-weight: bold;
 249   }
 250   .nav-dropdown-item p {
 251     font-size: .8em;
 252     margin-bottom: 0;
 253   }
 254 }
 255
 256
 257
 258 /** Hero Content **/
 259 .header .hero p {
 260   font-size: 1.2rem;
 261 }
 262
 263 /** Footer lists **/
 264 ul.nav-list {
 265   list-style: none;
 266   padding-left: 0;
 267   margin-left: 0;
 268   li {
 269     display: block;
 270     padding: .5rem 0;
 271   }
 272 }