manual-style.css (15084B)
1 2 /* See the beginning of "scribble.css". 3 This file is used by the `scribble/manual` language, along with 4 "manual-racket.css". */ 5 6 @import url("manual-fonts.css"); 7 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 @media all {html {font-size: 15px;}} 14 @media all and (max-width:940px){html {font-size: 14px;}} 15 @media all and (max-width:850px){html {font-size: 13px;}} 16 @media all and (max-width:830px){html {font-size: 12px;}} 17 @media all and (max-width:740px){html {font-size: 11px;}} 18 19 /* CSS seems backward: List all the classes for which we want a 20 particular font, so that the font can be changed in one place. (It 21 would be nicer to reference a font definition from all the places 22 that we want it.) 23 24 As you read the rest of the file, remember to double-check here to 25 see if any font is set. */ 26 27 /* Monospace: */ 28 .maincolumn, .refpara, .refelem, .tocset, .stt, .hspace, .refparaleft, .refelemleft { 29 font-family: 'Fira-Mono', monospace; 30 white-space: inherit; 31 font-size: 1rem; 32 } 33 34 /* embolden the "Racket Guide" and "Racket Reference" links on the TOC */ 35 /* there isn't an obvious tag in the markup that designates the top TOC page, which is called "start.scrbl" */ 36 /* nor a tag that designates these two links as special */ 37 /* so we'll use this slightly tortured sibling selector that hooks onto the h2 tag */ 38 h2[x-source-module='(lib "scribblings/main/start.scrbl")'] ~ table a[href="guide/index.html"], 39 h2[x-source-module='(lib "scribblings/main/start.scrbl")'] ~ table a[href="reference/index.html"] { 40 font-weight: bold; 41 } 42 43 44 h2 .stt { 45 font-size: 2.3rem; 46 /* prevent automatic bolding from h2 */ 47 font-weight: 400; 48 } 49 50 .toptoclink .stt { 51 font-size: inherit; 52 } 53 .toclink .stt { 54 font-size: 90%; 55 } 56 57 .RpackageSpec .stt { 58 font-weight: 300; 59 font-family: 'Fira-Mono', monospace; 60 font-size: 0.9rem; 61 } 62 63 h3 .stt, h4 .stt, h5 .stt { 64 color: #333; 65 font-size: 1.65rem; 66 font-weight: 400; 67 } 68 69 70 /* Serif: */ 71 .main, .refcontent, .tocview, .tocsub, .sroman, i { 72 font-family: 'Charter-Racket', serif; 73 font-size: 1.18rem; 74 /* Don't use font-feature-settings with Charter, 75 it fouls up loading for reasons mysterious */ 76 /* font-feature-settings: 'tnum' 1, 'liga' 0; */ 77 } 78 79 80 /* Sans-serif: */ 81 .version, .versionNoNav, .ssansserif { 82 font-family: 'Fira', sans-serif; 83 } 84 85 /* used mostly for DrRacket menu commands */ 86 .ssansserif { 87 font-family: 'Fira', sans-serif; 88 font-size: 0.9em; 89 } 90 91 .tocset .ssansserif { 92 font-size: 100%; 93 } 94 95 /* ---------------------------------------- */ 96 97 p, .SIntrapara { 98 display: block; 99 margin: 0 0 1em 0; 100 line-height: 1.4; 101 } 102 103 .compact { 104 padding: 0 0 1em 0; 105 } 106 107 li { 108 list-style-position: outside; 109 margin-left: 1.2em; 110 } 111 112 h1, h2, h3, h4, h5, h6, h7, h8 { 113 font-family: 'Fira', sans-serif; 114 font-weight: 300; 115 font-size: 1.6rem; 116 color: #333; 117 margin-top: inherit; 118 margin-bottom: 1rem; 119 line-height: 1.25; 120 121 } 122 123 h3, h4, h5, h6, h7, h8 { 124 border-top: 1px solid black; 125 } 126 127 128 129 h2 { /* per-page main title */ 130 font-family: 'Cooper-Hewitt'; 131 margin-top: 4rem; 132 font-size: 2.3rem; 133 font-weight: bold; 134 line-height: 1.2; 135 width: 90%; 136 /* a little nudge to make text visually lower than 4rem rule in left margin */ 137 position: relative; 138 top: 6px; 139 } 140 141 h3, h4, h5, h6, h7, h8 { 142 margin-top: 2em; 143 padding-top: 0.1em; 144 margin-bottom: 0.75em; 145 } 146 147 /* ---------------------------------------- */ 148 /* Main */ 149 150 body { 151 color: black; 152 background-color: white; 153 } 154 155 .maincolumn { 156 width: auto; 157 margin-top: 4rem; 158 margin-left: 17rem; 159 margin-right: 2rem; 160 margin-bottom: 10rem; /* to avoid fixed bottom nav bar */ 161 max-width: 700px; 162 min-width: 370px; /* below this size, code samples don't fit */ 163 } 164 165 a { 166 text-decoration: inherit; 167 } 168 169 a, .toclink, .toptoclink, .tocviewlink, .tocviewselflink, .tocviewtoggle, .plainlink, 170 .techinside, .techoutside:hover, .techinside:hover { 171 color: #07A; 172 } 173 174 a:hover { 175 text-decoration: underline; 176 } 177 178 179 /* ---------------------------------------- */ 180 /* Navigation */ 181 182 .navsettop, .navsetbottom { 183 left: 0; 184 width: 15rem; 185 height: 6rem; 186 font-family: 'Fira', sans-serif; 187 font-size: 0.9rem; 188 border-bottom: 0px solid hsl(216, 15%, 70%); 189 background-color: inherit; 190 padding: 0; 191 } 192 193 .navsettop { 194 position: absolute; 195 top: 0; 196 left: 0; 197 margin-bottom: 0; 198 border-bottom: 0; 199 } 200 201 .navsettop a, .navsetbottom a { 202 color: black; 203 } 204 205 .navsettop a:hover, .navsetbottom a:hover { 206 background: hsl(216, 78%, 95%); 207 text-decoration: none; 208 } 209 210 .navleft, .navright { 211 position: static; 212 float: none; 213 margin: 0; 214 white-space: normal; 215 } 216 217 218 .navleft a { 219 display: inline-block; 220 } 221 222 .navright a { 223 display: inline-block; 224 text-align: center; 225 } 226 227 .navleft a, .navright a, .navright span { 228 display: inline-block; 229 padding: 0.5rem; 230 min-width: 1rem; 231 } 232 233 234 .navright { 235 height: 2rem; 236 white-space: nowrap; 237 } 238 239 240 .navsetbottom { 241 display: none; 242 } 243 244 .nonavigation { 245 color: #889; 246 } 247 248 .searchform { 249 display: block; 250 margin: 0; 251 padding: 0; 252 border-bottom: 1px solid #eee; 253 height: 4rem; 254 } 255 256 .nosearchform { 257 margin: 0; 258 padding: 0; 259 height: 4rem; 260 } 261 262 .searchbox { 263 font-size: 0.9rem; 264 width: 12rem; 265 margin: 1rem; 266 padding: 0.25rem 0.4rem ; 267 vertical-align: middle; 268 background-color: white; 269 font-family: 'Fira-Mono', monospace; 270 } 271 272 273 #search_box { 274 font-family: 'Fira-Mono', monospace; 275 font-size: 1rem; 276 padding: 0.25rem 0.3rem ; 277 } 278 279 /* Default to local view. Global will specialize */ 280 .plt_global_only { display: none; } 281 .plt_local_only { display: block; } 282 283 /* ---------------------------------------- */ 284 /* Version */ 285 286 .versionbox { 287 position: absolute; 288 float: none; 289 top: 0.25rem; 290 left: 17rem; 291 z-index: 11000; 292 height: 2em; 293 font-size: 70%; 294 font-weight: lighter; 295 width: inherit; 296 margin: 0; 297 } 298 .version, .versionNoNav { 299 font-size: inherit; 300 } 301 .version:before, .versionNoNav:before { 302 content: "v."; 303 } 304 305 306 /* ---------------------------------------- */ 307 /* Margin notes */ 308 309 /* cancel scribble.css styles: */ 310 .refpara, .refelem { 311 position: static; 312 float: none; 313 height: auto; 314 width: auto; 315 margin: 0; 316 } 317 318 .refcolumn { 319 position: static; 320 display: block; 321 width: auto; 322 font-size: inherit; 323 margin: 2rem; 324 margin-left: 2rem; 325 padding: 0.5em; 326 padding-left: 0.75em; 327 padding-right: 1em; 328 background: hsl(60, 29%, 94%); 329 border: 1px solid #ccb; 330 border-left: 0.4rem solid #ccb; 331 } 332 333 334 /* slightly different handling for margin-note* on narrow screens */ 335 @media all and (max-width:1340px) { 336 span.refcolumn { 337 float: right; 338 width: 50%; 339 margin-left: 1rem; 340 margin-bottom: 0.8rem; 341 margin-top: 1.2rem; 342 } 343 344 } 345 346 .refcontent, .refcontent p { 347 line-height: 1.5; 348 margin: 0; 349 } 350 351 .refcontent p + p { 352 margin-top: 1em; 353 } 354 355 .refcontent a { 356 font-weight: 400; 357 } 358 359 .refpara, .refparaleft { 360 top: -1em; 361 } 362 363 364 @media all and (max-width:600px) { 365 .refcolumn { 366 margin-left: 0; 367 margin-right: 0; 368 } 369 } 370 371 372 @media all and (min-width:1340px) { 373 .refcolumn { 374 margin: 0 -22.5rem 1rem 0; 375 float: right; 376 clear: right; 377 width: 18rem; 378 } 379 } 380 381 .refcontent { 382 font-family: 'Fira', sans-serif; 383 font-size: 1rem; 384 line-height: 1.6; 385 margin: 0 0 0 0; 386 } 387 388 389 .refparaleft, .refelemleft { 390 position: relative; 391 float: left; 392 right: 2em; 393 height: 0em; 394 width: 13em; 395 margin: 0em 0em 0em -13em; 396 } 397 398 @media all and (max-width:1340px) { 399 /* avoid disappearing left note if display area is narrow */ 400 .refparaleft, .refelemleft { 401 margin: 0em 0em 0em 0em; 402 right: 0em; 403 } 404 } 405 406 .refcolumnleft { 407 background-color: hsl(60, 29%, 94%); 408 display: block; 409 position: relative; 410 width: 13em; 411 font-size: 85%; 412 border: 0.5em solid hsl(60, 29%, 94%); 413 margin: 0 0 0 0; 414 } 415 416 417 /* ---------------------------------------- */ 418 /* Table of contents, left margin */ 419 420 .tocset { 421 position: absolute; 422 float: none; 423 left: 0; 424 top: 0rem; 425 width: 14rem; 426 padding: 7rem 0.5rem 0.5rem 0.5rem; 427 background-color: hsl(216, 15%, 70%); 428 margin: 0; 429 430 } 431 432 .tocset td { 433 vertical-align: text-top; 434 padding-bottom: 0.4rem; 435 padding-left: 0.2rem; 436 line-height: 1.1; 437 font-family: 'Fira', sans-serif; 438 } 439 440 .tocset td a { 441 color: black; 442 font-weight: 400; 443 } 444 445 446 .tocview { 447 text-align: left; 448 background-color: inherit; 449 } 450 451 452 .tocview td, .tocsub td { 453 line-height: 1.3; 454 } 455 456 457 .tocview table, .tocsub table { 458 width: 90%; 459 } 460 461 .tocset td a.tocviewselflink { 462 font-weight: lighter; 463 font-size: 110%; /* monospaced styles below don't need to enlarge */ 464 color: white; 465 } 466 467 .tocviewselflink { 468 text-decoration: none; 469 } 470 471 .tocsub { 472 text-align: left; 473 margin-top: 0.5em; 474 background-color: inherit; 475 } 476 477 .tocviewlist, .tocsublist { 478 margin-left: 0.2em; 479 margin-right: 0.2em; 480 padding-top: 0.2em; 481 padding-bottom: 0.2em; 482 } 483 .tocviewlist table { 484 font-size: 82%; 485 } 486 487 .tocviewlisttopspace { 488 margin-bottom: 1em; 489 } 490 491 .tocviewsublist, .tocviewsublistonly, .tocviewsublisttop, .tocviewsublistbottom { 492 margin-left: 0.4em; 493 border-left: 1px solid #99a; 494 padding-left: 0.8em; 495 } 496 .tocviewsublist { 497 margin-bottom: 1em; 498 } 499 .tocviewsublist table, 500 .tocviewsublistonly table, 501 .tocviewsublisttop table, 502 .tocviewsublistbottom table, 503 table.tocsublist { 504 font-size: 1rem; 505 } 506 507 .tocviewsublist td, 508 .tocviewsublistbottom td, 509 .tocviewsublisttop td, 510 .tocsub td, 511 .tocviewsublistonly td { 512 font-size: 90%; 513 } 514 515 /* shrink the monospaced text (`stt`) within nav */ 516 .tocviewsublist td .stt, 517 .tocviewsublistbottom td .stt, 518 .tocviewsublisttop td .stt, 519 .tocsub td .stt, 520 .tocviewsublistonly td .stt { 521 font-size: 95%; 522 } 523 524 525 .tocviewtoggle { 526 font-size: 75%; /* looks better, and avoids bounce when toggling sub-sections due to font alignments */ 527 } 528 529 .tocsublist td { 530 padding-left: 0.5rem; 531 padding-top: 0.25rem; 532 text-indent: 0; 533 } 534 535 .tocsublinknumber { 536 font-size: 100%; 537 } 538 539 .tocsublink { 540 font-size: 82%; 541 text-decoration: none; 542 } 543 544 .tocsubseclink { 545 font-size: 100%; 546 text-decoration: none; 547 } 548 549 .tocsubnonseclink { 550 font-size: 82%; 551 text-decoration: none; 552 margin-left: 1rem; 553 padding-left: 0; 554 display: inline-block; 555 } 556 557 /* the label "on this page" */ 558 .tocsubtitle { 559 display: block; 560 font-size: 62%; 561 font-family: 'Fira', sans-serif; 562 font-weight: bolder; 563 font-style: normal; 564 letter-spacing: 2px; 565 text-transform: uppercase; 566 margin: 0.5em; 567 } 568 569 .toptoclink { 570 font-weight: bold; 571 font-size: 110%; 572 margin-bottom: 0.5rem; 573 margin-top: 1.5rem; 574 display: inline-block; 575 } 576 577 .toclink { 578 font-size: inherit; 579 } 580 581 /* ---------------------------------------- */ 582 /* Some inline styles */ 583 584 .indexlink { 585 text-decoration: none; 586 } 587 588 pre { 589 margin-left: 2em; 590 } 591 592 blockquote { 593 margin-left: 2em; 594 margin-right: 2em; 595 margin-bottom: 1em; 596 } 597 598 .SCodeFlow { 599 border-left: 1px dotted black; 600 padding-left: 1em; 601 padding-right: 1em; 602 margin-top: 1em; 603 margin-bottom: 1em; 604 margin-left: 0em; 605 margin-right: 2em; 606 white-space: nowrap; 607 line-height: 1.5; 608 } 609 610 .SCodeFlow img { 611 margin-top: 0.5em; 612 margin-bottom: 0.5em; 613 } 614 615 /* put a little air between lines of code sample */ 616 /* Fira Mono appears taller than Source Code Pro */ 617 .SCodeFlow td { 618 padding-bottom: 1px; 619 } 620 621 .boxed { 622 margin: 0; 623 margin-top: 2em; 624 padding: 0.25em; 625 padding-top: 0.3em; 626 padding-bottom: 0.4em; 627 background: #f3f3f3; 628 box-sizing:border-box; 629 border-top: 1px solid #99b; 630 background: hsl(216, 78%, 95%); 631 background: -moz-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%); 632 background: -webkit-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%); 633 background: -o-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%); 634 background: -ms-linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%); 635 background: linear-gradient(to bottom left, hsl(0, 0%, 99%) 0%, hsl(216, 62%, 95%) 100%); 636 } 637 638 blockquote > blockquote.SVInsetFlow { 639 /* resolves issue in e.g. /reference/notation.html */ 640 margin-top: 0em; 641 } 642 643 .leftindent .SVInsetFlow { /* see e.g. section 4.5 of Racket Guide */ 644 margin-top: 1em; 645 margin-bottom: 1em; 646 } 647 648 .SVInsetFlow a, .SCodeFlow a { 649 color: #07A; 650 } 651 652 .SubFlow { 653 display: block; 654 margin: 0em; 655 } 656 657 .boxed { 658 width: 100%; 659 background-color: inherit; 660 } 661 662 .techoutside { text-decoration: none; } 663 664 .SAuthorListBox { 665 position: static; 666 float: none; 667 font-family: 'Fira', sans-serif; 668 font-weight: 300; 669 font-size: 110%; 670 margin-top: 1rem; 671 margin-bottom: 2rem; 672 width: 30rem; 673 height: auto; 674 } 675 676 .author > a { /* email links within author block */ 677 font-weight: inherit; 678 color: inherit; 679 } 680 681 .SAuthorList { 682 font-size: 82%; 683 } 684 .SAuthorList:before { 685 content: "by "; 686 } 687 .author { 688 display: inline; 689 white-space: nowrap; 690 } 691 692 /* phone + tablet styles */ 693 694 @media all and (max-width:720px){ 695 696 697 @media all and (max-width:720px){ 698 699 @media all {html {font-size: 15px;}} 700 @media all and (max-width:700px){html {font-size: 14px;}} 701 @media all and (max-width:630px){html {font-size: 13px;}} 702 @media all and (max-width:610px){html {font-size: 12px;}} 703 @media all and (max-width:550px){html {font-size: 11px;}} 704 @media all and (max-width:520px){html {font-size: 10px;}} 705 706 .navsettop, .navsetbottom { 707 display: block; 708 position: absolute; 709 width: 100%; 710 height: 4rem; 711 border: 0; 712 background-color: hsl(216, 15%, 70%); 713 } 714 715 .searchform { 716 display: inline; 717 border: 0; 718 } 719 720 .navright { 721 position: absolute; 722 right: 1.5rem; 723 margin-top: 1rem; 724 border: 0px solid red; 725 } 726 727 .navsetbottom { 728 display: block; 729 margin-top: 8rem; 730 } 731 732 .tocset { 733 display: none; 734 } 735 736 .tocset table, .tocset tbody, .tocset tr, .tocset td { 737 display: inline; 738 } 739 740 .tocview { 741 display: none; 742 } 743 744 .tocsub .tocsubtitle { 745 display: none; 746 } 747 748 .versionbox { 749 top: 4.5rem; 750 left: 1rem; /* same distance as main-column */ 751 z-index: 11000; 752 height: 2em; 753 font-size: 70%; 754 font-weight: lighter; 755 } 756 757 758 .maincolumn { 759 margin-left: 1em; 760 margin-top: 7rem; 761 margin-bottom: 0rem; 762 } 763 764 } 765 766 } 767 768 /* print styles : hide the navigation elements */ 769 @media print { 770 .tocset, 771 .navsettop, 772 .navsetbottom { display: none; } 773 .maincolumn { 774 width: auto; 775 margin-right: 13em; 776 margin-left: 0; 777 } 778 }