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

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