remove the banner
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _text.scss
1 #global-progress {
2     position: sticky;
3     top: 0;
4     background: white;
5     z-index: 1;
6     border-bottom: 1px solid #F2F2F2;
7
8     .progress-text {
9         line-height: 24px;
10         padding: 4px;
11         color: #083F4D;
12         font-size: 16px;
13         .progress-text-value {
14             font-weight: 600;
15         }
16     }
17     
18     .bar {
19         display: flex;
20         height: 18px;
21         gap: 4px;
22         padding: 4px;
23         
24         .piece {
25             position: relative;
26             background: #F2F2F2;
27             overflow: hidden;
28             border-radius: 2px;
29
30             .filled {
31                 position: absolute;
32                 left: 0;
33                 top: 0;
34                 bottom: 0;
35                 background: #92BD39;
36             }
37         }
38     }
39 }
40
41 .l-text_toolbar {
42     display: flex;
43     gap: 16px;
44     margin-right: -7px;
45     position: relative;
46     a {
47         img {
48             display: block;
49         }
50     }
51
52     .box {
53         z-index: 5;
54     }
55 }
56
57 #main-text {
58     position: relative;
59     margin-bottom: 30px;
60     .text_next-book {
61         position: absolute;
62         right: 0;
63         top: 0;
64     }
65     .text_prev-book {
66         position: absolute;
67         left: 0;
68         top: 0;
69     }
70     #book-text {
71         padding: 5px;
72         @include rwd($break-wide) {
73             width: 717px;
74             padding: 0;
75         }
76         margin: 0 auto;
77
78         color: #333333;
79
80         font-family: "Source Serif Pro";
81         font-size: 18px;
82         line-height: 28px;
83     }
84 }
85
86
87 #toc {
88     display: none;
89
90     
91 }
92
93 #heretoc {
94     margin-top: .5em;
95
96     // Workaround for missing li's.
97     ol a {
98         line-height: 30px;
99     }
100 }
101
102 #menu .box {
103     display: none;
104     position: absolute;
105     right: 0px;
106     top: 50px;
107     width: 80vw;
108     max-width: 600px;
109     height: 300px;
110     padding: 30px; 
111     overflow: auto;
112     background: #FFE79E;
113     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
114     border-radius: 10px;
115 }
116 #menu #wltoc {
117     right: 0px;
118     width: 50vw;
119     height: 300px;
120 }
121 #menu #settings {
122     width: 200px;
123     height: 200px;
124 }
125 #themes {
126     display: none;
127 }
128 #other-text {
129     display: none;
130 }
131 #reference-box {
132     display: none;
133     width: 300px;
134     position: fixed;
135     top: 0;
136     right: 0;
137     z-index:100;
138     background: #eee;
139  
140     img {
141         margin: 0;
142     }
143     
144     #reference-map {
145         height:400px;
146         width: 300px;
147         @media screen and (max-height: 800px) {
148             height: 300px;
149         }
150     }
151     #reference-images {
152         padding: 10px;
153         white-space: nowrap;
154         overflow-x: auto;
155         a {
156             display: inline-block;
157             vertical-align: middle;
158             margin: 0 10px 0 0;
159             img {
160                 width: auto;
161                 border: 5px solid white;
162                 box-shadow: 4px 4px 4px #666;
163                 max-width: 240px;
164                 max-height: 200px;
165             }
166         }
167     }
168     #reference-link {
169         display: block;
170         font-size: 1.5em;
171         padding: 10px;
172     }
173  
174     #reference-close {
175         font-size: 30px;
176         position: absolute;
177         top: 10px;
178         right: 10px;
179         z-index: 1000;
180         font-family: sans-serif;
181         color: black;
182     }
183 }
184
185
186
187
188 #menu #info {
189     padding-top: 0;
190     display: none;
191     position: absolute;
192     right: 0px;
193     top: 50px;
194     width: 80vw;
195     height: 300px;
196     padding: 0px 30px 30px; 
197     overflow: auto;
198     box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2);
199     border-radius: 10px;
200     
201 }
202 #annoy-stubs {
203     display: none;
204 }
205 #nota_red {
206     display: none;
207 }
208
209
210 .l-text_header {
211     margin-top: 50px;
212     display: flex;
213     gap: 60px;
214
215     .l-text_header_cover {
216         width: 167px;
217         height: 236px;
218         
219     }
220     .l-text_header__content {
221         flex-grow: 1;
222     }
223
224     .l-text_header_author {
225         margin: 0;
226         font-weight: 600;
227         font-size: 21.5px;
228         line-height: 1.4;
229         a {
230             color: #007880;
231         }
232     }
233     .l-text_header_title {
234         margin: 0;
235         font-weight: 700;
236         font-size: 37px;
237         line-height: 1.3;
238         a {
239             color: #083F4D;
240         }
241     }
242     
243 }
244     
245
246 #main-text #book-text {
247     body {
248     font-size: 16px;
249     font-family: Gelasio, Georgia, "Times New Roman", serif;
250     line-height: 1.5em;
251     margin: 0;
252 }
253
254 a {
255     color: blue;
256     text-decoration: none;
257 }
258
259 img {
260     max-width: 37.5rem;
261     margin-top: 1em;
262     width: 100%;
263 }
264 .animacja {
265     margin-top: 1em;
266 }
267 .animacja img {
268     margin-top: 0;
269 }
270
271 /* ================================== */
272 /* = Header with logo and menu      = */
273 /* ================================== */
274
275
276 /* =================================================== */
277 /* = Common elements: headings, paragraphs and lines = */
278 /* =================================================== */
279 h1 {
280     font-size: 3em;
281     margin: 1.5em 0;
282     text-align: center;
283     line-height: 1.5em;
284     font-weight: bold;
285 }
286
287 h2 {
288     font-size: 2em;
289     margin: 1.5em 0 0;
290     font-weight: bold;
291     line-height: 1.5em;
292 }
293
294 h3, .subtitle2 {
295     font-size: 1.5em;
296     margin: 1.5em 0 0;
297     font-weight: normal;
298     line-height: 1.5em;
299 }
300
301 h4, .subtitle3 {
302     font-size: 1em;
303     margin: 1.5em 0 0;
304     line-height: 1.5em;
305 }
306
307 .subtitle4 {
308     font-weight: bold;
309 }
310
311 p {
312     margin: 0;
313 }
314
315 /* ======================== */
316 /* = Footnotes and themes = */
317 /* ======================== */
318
319 .annotation {
320     font-style: normal;
321     font-weight: normal;
322     font-size: .75em;
323     padding-left: 2px;
324     position: relative;
325     top: -4px;
326     user-select: none;
327     -webkit-user-select: none;
328     -moz-user-select: none;
329     -ms-user-select: none;
330 }
331
332 #footnotes {
333     margin-top: 3em;
334 }
335
336 #footnotes .annotation {
337     display: block;
338     float: left;
339     width: 2.5em;
340     clear: both;
341     user-select: auto;
342     -webkit-user-select: text;
343     -moz-user-select: text;
344     -ms-user-select: text;
345 }
346
347 #footnotes > div {
348     margin: 1.5em 0 0 0;
349 }
350
351 #footnotes p, #footnotes ul, #footnotes .stanza {
352     margin-left: 2.5em;
353     font-size: 0.875em;
354 }
355
356 #footnotes .permalink {
357     font-size: .75em;
358 }
359
360 blockquote {
361     font-size: 0.875em;
362 }
363
364 /* ============= */
365 /* = Numbering = */
366 /* ============= */
367 .verse, .paragraph {
368     position:relative;
369 }
370 /*.anchor {
371     position: absolute;
372     margin: -0.25em -0.5em;
373     color: #777;
374     font-size: 12px;
375     text-align: center;
376     padding: 0.25em 0.5em;
377     line-height: 1.5em;
378 }*/
379
380
381 /* =================== */
382 /* = Custom elements = */
383 /* =================== */
384 span.author {
385     font-size: 0.5em;
386     display: block;
387     line-height: 1.5em;
388     margin-bottom: 0.25em;
389 }
390
391 span.collection {
392     font-size: 0.375em;
393     display: block;
394     line-height: 1.5em;
395     margin-bottom: -0.25em;
396 }
397
398 span.subtitle {
399     font-size: 0.5em;
400     display: block;
401     line-height: 1.5em;
402     margin-top: -0.25em;
403 }
404
405 span.translator {
406     font-size: 0.375em;
407     display: block;
408     line-height: 1.5em;
409     margin-top: 0.25em;
410 }
411
412 div.didaskalia {
413     font-style: italic;
414     margin: 0.5em 0 0 1.5em;
415 }
416
417 div.kwestia {
418     margin: 0.5em 0 0;
419 }
420
421 div.stanza {
422     margin: 1.5em 0;
423 }
424
425 div.kwestia div.stanza {
426     margin: 0;
427 }
428
429 .verse-p {
430     padding-left: 1em;
431 }
432 .verse-indent {
433     padding-left: 1em;
434 }
435 .verse-right { text-align: right; }
436 .verse-center { text-align: center; }
437
438 .verse-indent.verse-indent-2 { padding-left: 2em; }
439 .verse-indent.verse-indent-3 { padding-left: 3em; }
440 .verse-indent.verse-indent-4 { padding-left: 4em; }
441 .verse-indent.verse-indent-5 { padding-left: 5em; }
442 .verse-indent.verse-indent-6 { padding-left: 6em; }
443 .verse-indent.verse-indent-7 { padding-left: 7em; }
444 .verse-indent.verse-indent-8 { padding-left: 8em; }
445 .verse-indent.verse-indent-9 { padding-left: 9em; }
446 .verse-indent.verse-indent-10 { padding-left: 10em; }
447 .verse-indent.verse-indent-11 { padding-left: 11em; }
448 .verse-indent.verse-indent-12 { padding-left: 12em; }
449 .verse-cont { padding-left: 12em; }
450
451 @media screen and (max-width: 40em) {
452     .verse-indent { padding-left: 4%; }
453     .verse-indent.verse-indent-2 { padding-left: 8%; }
454     .verse-indent.verse-indent-3 { padding-left: 12%; }
455     .verse-indent.verse-indent-4 { padding-left: 16%; }
456     .verse-indent.verse-indent-5 { padding-left: 20%; }
457     .verse-indent.verse-indent-6 { padding-left: 24%; }
458     .verse-indent.verse-indent-7 { padding-left: 28%; }
459     .verse-indent.verse-indent-8 { padding-left: 32%; }
460     .verse-indent.verse-indent-9 { padding-left: 36%; }
461     .verse-indent.verse-indent-10 { padding-left: 40%; }
462     .verse-indent.verse-indent-11 { padding-left: 44%; }
463     .verse-indent.verse-indent-12 { padding-left: 48%; }
464     .verse-cont { padding-left: 48%; }
465 }
466
467
468 p.paragraph {
469     text-align: justify;
470     margin: 0;
471     text-indent: 1.5em;
472 }
473
474 .motto {
475     text-align: justify;
476     font-style: italic;
477     margin: 1.5em 0 0;
478 }
479
480 p.motto_podpis {
481     font-size: 0.875em;
482     text-align: right;
483     margin-bottom: 1.5em;
484 }
485
486 div.fragment {
487     border-bottom: 0.1em solid #999;
488     padding-bottom: 1.5em;
489 }
490
491 div.note p, div.dedication p, div.note p.paragraph, div.dedication p.paragraph {
492     text-align: right;
493     font-style: italic;
494 }
495
496 div.frame {
497     border: 1px darkgray solid;
498     padding: 1em;
499     margin-top: 1em;
500     margin-bottom: 1em;
501 }
502
503 hr.spacer {
504     height: 3em;
505     visibility: hidden;
506 }
507
508 hr.spacer-line {
509     margin: 1.5em 0;
510     border: none;
511     border-bottom: 0.1em solid #000;
512 }
513
514 p.spacer-asterisk {
515     padding: 0;
516     margin: 1.5em 0;
517     text-align: center;
518 }
519
520 div.person-list ol {
521     list-style: none;
522     padding: 0 0 0 1.5em;
523 }
524
525 p.place-and-time {
526     font-style: italic;
527 }
528
529 em.math, em.foreign-word, em.book-title, em.didaskalia {
530     font-style: italic;
531 }
532
533 em.author-emphasis {
534     letter-spacing: 0.1em;
535 }
536
537 em.person {
538     font-style: normal;
539     font-variant: small-caps;
540 }
541
542 em.wieksze-odstepy {
543     font-style: normal;
544     word-spacing: 1em;
545 }
546
547 .verse:after {
548     content: "\feff";
549 }
550
551 table {
552     border-collapse: collapse;
553     width: 100%;
554 }
555
556 table.border td, table.border th {
557     border: 1px solid black;
558     vertical-align: top;
559 }
560
561
562 .anchor {
563     /* Show line numbers. */
564     float: left;
565     font-size: .8em;
566     margin-left: -40px;
567     width: 36px;
568     height: auto;
569     padding: 2px;
570     text-align: center;
571     color: #ccc;
572     user-select: none;
573     -webkit-user-select: none;
574     -moz-user-select: none;
575     -ms-user-select: none;
576
577 }
578
579
580
581 .theme-begin {
582     font-size: .9em;
583     position: relative;
584     float: right;
585     margin-bottom: 8px;
586     clear: both;
587     line-height: 1.5em;
588     text-align: left;
589     z-index: 60;
590
591     font-style: normal;
592     font-weight: normal;
593     font-variant: normal;
594     letter-spacing: 0;
595     text-transform: none;
596     text-decoration: none;
597     user-select: none;
598     -webkit-user-select: none;
599     -moz-user-select: none;
600     -ms-user-select: none;
601
602     margin-right: -227px;
603     width: 170px;
604     text-indent: 0;
605     color: inherit;
606     padding-left: 12px;
607     border-left: 1px solid #333;
608 }
609
610
611 a.reference.interesting:after {
612     content: url('../images/pin.svg');
613     padding: 3px;
614 }
615 }
616
617
618
619
620 #menu {
621 #wltoc ol, #themes ol, #objects ol {
622     list-style: none;
623     padding: 0;
624     margin: 0;
625 }
626 #wltoc ol {
627   padding-left: 1.5em;
628 }
629
630 #wltoc ol ol {
631     padding: 0 0 1.5em 1.5em;
632     margin: 0;
633 }
634
635 #wltoc ol ol li {
636     font-weight: normal;
637 }
638
639 #wltoc h2 {
640     display: none;
641 }
642
643 #wltoc .anchor {
644     float: none;
645     margin: 0;
646     font-size: 16px;
647     position: inherit;
648 }
649
650
651 #info .sponsors img {
652     margin-bottom: 1em;
653 }
654 }