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