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

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