1@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Ubuntu+Mono&display=swap"); 2 3:root { 4 /* Colours */ 5 --black: #2a2020; 6 --hard-black: #000; 7 --pink: #ffaff3; 8 --hot-pink: #d900b8; 9 --white: #fff; 10 --pink-white: #fff8fe; 11 --mid-grey: #dfe2e5; 12 --light-grey: #f5f5f5; 13 --boi-blue: #a6f0fc; 14 15 /* Derived colours */ 16 --text: var(--black); 17 --background: var(--white); 18 --accented-background: var(--pink-white); 19 --code-border: var(--pink); 20 --code-background: var(--light-grey); 21 --table-border: var(--mid-grey); 22 --table-background: var(--pink-white); 23 --links: var(--hot-pink); 24 --accent: var(--pink); 25 26 /* Sizes */ 27 --content-width: 680px; 28 --header-height: 60px; 29 --hash-offset: calc(var(--header-height) * 1.67); 30 --sidebar-width: 240px; 31 --gap: 24px; 32 --small-gap: calc(var(--gap) / 2); 33 --tiny-gap: calc(var(--small-gap) / 2); 34 --large-gap: calc(var(--gap) * 2); 35 --sidebar-toggle-size: 33px; 36 37 /* etc */ 38 --shadow: 39 0 0 0 1px rgba(50, 50, 93, .075), 40 0 0 1px #e9ecef, 41 0 2px 4px -2px rgba(138, 141, 151, .6); 42 --nav-shadow: 0 0 6px 2px rgba(0, 0, 0, .1); 43} 44 45* { 46 box-sizing: border-box; 47} 48 49body, 50html { 51 padding: 0; 52 margin: 0; 53 font-family: "Karla", sans-serif; 54 font-size: 17px; 55 line-height: 1.4; 56 position: relative; 57 min-height: 100vh; 58 word-break: break-word; 59} 60 61html { 62 /* This is necessary so hash targets appear below the fixed header */ 63 scroll-padding-top: var(--hash-offset); 64} 65 66a, 67a:visited { 68 color: var(--links); 69 text-decoration: none; 70} 71 72a:hover { 73 text-decoration: underline; 74} 75 76button, 77select { 78 background: transparent; 79 border: 0 none; 80 cursor: pointer; 81 font-family: inherit; 82 font-size: 100%; 83 line-height: 1.15; 84 margin: 0; 85 text-transform: none; 86} 87 88button::-moz-focus-inner { 89 border-style: none; 90 padding: 0; 91} 92 93button:-moz-focusring { 94 outline: 1px dotted ButtonText; 95} 96 97button { 98 -webkit-appearance: button; 99 line-height: 1; 100 margin: 0; 101 overflow: visible; 102 padding: 0; 103} 104 105button:active, 106select:active { 107 outline: 0 none; 108} 109 110li { 111 margin-bottom: 4px; 112} 113 114p { 115 margin: var(--small-gap) 0; 116} 117 118.rendered-markdown h1, 119.rendered-markdown h2, 120.rendered-markdown h3, 121.rendered-markdown h4, 122.rendered-markdown h5 { 123 font-size: 1.3rem; 124} 125 126/* Code */ 127 128pre, 129code { 130 font-family: "Ubuntu Mono", monospace; 131 line-height: 1.2; 132 background-color: var(--code-background); 133} 134 135pre { 136 margin: var(--gap) 0; 137 border-radius: 1px; 138 overflow: auto; 139 box-shadow: var(--shadow); 140} 141 142pre > code, 143code.hljs { 144 padding: var(--small-gap) var(--gap); 145 background: transparent; 146} 147 148p code { 149 margin: 0 2px; 150 border-radius: 3px; 151 padding: 0 0.2em; 152 color: var(--inline-code); 153} 154 155/* Page layout */ 156 157.page { 158 display: flex; 159} 160 161.content { 162 margin-left: var(--sidebar-width); 163 padding: calc(var(--header-height) + var(--gap)) var(--gap) 0 var(--gap); 164 width: calc(100% - var(--sidebar-width)); 165 max-width: var(--content-width); 166} 167 168/* Page header */ 169 170.page-header { 171 box-shadow: var(--nav-shadow); 172 height: var(--header-height); 173 color: black; 174 color: var(--hard-black); 175 background-color: var(--pink); 176 display: flex; 177 padding: var(--small-gap) var(--gap); 178 position: fixed; 179 left: 0; 180 right: 0; 181 top: 0; 182 z-index: 300; 183} 184 185.page-header h2 { 186 align-items: baseline; 187 display: flex; 188 margin: 0; 189 max-width: 100%; 190} 191 192.page-header a, 193.page-header a:visited { 194 color: black; 195 color: var(--hard-black); 196 overflow: hidden; 197 text-overflow: ellipsis; 198 white-space: nowrap; 199} 200 201.sidebar-toggle { 202 display: none; 203 font-size: var(--sidebar-toggle-size); 204 opacity: 0; 205 transition: opacity 1s ease; 206} 207 208.page-header .sidebar-toggle { 209 color: white; 210 color: var(--white); 211 margin: 0 var(--small-gap) 0 0; 212} 213 214/* Version selector */ 215 216#project-version { 217 --half-small-gap: calc(var(--small-gap) / 2); 218 --icon-size: .75em; 219 flex-shrink: 0; 220 font-size: .9rem; 221 font-weight: normal; 222 margin-left: var(--half-small-gap); 223} 224 225#project-version > span { 226 padding-left: var(--half-small-gap); 227} 228 229#project-version form { 230 align-items: center; 231 display: inline-flex; 232 justify-content: flex-end; 233} 234 235#project-version select { 236 appearance: none; 237 -webkit-appearance: none; 238 padding: .6rem calc(1.3 * var(--icon-size)) .6rem var(--half-small-gap); 239 position: relative; 240 z-index: 1; 241} 242 243#project-version option { 244 background-color: var(--code-background); 245} 246 247#project-version .icon { 248 font-size: var(--icon-size); 249 margin-left: calc(-1.65 * var(--icon-size)); 250} 251 252/* Module doc */ 253 254.module-name > a, 255.module-member-kind > a { 256 color: inherit; 257} 258 259.module-name > a:hover, 260.module-member-kind > a:hover { 261 text-decoration: none; 262} 263 264.module-name > .icon-gleam-chasse, 265.module-member-kind > .icon-gleam-chasse, 266.module-member-kind > .icon-gleam-chasse-2 { 267 color: var(--pink); 268 display: block; 269 font-size: 1rem; 270 margin: var(--small-gap) 0 0; 271} 272 273.module-name { 274 color: var(--hard-black); 275 margin: 0 0 var(--gap); 276 font-weight: 700; 277} 278 279/* Sidebar */ 280 281.sidebar { 282 background-color: var(--background); 283 font-size: .95rem; 284 max-height: calc(100vh - var(--header-height)); 285 overflow-y: auto; 286 overscroll-behavior: contain; 287 padding-top: var(--gap); 288 padding-bottom: calc(3 * var(--gap)); 289 padding-left: var(--gap); 290 position: fixed; 291 top: var(--header-height); 292 transition: transform .5s ease; 293 width: var(--sidebar-width); 294 z-index: 100; 295} 296 297.sidebar h2 { 298 margin: 0; 299} 300 301.sidebar ul { 302 list-style: none; 303 margin: var(--small-gap) 0; 304 padding: 0; 305} 306 307.sidebar li { 308 line-height: 1.2; 309 margin-bottom: 4px; 310} 311 312.sidebar .sidebar-toggle { 313 color: var(--pink); 314 font-size: calc(.8 * var(--sidebar-toggle-size)); 315} 316 317body.drawer-closed .label-open, 318body.drawer-open .label-closed { 319 display: none; 320} 321 322.display-controls { 323 display: flex; 324 flex-wrap: wrap; 325 margin-top: var(--small-gap); 326 padding-right: var(--gap); 327} 328 329.display-controls .control { 330 margin: .5rem 0; 331} 332 333.display-controls .control:not(:first-child) { 334 margin-left: 1rem; 335} 336 337.toggle { 338 align-items: center; 339 display: flex; 340 font-size: .96rem; 341} 342 343.toggle-0 .label:not(.label-0), 344.toggle-1 .label:not(.label-1) { 345 display: none; 346} 347 348.label { 349 display: flex; 350} 351 352.label .icon { 353 margin: 0 .28rem; 354} 355 356/* Module members (types, functions) */ 357 358.module-members { 359 margin-top: var(--large-gap); 360} 361 362.module-member-kind { 363 font-size: 2rem; 364 color: var(--text); 365} 366 367.member { 368 margin: var(--large-gap) 0; 369 padding-bottom: var(--gap); 370} 371 372.member-name { 373 display: flex; 374 align-items: center; 375 justify-content: space-between; 376 border-left: 4px solid var(--accent); 377 padding: var(--small-gap) var(--gap); 378 background-color: var(--accented-background); 379} 380 381.member-name h2 { 382 display: flex; 383 font-size: 1.5rem; 384 margin: 0; 385} 386 387.member-name h2 a { 388 color: var(--text); 389} 390 391.member-source { 392 align-self: baseline; 393 flex-shrink: 0; 394 line-height: calc(1.4 * 1.5rem); 395 margin: 0 0 0 var(--small-gap); 396} 397 398/* Custom type constructors */ 399 400.constructor-list { 401 list-style: none; 402 padding: 0; 403} 404 405.constructor-row { 406 align-items: center; 407 display: flex; 408} 409 410.constructor-item { 411 margin-bottom: var(--small-gap); 412} 413 414.constructor-argument-item { 415 display: flex; 416} 417 418.constructor-argument-label { 419 flex-shrink: 0; 420} 421 422.constructor-argument-doc { 423 margin-left: var(--gap); 424} 425 426.constructor-argument-list { 427 margin-bottom: var(--small-gap); 428} 429 430.constructor-item-docs { 431 margin-left: var(--large-gap); 432 margin-bottom: var(--gap); 433} 434 435.constructor-item .icon { 436 flex-shrink: 0; 437 font-size: .7rem; 438 margin: 0 .88rem; 439} 440 441.constructor-name { 442 box-shadow: unset; 443 margin: 0; 444} 445 446.constructor-name > code { 447 padding: var(--small-gap); 448} 449 450/* Tables */ 451 452table { 453 border-spacing: 0; 454 border-collapse: collapse; 455} 456 457table td, 458table th { 459 padding: 6px 13px; 460 border: 1px solid var(--table-border); 461} 462 463table tr:nth-child(2n) { 464 background-color: var(--table-background); 465} 466 467/* Footer */ 468 469.pride { 470 width: 100%; 471 display: none; 472 flex-direction: row; 473 position: absolute; 474 bottom: 0; 475 z-index: 100; 476} 477 478.show-pride .pride { 479 display: flex; 480} 481 482.show-pride .sidebar { 483 margin-bottom: var(--gap); 484} 485 486.pride div { 487 flex: 1; 488 text-align: center; 489 padding: var(--tiny-gap); 490} 491 492.pride .white { 493 background-color: var(--white); 494} 495.pride .pink { 496 background-color: var(--pink); 497} 498.pride .blue { 499 background-color: var(--boi-blue); 500} 501 502.pride-button { 503 position: absolute; 504 right: 2px; 505 bottom: 2px; 506 opacity: .2; 507 font-size: .9rem; 508} 509 510.pride-button { 511 text-decoration: none; 512 cursor: default; 513} 514 515/* Icons */ 516 517.svg-lib { 518 height: 0; 519 overflow: hidden; 520 position: absolute; 521 width: 0; 522} 523 524.icon { 525 display: inline-block; 526 fill: currentColor; 527 height: 1em; 528 stroke: currentColor; 529 stroke-width: 0; 530 width: 1em; 531} 532 533.icon-gleam-chasse { 534 width: 8.182em; 535} 536 537.icon-gleam-chasse-2 { 538 width: 4.909em; 539} 540 541/* Pre-Wrap Option */ 542 543body.prewrap-on code, 544body.prewrap-on pre { 545 white-space: pre-wrap; 546} 547 548/* Dark Theme Option */ 549 550body.theme-dark { 551 /* Colour palette adapted from: 552 * https://github.com/dustypomerleau/yarra-valley 553 */ 554 555 --argument-atom: #c651e5; 556 --class-module: #ff89b5; 557 --comment: #7e818b; 558 --escape: #7cdf89; 559 --function-call: #abb8c0; 560 --function-definition: #8af899; 561 --interpolation-regex: #ee37aa; 562 --keyword-operator: #ff9d35; 563 --number-boolean: #f14360; 564 --object: #99c2eb; 565 --punctuation: #4ce7ff; 566 --string: #aecc00; 567 568 --inline-code: #ff9d35; 569 570 --bg: #292d3e; 571 --bg-tint-1: #3e4251; --bg-tint-2: #535664; --bg-tint-3: #696c77; --bg-tint-4: #7e818b; 572 --bg-shade-1: #242837; --bg-shade-2: #202431; --bg-shade-3: #1c1f2b; 573 --bg-mono-1: #33384d; --bg-mono-2: #3d435d; --bg-mono-3: #474e6c; --bg-mono-4: #51597b; 574 575 --fg: #cac0a9; 576 --fg-tint-1: #fdf2d8; --fg-tint-2: #fdf3dc; --fg-tint-3: #fdf5e0; 577 --fg-shade-1: #e3d8be; --fg-shade-2: #cac0a9; --fg-shade-3: #b1a894; --fg-shade-4: #97907f; 578 579 --orange-shade-1: #e58d2f; --orange-shade-2: #cc7d2a; --orange-shade-3: #b26d25; 580 581 --taupe-mono-1: #fdf1d4; --taupe-mono-2: #fce9bc; --taupe-mono-3: #fbe1a3; 582 583 /* Theme Overrides */ 584 585 --accent: var(--pink); 586 --accented-background: var(--bg-shade-1); 587 --background: var(--bg); 588 --code-background: var(--bg-shade-2); 589 --table-background: var(--bg-mono-1); 590 --hard-black: var(--taupe-mono-1); 591 --links: var(--pink); 592 --text: var(--taupe-mono-1); 593 594 --shadow: 595 0 0 0 1px rgba(50, 50, 93, .075), 596 0 0 1px var(--fg-shade-3), 597 0 2px 4px -2px rgba(138, 141, 151, .2); 598 --nav-shadow: 0 0 5px 5px rgba(0, 0, 0, .1); 599} 600 601body.theme-dark { 602 background-color: var(--bg); 603 color: var(--fg-shade-1); 604} 605 606body.theme-dark .page-header { 607 background-color: var(--bg-mono-1); 608} 609 610body.theme-dark .page-header h2 { 611 color: var(--fg-shade-1); 612} 613 614 615body.theme-dark .page-header a, 616body.theme-dark .page-header a:visited { 617 color: var(--pink); 618} 619 620body.theme-dark .page-header .sidebar-toggle { 621 color: var(--fg-shade-1); 622} 623 624body.theme-dark #project-version select, 625body.theme-dark .control { 626 color: var(--fg-shade-1); 627} 628 629body.theme-dark .module-name { 630 color: var(--taupe-mono-1); 631} 632 633body.theme-dark .pride { 634 color: var(--bg-shade-3); 635} 636 637body.theme-dark .pride .white { 638 background-color: var(--fg-shade-1); 639} 640 641body.theme-dark .pride .pink { 642 background-color: var(--argument-atom); 643} 644 645body.theme-dark .pride .blue { 646 background-color: var(--punctuation); 647} 648 649/* Medium and larger displays */ 650@media (min-width: 680px) { 651 #prewrap-toggle { 652 display: none; 653 } 654} 655 656/* Small displays */ 657@media (max-width: 920px) { 658 .page-header { 659 padding-left: var(--small-gap); 660 padding-right: var(--small-gap); 661 } 662 663 .page-header h2 { 664 max-width: calc(100% - var(--sidebar-toggle-size) - var(--small-gap)); 665 } 666 667 .content { 668 width: 100%; 669 max-width: unset; 670 margin-left: unset; 671 } 672 673 .sidebar { 674 box-shadow: var(--nav-shadow); 675 height: 100vh; 676 max-height: unset; 677 top: 0; 678 transform: translate(calc(-10px - var(--sidebar-width))); 679 z-index: 500; 680 } 681 682 body.drawer-open .sidebar { 683 transform: translate(0); 684 } 685 686 .sidebar-toggle { 687 display: block; 688 opacity: 1; 689 } 690 691 .sidebar .sidebar-toggle { 692 height: var(--sidebar-toggle-size); 693 position: absolute; 694 right: var(--small-gap); 695 top: var(--small-gap); 696 width: var(--sidebar-toggle-size); 697 } 698} 699