stylesheet.css (14517B)
1 /******************************************************************************* 2 Site Design by @kentonv and @sailorhg. 3 4 Originally based on Slate Theme for GitHub Pages 5 by Jason Costello, @jsncostello 6 *******************************************************************************/ 7 8 @import url(pygment_trac.css); 9 10 /******************************************************************************* 11 MeyerWeb Reset 12 *******************************************************************************/ 13 14 html, body, div, span, applet, object, iframe, 15 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 16 a, abbr, acronym, address, big, cite, code, 17 del, dfn, em, img, ins, kbd, q, s, samp, 18 small, strike, strong, sub, sup, tt, var, 19 b, u, i, center, 20 dl, dt, dd, ol, ul, li, 21 fieldset, form, label, legend, 22 table, caption, tbody, tfoot, thead, tr, th, td, 23 article, aside, canvas, details, embed, 24 figure, figcaption, footer, header, hgroup, 25 menu, nav, output, ruby, section, summary, 26 time, mark, audio, video { 27 margin: 0; 28 padding: 0; 29 border: 0; 30 font: inherit; 31 vertical-align: baseline; 32 } 33 34 /* HTML5 display-role reset for older browsers */ 35 article, aside, details, figcaption, figure, 36 footer, header, hgroup, menu, nav, section { 37 display: block; 38 } 39 40 ol, ul { 41 list-style: none; 42 } 43 44 blockquote, q { 45 } 46 47 table { 48 border-collapse: collapse; 49 border-spacing: 0; 50 } 51 52 a:focus { 53 outline: none; 54 } 55 56 /******************************************************************************* 57 Theme Styles 58 *******************************************************************************/ 59 60 body { 61 box-sizing: border-box; 62 color:#373737; 63 background: #212121; 64 font-size: 16px; 65 font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif; 66 line-height: 1.5; 67 -webkit-font-smoothing: antialiased; 68 } 69 70 h1, h2, h3, h4, h5, h6 { 71 margin: 10px 0; 72 font-weight: 700; 73 color:#222222; 74 font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif; 75 letter-spacing: -1px; 76 } 77 78 .hmargin { 79 margin: 10px 0 0 0; 80 } 81 82 h1 { 83 font-size: 36px; 84 font-weight: 700; 85 } 86 87 h2 { 88 padding-bottom: 10px; 89 font-size: 28px; 90 background: url('../images/bg_hr.png') repeat-x bottom; 91 } 92 93 h3 { 94 font-size: 24px; 95 } 96 97 h4 { 98 font-size: 21px; 99 } 100 101 h5 { 102 font-size: 18px; 103 } 104 105 h6 { 106 font-size: 16px; 107 } 108 109 p { 110 margin: 10px 0 15px 0; 111 } 112 113 footer p { 114 color: #f2f2f2; 115 } 116 117 a { 118 text-decoration: none; 119 color: #007edf; 120 text-shadow: none; 121 122 transition: color 0.5s ease; 123 transition: text-shadow 0.5s ease; 124 -webkit-transition: color 0.5s ease; 125 -webkit-transition: text-shadow 0.5s ease; 126 -moz-transition: color 0.5s ease; 127 -moz-transition: text-shadow 0.5s ease; 128 -o-transition: color 0.5s ease; 129 -o-transition: text-shadow 0.5s ease; 130 -ms-transition: color 0.5s ease; 131 -ms-transition: text-shadow 0.5s ease; 132 } 133 134 #main_content a:hover { 135 color: #0069ba; 136 } 137 138 footer a:hover { 139 color: #43adff; 140 text-shadow: #0090ff 0px 0px 2px; 141 } 142 143 em { 144 font-style: italic; 145 } 146 147 strong { 148 font-weight: bold; 149 } 150 151 img { 152 position: relative; 153 margin: 0 auto; 154 max-width: 739px; 155 } 156 157 img.gittip { 158 width: 51px; 159 height: 10px; 160 } 161 162 img.gittip15 { 163 width: 77px; 164 height: 15px; 165 } 166 167 pre, code { 168 width: 100%; 169 color: #222; 170 background-color: #fff; 171 172 font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; 173 font-size: 14px; 174 175 border-radius: 2px; 176 -moz-border-radius: 2px; 177 -webkit-border-radius: 2px; 178 } 179 180 h1>code { 181 font-size: 30px; 182 } 183 184 pre { 185 width: -moz-calc(100% - 20px); 186 width: -webkit-calc(100% - 20px); 187 width: calc(100% - 20px); 188 padding: 10px; 189 box-shadow: 0 0 10px rgba(0,0,0,.1); 190 overflow: auto; 191 } 192 193 code { 194 padding: 3px; 195 margin: 0 3px; 196 box-shadow: 0 0 10px rgba(0,0,0,.1); 197 } 198 199 pre code { 200 display: block; 201 box-shadow: none; 202 } 203 204 blockquote { 205 color: #666; 206 margin-bottom: 20px; 207 padding: 0 0 0 20px; 208 border-left: 3px solid #bbb; 209 } 210 211 ul, ol, dl { 212 margin-bottom: 15px; 213 padding-left: 30px; 214 } 215 216 ul li { 217 list-style: outside; 218 } 219 220 ol li { 221 list-style: decimal outside; 222 } 223 224 dl dt { 225 font-weight: bold; 226 } 227 228 dl dd { 229 padding-left: 20px; 230 font-style: italic; 231 } 232 233 dl p { 234 padding-left: 20px; 235 font-style: italic; 236 } 237 238 hr { 239 height: 1px; 240 margin-bottom: 5px; 241 border: none; 242 background: url('../images/bg_hr.png') repeat-x center; 243 } 244 245 table { 246 border: 1px solid #373737; 247 margin-bottom: 20px; 248 text-align: left; 249 } 250 251 th { 252 font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 253 padding: 10px; 254 background: #373737; 255 color: #fff; 256 } 257 258 td { 259 padding: 10px; 260 border: 1px solid #373737; 261 } 262 263 form { 264 background: #f2f2f2; 265 padding: 20px; 266 } 267 268 img { 269 width: 100%; 270 max-width: 100%; 271 } 272 273 p.author { 274 margin: -1em 0 0 0; 275 padding: 0; 276 font-size: 80%; 277 color: #888; 278 } 279 280 h1>a, h2>a { 281 color: black; 282 } 283 284 /******************************************************************************* 285 Full-Width Styles 286 *******************************************************************************/ 287 288 .outer { 289 width: 100%; 290 } 291 292 .inner { 293 position: relative; 294 max-width: 640px; 295 padding: 20px 10px; 296 margin: 0 auto; 297 } 298 299 body.normal #main_content.inner { 300 margin: 0 auto 0 340px; 301 } 302 303 #discuss_banner { 304 display: block; 305 position: absolute; 306 top:0; 307 right: 10px; 308 width: 147px; 309 z-index: 10; 310 padding: 10px 50px 10px 10px; 311 color: #fff; 312 background: url('../images/groups-logo.png') #333 no-repeat 95% 50%; 313 font-weight: 700; 314 box-shadow: 0 0 10px rgba(0,0,0,.5); 315 border-bottom-left-radius: 2px; 316 border-bottom-right-radius: 2px; 317 } 318 319 #forkme_banner { 320 display: ; 321 position: absolute; 322 top:0; 323 right: 230px; 324 z-index: 10; 325 padding: 10px 50px 10px 10px; 326 color: #fff; 327 background: url('../images/blacktocat.png') #333 no-repeat 95% 50%; 328 font-weight: 700; 329 box-shadow: 0 0 10px rgba(0,0,0,.5); 330 border-bottom-left-radius: 2px; 331 border-bottom-right-radius: 2px; 332 } 333 334 .groups_link { 335 display: inline-block; 336 z-index: 10; 337 padding: 10px 50px 10px 10px; 338 margin: 5px; 339 color: #fff; 340 background: url('../images/groups-logo.png') #0090ff no-repeat 95% 50%; 341 background-color: #0090ff; 342 font-weight: 700; 343 border-top-left-radius: 2px; 344 border-top-right-radius: 2px; 345 border-bottom-left-radius: 2px; 346 border-bottom-right-radius: 2px; 347 } 348 349 .github_link { 350 display: inline-block; 351 z-index: 10; 352 padding: 10px 50px 10px 10px; 353 margin: 5px; 354 color: #fff; 355 background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%; 356 background-color: #0090ff; 357 font-weight: 700; 358 border-top-left-radius: 2px; 359 border-top-right-radius: 2px; 360 border-bottom-left-radius: 2px; 361 border-bottom-right-radius: 2px; 362 } 363 364 .twitter_link { 365 display: inline-block; 366 z-index: 10; 367 padding: 10px 50px 10px 10px; 368 margin: 5px; 369 color: #fff; 370 background: url('../images/twitter.svg') #0090ff no-repeat 95% 50%; 371 background-color: #0090ff; 372 font-weight: 700; 373 border-top-left-radius: 2px; 374 border-top-right-radius: 2px; 375 border-bottom-left-radius: 2px; 376 border-bottom-right-radius: 2px; 377 } 378 379 .block_link { 380 display: inline-block; 381 z-index: 10; 382 padding: 10px; 383 margin: 5px; 384 color: #fff; 385 background-color: #0090ff; 386 font-weight: 700; 387 border-top-left-radius: 2px; 388 border-top-right-radius: 2px; 389 border-bottom-left-radius: 2px; 390 border-bottom-right-radius: 2px; 391 } 392 393 #header_wrap { 394 background: #C42727; 395 } 396 397 #header_wrap .inner { 398 padding: 50px 10px 30px 10px; 399 } 400 401 #next_banner { 402 position: absolute; 403 left: 100px; 404 right: 100px; 405 top: 100px; 406 z-index: 100; 407 border: 2px solid black; 408 background-color: rgba(196, 196, 196, 0.9); 409 text-align: center; 410 color: black; 411 padding: 30px; 412 } 413 414 #next_banner h1 { 415 color: black; 416 font-size: 750%; 417 } 418 419 #next_banner p { 420 margin: 1em 100px; 421 } 422 423 #project_title { 424 margin: 0; 425 color: #fff; 426 font-size: 42px; 427 font-weight: 700; 428 text-shadow: #111 0px 0px 10px; 429 } 430 431 #project_tagline { 432 color: #fff; 433 font-size: 24px; 434 font-weight: 300; 435 background: none; 436 text-shadow: #111 0px 0px 10px; 437 } 438 439 #downloads { 440 position: absolute; 441 width: 210px; 442 z-index: 10; 443 top: 50px; 444 right: 0px; 445 background: url('../images/icon_download.png') no-repeat 0% 90%; 446 } 447 448 .zip_download_link { 449 display: block; 450 float: right; 451 width: 90px; 452 height:70px; 453 text-indent: -5000px; 454 overflow: hidden; 455 background: url(../images/sprite_download.png) no-repeat bottom left; 456 } 457 458 .tar_download_link { 459 display: block; 460 float: right; 461 width: 90px; 462 height:70px; 463 text-indent: -5000px; 464 overflow: hidden; 465 background: url(../images/sprite_download.png) no-repeat bottom right; 466 margin-left: 10px; 467 } 468 469 .zip_download_link:hover { 470 background: url(../images/sprite_download.png) no-repeat top left; 471 } 472 473 .tar_download_link:hover { 474 background: url(../images/sprite_download.png) no-repeat top right; 475 } 476 477 #main_content_wrap { 478 background: #f2f2f2; 479 border-top: 1px solid #111; 480 border-bottom: 1px solid #111; 481 } 482 483 #main_content { 484 padding-top: 40px; 485 } 486 487 #footer_wrap { 488 background: #212121; 489 } 490 491 492 493 /******************************************************************************* 494 Small Device Styles 495 *******************************************************************************/ 496 497 @media screen and (max-width: 480px) { 498 body { 499 font-size:14px; 500 } 501 502 #downloads { 503 display: none; 504 } 505 506 .inner { 507 min-width: 320px; 508 max-width: 480px; 509 } 510 511 #project_title { 512 font-size: 32px; 513 } 514 515 h1 { 516 font-size: 28px; 517 } 518 519 h2 { 520 font-size: 24px; 521 } 522 523 h3 { 524 font-size: 21px; 525 } 526 527 h4 { 528 font-size: 18px; 529 } 530 531 h5 { 532 font-size: 14px; 533 } 534 535 h6 { 536 font-size: 12px; 537 } 538 539 code, pre { 540 font-size: 11px; 541 } 542 543 #forkme_banner { 544 right: 215px; 545 } 546 547 #discuss_banner { 548 width: 132px; 549 } 550 } 551 552 #infinitely_faster img{ 553 position: absolute; 554 left: 600px; 555 top: 266px; 556 z-index: 10; 557 max-width:222px; 558 } 559 560 body.narrow #infinitely_faster{ 561 display:none; 562 } 563 564 body.wide #corner_hack, body.normal #corner_hack { 565 position: absolute; 566 left: 0px; 567 top: 209px; 568 right: 0px; 569 height: 10px; 570 background: #212121; 571 } 572 573 body.wide #corner_hack>div, body.normal #corner_hack>div { 574 margin-left: 249px; 575 height: 10px; 576 border-radius: 10px 0px 0px 0px; 577 background: #f2f2f2; 578 border-top: 1px solid #111; 579 border-left: 1px solid #111; 580 } 581 582 body.wide #menu, body.normal #menu { 583 position: absolute; 584 left: 50px; 585 top: 494px; 586 width: 250px; 587 z-index: 10; 588 } 589 590 body.wide #menu.floating, body.normal #menu.floating { 591 position: fixed; 592 top: 50px; 593 } 594 595 body.narrow #menu { 596 position: relative; 597 max-width: 640px; 598 padding: 50px 10px 0px 10px; 599 margin: 0 auto 1em; 600 } 601 602 @media screen and (max-width: 480px) { 603 body.narrow #menu { 604 min-width: 320px; 605 max-width: 480px; 606 } 607 } 608 609 #menu ul { 610 padding: 0; 611 margin: 0; 612 } 613 614 #menu li { 615 margin: 0; 616 list-style-type: none; 617 background-color: #212121; 618 } 619 #menu>ul>li>a, #menu>ul>li.selected { 620 display: block; 621 padding: 10px 15px 10px 15px; 622 } 623 #menu>ul>li { 624 border-right: 1px solid #111; 625 } 626 627 body.wide #menu>ul>li:last-child, body.normal #menu>ul>li:last-child { 628 border-radius: 0px 0px 10px 10px; 629 border-bottom: 1px solid #111; 630 } 631 632 body.wide #menu>ul>li:first-child, body.normal #menu>ul>li:first-child { 633 border-radius: 10px 10px 0px 0px; 634 border-top: 1px solid #111; 635 } 636 637 body.narrow #menu>ul>li:first-child { 638 border-radius: 10px 10px 0px 0px; 639 } 640 641 body.narrow #menu>ul>li:last-child { 642 border-radius: 0px 0px 10px 10px; 643 } 644 645 #menu a { 646 color: #aaa; 647 } 648 649 #menu li.selected { 650 background-color: #2a2a2a; 651 color: #fff; 652 } 653 654 #menu li.selected a { 655 color: #fff; 656 } 657 658 #menu>ul>li:hover { 659 background-color: #2a2a2a; 660 cursor: pointer; 661 } 662 663 #menu>ul>li.selected:hover { 664 background-color: #2a2a2a; 665 cursor: auto; 666 } 667 668 #menu>ul>li.selected:hover { 669 cursor: auto; 670 } 671 672 #menu>ul>li:hover a { 673 color: #eee; 674 } 675 676 #menu>ul>li.selected:hover a { 677 color: #fff; 678 } 679 680 ul#toc { 681 background-color: #2a2a2a; 682 margin: 0; 683 font-size: 80%; 684 } 685 686 #toc ul { 687 margin: 0; 688 padding: 0; 689 } 690 691 #toc li { 692 padding: 0 0 0 15px; 693 background-color: #2a2a2a; 694 } 695 696 #menu p { 697 padding: 2px 0 2px 15px; 698 margin: 0; 699 text-indent: -15px; 700 } 701 #menu p:hover { 702 background-color: #313131; 703 cursor: pointer; 704 } 705 706 table.pass-fail td { text-align: center; vertical-align: middle; } 707 table.pass-fail td:first-child { text-align: left; } 708 table.pass-fail td.pass { background-color: #8f8; } 709 table.pass-fail td.fail { background-color: #f88; } 710 table.pass-fail td.warn { background-color: #ff8; } 711 712 /******************************************************************************* 713 Slides 714 *******************************************************************************/ 715 716 body.slides * { 717 box-sizing: border-box; 718 } 719 720 body.slides header { 721 background: #C42727; 722 position: fixed; 723 top: 0; 724 left: 0; 725 width: 100%; 726 height: 20%; 727 } 728 729 body.slides header>img { 730 float: right; 731 height: 20vh; 732 padding: 2vh; 733 width: auto; 734 } 735 body.slides header>.title { 736 color: white; 737 font-size: 8vh; 738 text-align: left; 739 line-height: 20vh; 740 padding-left: 5vh; 741 } 742 743 body.slides main { 744 font-size: 4vh; 745 } 746 747 body.slides main section { 748 border-top: 1px solid #111; 749 border-bottom: 1px solid #111; 750 751 position: fixed; 752 top: 20%; 753 left: 0; 754 width: 100%; 755 bottom: 10%; 756 757 background-color: #f2f2f2; 758 position: absolute; 759 z-index: -1; 760 761 padding: 5vh; 762 } 763 764 body.slides main section.current { 765 z-index: 1; 766 } 767 768 body.slides main section#slides-cover { 769 background: url(/images/logo.png) center/75% no-repeat #C42727; 770 top: 0; 771 border-top: none; 772 } 773 774 body.slides main section#slides-cover p { 775 color: white; 776 position: absolute; 777 bottom: 0; 778 left: 0; 779 right: 0; 780 text-align: center; 781 font-size: 6vh; 782 font-weight: bold; 783 } 784 785 body.slides main img.ph3 { 786 background-color: white; 787 padding: 4vh; 788 height: 60vh; 789 width: auto; 790 box-shadow: 0 0 10px rgba(0,0,0,.1); 791 float: left; 792 margin-right: 2vh; 793 } 794 795 body.slides pre { 796 margin: 0 0 2em; 797 } 798 799 body.slides pre code { 800 font-size: 3vh; 801 } 802 803 body.slides footer { 804 background: #212121; 805 position: fixed; 806 width: 100%; 807 height: 10%; 808 left: 0; 809 bottom: 0; 810 811 color: white; 812 text-align: right; 813 padding: 2vh; 814 } 815 816 body.slides footer h2 { 817 font-size: 4vh; 818 height: 4vh; 819 margin: 0; 820 padding: 0; 821 background: none; 822 color: inherit; 823 line-height: 4vh; 824 } 825 826 body.slides footer p { 827 font-size: 2vh; 828 height: 2vh; 829 line-height: 2vh; 830 margin: 0; 831 } 832 833 body.slides footer p.url { 834 position: absolute; 835 left: 5vh; 836 top: 0; 837 bottom: 0; 838 font-size: 4vh; 839 line-height: 10vh; 840 margin: 0; 841 } 842 843 body.slides footer button { 844 width: 5vh; 845 height: 5vh; 846 font-size: 4vh; 847 padding: 0 0 0.5vh 0; 848 border: none; 849 border-radius: 0.5vh; 850 background-color: white; 851 } 852 853 body.slides footer button:last-of-type { 854 margin-right: 1vh; 855 }