#10: link do dziaƂu literatura
[wolnelektury.git] / 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 }