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 }