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