src/wolnelektury/static/scss/main/header.scss

   1 $header_bg: #191919;
   2 $small_logo: .9;
   3
   4 #banners {
   5   display: inline-block;
   6   width: 100%;
   7
   8   > a {
   9     display: block;
  10     width: 100%;
  11   }
  12
  13   img {
  14     display: block;
  15     margin: 0 auto;
  16     width: 100%
  17   }
  18 }
  19
  20 header#main {
  21   @include size(line-height, 20px); /* Make links easier to click when wrapped. */
  22   background-color: $header_bg;
  23   color: #bbb;
  24   position: relative;
  25
  26   Xtext-align: center;
  27
  28   @media screen and (min-width: 1024px) {
  29     width: 975px;
  30     margin: auto;
  31
  32   }
  33
  34   a {
  35     color: #17CFDB;
  36   }
  37
  38   #logo {
  39     display: block;
  40     margin: auto;
  41
  42     @include size(width, 173px);
  43     @include size(height, 94px);
  44
  45     img {
  46       @include size(width, $small_logo * 173px);
  47       @include size(height, $small_logo * 94px);
  48       margin-top: (1 - $small_logo) * 94px / 2;
  49       margin-left: (1 - $small_logo) * 173px / 2;
  50
  51       @media screen and (min-width: 768px) {
  52         @include size(width, 173px);
  53         @include size(height, 94px);
  54         margin-top: 0;
  55         margin-left: 0;
  56       }
  57     }
  58
  59     @media screen and (min-width: 1024px) {
  60       margin-left: 0;
  61     }
  62   }
  63
  64   #tagline {
  65     display: none;
  66     position: absolute;
  67     @include size(top, 3px);
  68     @include size(left, 255px);
  69     @include size(font-size, 13px);
  70
  71     @media screen and (min-width: 1024px) {
  72       display: block;
  73     }
  74   }
  75
  76   #lang-menu {
  77     display: block;
  78     position: absolute;
  79     top: 0;
  80     right: 0;
  81
  82     @include mono;
  83
  84     #lang-button {
  85       display: block;
  86
  87       @include size(font-size, 10px);
  88       @include size(line-height, 17px);
  89       @include size(padding-left, 25px);
  90       @include size(padding-right, 20px);
  91       @include size(padding-top, 16px);
  92       @include size(padding-bottom, 16px);
  93
  94       .label {
  95         &:after {
  96           @include size(padding-left, 10px);
  97           content: url("/static/img/arrow-gray.png");
  98           vertical-align: top;
  99         }
 100       }
 101
 102       .lang-flag {
 103         @include size(font-size, 13px);
 104         @include size(line-height, 15px);
 105       }
 106     }
 107
 108     #lang-menu-items {
 109       z-index: 9999;
 110
 111       button {
 112         @include mono;
 113         display: none;
 114         background: #f7f7f7;
 115         color: #6f6f6f;
 116         cursor: pointer;
 117         width: 100%;
 118         margin: 0;
 119         @include size(padding, 10px 0);
 120
 121         @media screen and (min-width: 62.5em) {
 122           @include size(padding, 5px 0);
 123         }
 124
 125         border-width: 0;
 126         @include size(border-bottom, 1px solid #ddd);
 127
 128         @include size(font-size, 13px);
 129
 130         &.active {
 131           color: #000;
 132         }
 133       }
 134     }
 135
 136     &:hover, &.hover {
 137       #lang-menu-items {
 138         position: absolute;
 139         padding: 0;
 140         right: 0;
 141         width: 100%;
 142         button {
 143           display: block;
 144         }
 145       }
 146     }
 147
 148   }
 149
 150   #main-menu-toggle {
 151     position: absolute;
 152     left: 0;
 153     top: 0;
 154   }
 155
 156   X#user-info {
 157     margin-top: 0;
 158     @include size(margin-left, 5px);
 159     @include size(margin-right, 5px);
 160     padding-top: 0;
 161     @include mono;
 162     @include size(font-size, 10px);
 163     position: relative;
 164
 165     @media screen and (min-width: 24em) {
 166       @include size(padding-top, 15px);
 167       @include size(margin-left, 180px);
 168       text-align: right;
 169     }
 170     @media screen and (min-width: 62.5em) {
 171       position: absolute;
 172       top: 0;
 173       right: 0;
 174       @include size(margin-left, 0);
 175       @include size(margin-right, 0);
 176     }
 177
 178     /* We want submenu on far left on small screens. */
 179     .hidden-box-wrapper {
 180       position: static;
 181       @media screen and (min-width: 24em) {
 182         position: relative;
 183       }
 184     }
 185
 186     #user-menu {
 187       display: none;
 188
 189       text-align: left;
 190       line-height: 1.6em;
 191       left: 0;
 192       right: 0;
 193       top: 2em;
 194
 195       @media screen and (min-width: 15em) {
 196         right: auto;
 197         width: 15em;
 198       }
 199
 200       a {
 201         color: #0D7E85;
 202       }
 203     }
 204   }
 205
 206   form#search-area {
 207     position: relative;
 208     clear: both;
 209     @include size(height, 45px);
 210     background: #444444;
 211     color: white;
 212
 213     @media screen and (min-width: 1024px) {
 214       position: absolute;
 215       @include size(top, 49px);
 216       @include size(left, 240px);
 217       @include size(right, 0);
 218     }
 219
 220     #search-field {
 221       position: absolute;
 222       @include size(top, 5px);
 223       @include size(left, 5px);
 224       @include size(right, 113px);
 225
 226       label {
 227         @include hidden-label;
 228       }
 229       input#search {
 230         z-index: 200;
 231         position: relative;
 232         @include size(height, 33px);
 233         width: 100%;
 234         padding: 0;
 235         @include size(padding-left, 13px);
 236         @include size(line-height, 32.5px);
 237
 238         border: none;
 239         @include size(border-radius, 5px);
 240         @include box-shadow(0 0 6.5px #444444 inset);
 241
 242         font-family: Georgia;
 243         @include size(font-size, 13px);
 244         background-color: white;
 245         color: black;
 246
 247         /* styling search placeholder */
 248         &::placeholder {
 249           font-family: Georgia;
 250           font-style: italic;
 251           color: #767676;
 252         }
 253         &::-webkit-input-placeholder {
 254           font-family: Georgia;
 255           font-style: italic;
 256           color: #767676;
 257         }
 258         &::-moz-placeholder {
 259           font-family: Georgia;
 260           font-style: italic;
 261           color: #767676;
 262         }
 263       }
 264     }
 265     button {
 266       display: inline-block;
 267       position: absolute;
 268       top: 0;
 269       right: 0;
 270       @include size(height, 45px);
 271       @include size(width, 94px);
 272       margin: 0;
 273       padding: 0;
 274
 275       border: none;
 276
 277       @include mono;
 278       @include size(font-size, 11px);
 279       background: #018189;
 280       color: white;
 281     }
 282   }
 283 }
 284
 285 @media screen and (min-width: 1024px) {
 286   #whole-header {
 287     height: 94px + 49px;
 288   }
 289
 290   #header-wrapper {
 291     position: relative;
 292
 293     /* Upper-half both sides dark background */
 294     &:before {
 295       content: " ";
 296       display: block;
 297       z-index: -1;
 298       position: absolute;
 299       top: 0;
 300       @include size(bottom, 45px);
 301       left: 0;
 302       width: 100%;
 303       background-color: $header_bg;
 304     }
 305
 306     /* Left-side dark background */
 307     &:after {
 308       content: " ";
 309       display: block;
 310       z-index: -1;
 311       position: absolute;
 312       top: 0;
 313       bottom: 0;
 314       left: 0;
 315       width: 50%;
 316       background-color: $header_bg;
 317     }
 318   }
 319 }