Fix displaying images.
[wolnelektury.git] / 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 }