aee13d8243e0f3410766f6a06e03e05633567f79
[wolnelektury.git] / src / wolnelektury / static / scss / main / main_page.scss
1 .big-cite {
2     background-color: #444;
3     color: white;
4     padding: 0;
5     margin: 0;
6     background-size: cover;
7     background-position: 50% 50%;
8
9     background-image: url(/static/img/backdrop/book-drawer-315.jpg);
10
11     .cite-box, .cite-box-text, .cite-text {
12         box-sizing: border-box;
13         //@include size(padding, 46px 10px 48px 0);
14         padding:
15                 46/975*100vw
16                 40/975*100vw
17                 48/975*100vw
18                 0;
19
20         background: none;
21         color: white;
22
23         @media screen and (min-width: 62.5em) {
24                 padding: 46px 40px 48px 0;
25         }
26
27         .vip {
28             padding-left: 10%;
29             margin:
30                 2.5/975*100vw
31                 0
32                 5/975*100vw
33                 10/975*100vw;
34
35             font-size: 11/975 * 100vw;
36
37             @media screen and (min-width: 62.5em) {
38                 margin: 2.5px 0 5px 10px;
39                 font-size: 11px;
40             }
41         }
42
43         .cite-body {
44             margin: .5 /975 * 100vw;
45             font-size: (30 / 975) * 100vw;
46             line-height: 1.16em;
47
48             @media screen and (min-width: 62.5em) {
49                 font-size: 30px;
50                 margin: .5px;
51             }
52         }
53
54         .source {
55             margin: 16/975*100vw 2/975*100vw 16/975*100vw 0;
56             font-size: 12/975*100vw;
57             @media screen and (min-width: 62.5em) {
58                 margin: 16px 2px 16px 0;
59                 font-size: 12px;
60             }
61         }
62
63         /* Make cite body and source slide to the left. */
64         .cite-body, .source {
65                 padding-left: 21.9%;
66             margin-left: -38/975*100vw;
67
68             @media screen and (min-width: 62.5em) {
69                 @include size(margin-left, -38px);
70             }
71         }
72
73         /* Semi-transparent background. */
74         .cite-body span,
75         .vip span,
76         .source span {
77             color: white;
78             background-color: rgb(0, 0, 0);
79             background-color: rgba(0, 0, 0, 0.6);
80             /* For IE 5.5 - 7*/
81             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
82             /* For IE 8*/
83             -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
84         }
85     }
86
87
88     .cite-text {
89         .vip {
90                 float: left;
91                 padding-left: 0;
92                 margin-left: 16/975*100vw;
93                 text-align: right;
94                 width: 147/975*100vw;
95         }
96         .cite-body, .source {
97                 padding-left: 0;
98                 margin-left: 175/975*100vw;
99         }
100
101         @media screen and (min-width: 62.5em) {
102             .vip {
103                 @include size(margin-left, 16px);
104                 @include size(width, 147px);
105             }
106             .cite-body, .source {
107                 @include size(margin-left, 175px);
108             }
109
110         }
111     }
112
113
114     .cite-box-text {
115             padding-left: (975 / 2 + 45) /975 * 100vw;
116
117             @media screen and (min-width: 62.5em) {
118                     padding-left: 975px / 2 + 45px;
119             }
120     }
121
122     /* a long cite displays smaller */
123     .cite-text-small .cite-body {
124         //@include size(font-size, 16px);
125         font-size: (20/975) * 100vw;
126         @media screen and (min-width: 62.5em) {
127             @include size(font-size, 20px);
128         }
129     }
130
131     h2 {
132         margin: 0;
133         @include size(font-size, 11px);
134         color: #575c63;
135     }
136 }
137
138
139 #main-library {
140     .main-library-row {
141         position: relative;
142
143         .covers {
144             white-space: nowrap;
145             width: 90%;
146             overflow-x: hidden;
147             padding-bottom: 2px;
148
149         }
150         .note {
151             position: absolute;
152             right: 0;
153             top: 1px;
154             width: 139px;
155             height: 289px - 22px;
156         }
157     }
158 }
159
160
161 #main-last {
162     h1 {
163         @include size(height, 32px);
164         margin: 0;
165         @include size(padding-top, 19px);
166         @include size(padding-left, 10px);
167
168         @include size(font-size, 11px);
169         @include mono;
170         font-weight: normal;
171
172         @media screen and (min-width: 33em) {
173             @include size(padding-left, 19px);
174         }
175
176         a {
177             color: black;
178
179             &:after {
180                 content: " >";
181             }
182         }
183     }
184     .book-mini-box:nth-child(3) {
185         @media screen and (min-width: 30em) {
186             margin-right: 3em;
187         }
188         @media screen and (min-width: 33em) {
189             margin-right: 0;
190         }
191     }
192 }
193
194
195 .infopages-box {
196     margin: 0;
197     @include size(margin-top, 5px);
198     @include size(padding, 0 5px);
199     vertical-align: top;
200     color: #989898;
201
202     @media screen and (min-width: 20em) {
203         display: inline-block;
204         @include size(width, 206px);
205         @include size(padding-left, 17px);
206         @include size(padding-right, 17px);
207     }
208
209     h1 {
210         @include size(height, 28px);
211         margin: 0;
212         @include size(padding-top, 25px);
213         @include size(font-size, 11px);
214         color: #017e85;
215         font-weight: normal;
216         @include mono;
217     }
218
219     a {
220         color: black;
221     }
222
223     ol, ul {
224         @include size(font-size, 11px);
225         list-style: none;
226         padding: 0;
227         margin: 0;
228         line-height: 1.45em;
229
230         li {
231             @include size(margin-bottom, 8px);
232             @media screen and (min-width: 62.5em) {
233                 @include size(margin-bottom, 2.5px);
234             }
235         }
236     }
237
238     .social-links {
239         @include size(margin-top, 10px);
240
241         a {
242             @include size(margin-right, 6px);
243         }
244     }
245 }
246
247 .more {
248     display: block;
249     margin-top: .5em;
250 }
251
252
253 section {
254     margin-top: 2em;
255 }
256
257
258 .tag-box-section {
259     @media screen and (min-width: 768px) {
260         display: inline-block;
261         width: 48%;
262         margin-right: 2%;
263         vertical-align: top;
264
265         .tag-box {
266             display: block;
267             width: 100%;
268         }
269     }
270 }
271
272 #main-theme {
273     .white-box {
274         position: relative;
275
276         .cite-text, .cite-text-small {
277             display: none;
278
279             @media screen and (min-width: 768px) {
280                 display: block;
281                 position: absolute;
282                 right: 1em;
283                 top: 7em;
284                 background: #F7F7F7;
285                 width: 200px;
286                 padding-left: 20px;
287             }
288
289             @media screen and (min-width: 1024px) {
290                 width: 340px;
291                 padding-left: 80px;
292             }
293         }
294     }
295 }
296
297
298 .carousel {
299     position: relative;
300     width: 100%;
301     height: 315/975*100vw;
302     overflow: hidden;
303
304     @media screen and (min-width: 62.5em) {
305         width: 975px;
306         height: 315px;
307     }
308
309     .cycle-prev {
310         left: 0;
311         &::after {
312             content: "◀";
313         }
314     }
315     .cycle-next {
316         right: 0;
317         &::after {
318             content: "▶";
319         }
320     }
321
322     .cycle-prev, .cycle-next {
323         position: absolute;
324         top: 50/975 * 100vw;
325         bottom: 50/975 * 100vw;
326         width: 15%;
327         z-index: 1000;
328         background: black;
329         color: white;
330         opacity: 0;
331
332         @media screen and (min-width: 62.5em) {
333             top: 50px;
334             bottom: 50px;
335         }
336
337         &::after {
338             top: 50/975 * 100vw;
339             bottom: 50/975 * 100vw;
340             font-size: 100/975*100vw;
341             display: block;
342             line-height: (315-100)/975*100vw;
343             text-align: center;
344             cursor: pointer;
345
346             @media screen and (min-width: 62.5em) {
347                 font-size: 100px;
348                 line-height: 315px - 100px;
349                 top: 50px;
350                 bottom: 50px;
351             }
352         }
353         &:hover {
354             opacity: .33;
355         }
356     }
357 }
358
359
360 .cycle-pager {
361     text-align: center;
362     width: 100%;
363     z-index: 500;
364     position: absolute;
365     bottom: 0;
366     overflow: hidden;
367
368     span {
369         font-family: arial;
370         font-size: 64 /975*100vw;
371         width: 32 /975*100vw;
372         height: 32 /975*100vw;
373         display: inline-block;
374         color: #ddd;
375         cursor: pointer;
376
377         text-shadow: 0px 0px 5px rgba(0,0,0,0.75);
378
379         @media screen and (min-width: 62.5em) {
380             font-size: 64px;
381             width: 32px;
382             height: 32px;
383         }
384
385         &.cycle-pager-active {
386             color: #018189;
387         }
388     }
389
390     > * {
391         cursor: pointer;
392     }
393 }