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