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