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 }