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 }