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