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

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