css/swc.css

   1 /* Card is used only at lessons */
   2 div.container.card {
   3         background-color: white;
   4 }
   5
   6 /* Headings */
   7 h1, h2, h3, h4, h5, h6 {
   8     font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
   9     font-weight: bold;
  10 }
  11
  12 h1, h2 {
  13     margin-top: 40px;
  14     margin-bottom: 10px;
  15 }
  16
  17 h1.title {
  18     margin: 40px 0px;
  19 }
  20
  21 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  22     color: inherit;
  23 }
  24
  25 h2 code, h3 code, h4 code, h5 code, h6 code {
  26     font-size: inherit;
  27 }
  28
  29 /* Objectives, Callout Box, Challenges and prerequisites are now rendered as
  30 Bootstrap panels.  There's a pandoc error with rendering headers nested under
  31 blockquote: these headers don't preserve attributes.  It means we have to
  32 manually set styles for these headers to look like Bootstrap's "panel-title"
  33 class. */
  34 .panel-heading h1,
  35 .panel-heading h2,
  36 .panel-heading h3,
  37 .panel-heading h4,
  38 .panel-heading h5,
  39 .panel-heading h6 {
  40     margin-top: 0px;
  41     margin-bottom: 0px;
  42     color: inherit;
  43     font-size: 16px;
  44     font-family: inherit;
  45     font-weight: 500;
  46     line-height: 1.1;
  47 }
  48
  49 /* Make space between the glyphicon and the rest of the header */
  50 .panel-heading h1 span,
  51 .panel-heading h2 span,
  52 .panel-heading h3 span,
  53 .panel-heading h4 span,
  54 .panel-heading h5 span,
  55 .panel-heading h6 span {
  56     padding-right: 10px;
  57 }
  58
  59 /* Make the CSS compatible with Pandoc <= 1.13.2 and Pandoc > 1.14. */
  60 h1.panel,
  61 h2.panel,
  62 h3.panel,
  63 h4.panel,
  64 h5.panel,
  65 h6.panel {
  66     margin-top: 0px;
  67     margin-bottom: 0px;
  68     border: 0px;
  69     color: inherit;
  70     background-color: inherit;
  71     background-image: inherit;
  72     box-shadow: none;
  73 }
  74
  75 /* Comments in code. */
  76 .comment {
  77     color: purple;
  78 }
  79
  80 /* Error messages. */
  81 .err {
  82     color: darkred;
  83     font-style: italic;
  84 }
  85
  86 /* Things to fix. */
  87 .fixme {
  88     text-decoration: underline;
  89     color: darkred;
  90     background-color: lightgray;
  91 }
  92
  93 /* Highlighted changes in code. */
  94 .highlight {
  95     background-color: mistyrose;
  96 }
  97
  98 /* Manual input. */
  99 .in {
 100     color: darkgreen;
 101 }
 102
 103 /* Program output. */
 104 .out {
 105     color: darkblue;
 106     font-style: italic;
 107 }
 108
 109 /* Putting shadows around things. */
 110 .shadow {
 111     -moz-box-shadow: 0 0 30px 5px #999;
 112     -webkit-box-shadow: 0 0 30px 5px #999;
 113     box-shadow: 0 0 30px 5px #999;
 114 }
 115
 116 /* Things to understand (lead-in to sections in book). */
 117 .understand {
 118     background-color: lightyellow;
 119 }
 120
 121 /* Block quotations. */
 122 blockquote {
 123     margin: 1em;
 124     padding: 1em 1em .5em 1em;
 125     width: 90%;
 126     font-size: inherit;
 127 }
 128
 129 /* Citation for testimonial quote. */
 130 blockquote.testimonial cite {
 131     font-style: italic;
 132     font-size: inherit;
 133 }
 134
 135 /* Images
 136  *
 137  * Rules from http://getbootstrap.com/css/#images-responsive.
 138  *
 139  * This is compatible with Pandoc behavior for HTML and HTML5. */
 140 article img {
 141     max-width: 100%;
 142     height: auto;
 143     display: block;
 144     margin-left: auto;
 145     margin-right: auto;
 146 }
 147
 148 article div.figure,
 149 article figure {
 150     text-align: center;
 151 }
 152
 153 article p.caption::before,
 154 article figcaption::before {
 155     content: "Figure: ";
 156 }
 157
 158 /* Main body of pages. */
 159 body {
 160     font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
 161     color: rgb(03, 03, 03);
 162 }
 163
 164 body.workshop, body.lesson {
 165         background-color: #BEC3C6;
 166         margin: 20px 0;
 167 }
 168
 169 /* Styling for editorial stylesheet */
 170 body.stylesheet {
 171     background: #ffffff;
 172     width: 60em;
 173     margin: 20px auto;
 174 }
 175
 176 /* Code sample */
 177 pre.sourceCode,
 178 pre.input {
 179     color: ForestGreen;
 180 }
 181 pre.output {
 182     color: MediumBlue;
 183 }
 184 pre.error {
 185     color: Red;
 186 }
 187
 188 @media (max-width: 700px) {
 189     div.banner a img {
 190         padding: 20px 0px;
 191     }
 192 }
 193
 194 /*----------------------------------------*/
 195 /* Override Bootstrap CSS                 */
 196 /*----------------------------------------*/
 197
 198 /* navbar */
 199 .navbar {
 200     min-height: 85px;
 201     margin-bottom: 0;
 202 }
 203
 204 .navbar-nav {
 205   margin: 15px 10px 0px 0px;
 206 }
 207
 208 #swc-navbar {
 209     border-top: 5px solid #2b3990;
 210     width: 100%;
 211     background:  #d6d6d6;
 212     border-bottom: 1px solid #CCC;
 213 }
 214
 215 .navbar-brand {
 216    position: absolute;
 217    padding-top: 7px;
 218 }
 219
 220 .navbar-brand img {
 221     width: 250px;
 222     height: 50px;
 223 }
 224
 225 #swc-navbar-search {
 226   background-color: #ffffff;
 227   color: #666666;
 228   border-color:#2b3990;
 229   width: 150px;
 230 }
 231
 232 .navbar-default .navbar-nav > li > a {
 233    color: #20267D;
 234 }
 235
 236 .navbar-nav li {
 237     margin-right: -7px;
 238     margin-left: -7px;
 239 }
 240
 241 .navbar-nav .navbar {
 242     diplay: inline-block;
 243     float: none;
 244 }
 245
 246 .navbar .navbar-collapse {
 247     text-align: center;
 248 }
 249
 250 .navbar-nav .nav-collapse .nav > li > a,
 251 .navbar-nav .nav-collapse .dropdown-menu a {
 252   color: #2b3990;
 253   text-align: center;
 254 }
 255
 256 .navbar-nav .nav .active > a,
 257 .navbar-nav .nav .active > a:hover, .navbar-nav .nav .active > a:focus {
 258     color: #ffffff;
 259     background-color: #20267D;
 260 }
 261
 262 .navbar-nav .nav li.dropdown.open > .dropdown-toggle,
 263 .navbar-nav .nav li.dropdown.active > .dropdown-toggle,
 264 .navbar-nav .nav li.dropdown.open.active > .dropdown-toggle {
 265     color: #ffffff;
 266      background-color: #20267D;
 267 }
 268 .navbar-nav .nav li.dropdown.active > .dropdown-toggle .caret {
 269     border-top-color: #999999;
 270     border-bottom-color: #999999;
 271 }
 272 .navbar-nav .nav li.dropdown.open > .dropdown-toggle .caret {
 273     border-top-color: #ffffff;
 274     border-bottom-color: #ffffff;
 275 }
 276
 277 blockquote p {
 278     font-size: inherit;
 279     font-weight: inherit;
 280     line-height: inherit;
 281 }
 282
 283 blockquote h2{
 284    margin-top: 0px;
 285 }
 286
 287 /* readability: darken the alert colour for contrast with background */
 288
 289 .alert {
 290     color: rgb(0, 0, 0);
 291 }
 292
 293 code {
 294     color: #333333;
 295 }
 296
 297 /* Top banner of every page. */
 298 div.banner {
 299         background-color: #FFFFFF;
 300         width: 100%;
 301         height: 90px;
 302         margin: 0px;
 303         padding: 0;
 304         border-bottom: 1px solid #A6A6A6;
 305 }
 306
 307 /* Padding around image in top banner. */
 308 div.banner a img {
 309         padding: 20px 25px;
 310 }
 311
 312 /* Explanatory call-out boxes. */
 313 div.box {
 314     width: 54em;
 315     background-color: mistyrose;
 316     display: block;
 317     margin-left: auto;
 318     margin-right: auto;
 319     padding-top: 1px;
 320     padding-bottom: 1px;
 321     padding-left: 10px;
 322     padding-right: 10px;
 323     outline-color: gray;
 324     outline-width: 1px;
 325     outline-style: solid;
 326 }
 327
 328 /* Level 2 headings inside pages. */
 329 div.content div h3 {
 330     border-bottom: 1px solid #CCCCCC;
 331     display: block;
 332     font-family: Verdana,"BitStream vera Sans";
 333     margin-top: 10px;
 334     padding: 0 5px 3px;
 335 }
 336
 337 /* PDF and slide files referenced from lectures. */
 338 div.files {
 339     padding: 10px;
 340 }
 341
 342 .swc-blue-bg {
 343    /*background-color: #20267D;*/
 344    /* svg colour is slightly different? */
 345     background: #2b3990;
 346 }
 347
 348 /* Main menu at the top of every page. */
 349 div.mainmenu {
 350     clear: both;
 351     background-color: #F4F4F4;
 352     margin: 0px;
 353     padding: 3px 0px 3px 25px;
 354     border-bottom: 1px solid #A6A6A6;
 355     height: 30px
 356 }
 357
 358 /* Narration for audio-only lectures. */
 359 div.narration {
 360     text-align: center;
 361     font-size: 2em;
 362 }
 363
 364 /* Table of contents. */
 365 div.toc {
 366     /* No special styling yet. */
 367 }
 368
 369 .transcript {
 370     display: table;
 371 }
 372
 373 .transcript .media img {
 374     border: 1px solid grey;
 375 }
 376
 377 /* YouTube video embed. */
 378 div.youtube {
 379     text-align: center;
 380     padding: 10px;
 381 }
 382
 383 /* Glossary description lists. */
 384 dl.gloss {
 385     /* Empty for now. */
 386 }
 387
 388 /* Displaying YouTube videos. */
 389 iframe.youtube_player {
 390     border: 0;
 391     text-align: center;
 392     width: 640px;
 393     height: 500px;
 394 }
 395
 396 /* Sections in book chapters. */
 397 section {
 398     clear: both;
 399 }
 400
 401 /* Person's name in team.html. */
 402 .person {
 403     font-weight: bold;
 404     font-style: italic;
 405 }
 406
 407 /* Short review of book in bibliography. */
 408 span.review {
 409     font-style: italic;
 410 }
 411
 412 /* Bibliography book covers. */
 413 img.book-cover {
 414     width: 80px;
 415 }
 416
 417 /* Blog calendar table in blog/index.html. */
 418 table.blogcalendar th {
 419     text-align  : right;
 420     font-weight : bold;
 421 }
 422
 423 /* See above. */
 424 table.blogcalendar th.left {
 425     text-align : left;
 426 }
 427
 428 /* See above. */
 429 table.blogcalendar tr td {
 430     text-align : right;
 431 }
 432
 433 /* Blog index tables in blog/index.html. */
 434 table.blogindex td.date {
 435     text-align: left ;
 436     width:10em;
 437 }
 438
 439 /* Tables used for displaying choices in challenges. */
 440 table.choices tr td {
 441     vertical-align : top;
 442 }
 443
 444 /* Database tables do _not_ have double borders */
 445 table.outlined {
 446     border-collapse: collapse;
 447 }
 448
 449 /* Link items (to workshop pages) in the workshops tables */
 450 table.workshops td.link {
 451     width: 50%;
 452     text-align: left;
 453 }
 454
 455 /* Spacer items (i.e. ellipsis) on the workshops tables */
 456 table.workshops td.spacer {
 457    max-width: 100%;
 458    text-align: center;
 459 }
 460
 461 /* Date columns on the workshops tables */
 462 table.workshops td.date {
 463     width: 50%;
 464     text-align: right;
 465 }
 466
 467 /* Badge modal dialog */
 468 #assertion-modal {
 469     width:700px;
 470     margin-left:-350px;
 471 }
 472 #assertion-modal iframe {
 473     background-color: transparent;
 474     border: 0px none transparent;
 475     padding: 0px;
 476     width: 100%;
 477     height: 20em;
 478 }
 479
 480 #assertion-model img.badge {
 481     position: absolute;
 482     right: 15px;
 483     bottom: 35px;
 484     opacity: 0.5;
 485 }
 486
 487 #modal-badge-img {
 488   position:absolute;
 489   right: 25px;
 490   bottom: 25px;
 491   opacity: 0.5;
 492 }
 493 #assertion-modal.in {
 494   color: black;
 495 }
 496
 497 /* list with checkbox as bullet */
 498 ul.checklist {
 499   list-style-image: url('../img/checkbox.png');
 500 }
 501
 502 /* FAQ */
 503 dl.faq dt {
 504     font-style: italic;
 505     font-weight: bold;
 506 }
 507
 508 section.content {
 509     width:100%;
 510     background: white;
 511 }
 512
 513 dd {
 514     margin-left: 10px;
 515 }
 516
 517 .header.home {
 518     background: url(../img/header.png) no-repeat center center;
 519     background-attachment: fixed;
 520     -webkit-background-size: cover;
 521     -moz-background-size: cover;
 522     -o-background-size: cover;
 523     background-size: cover;
 524 }
 525
 526 .header {
 527     background:#2b3990;
 528 }
 529
 530 .header h1 {
 531     line-height: 1.1;
 532     margin: 60px 0px 80px;
 533     font-size: 40pt;
 534 }
 535
 536 table {
 537     margin-bottom: 15px;
 538 }
 539
 540 table th, table td {
 541     padding: 5px 10px;
 542 }
 543
 544 table > thead > .header {
 545     background: transparent;
 546 }
 547
 548 table > thead > tr > td, table > thead > tr > th,
 549 table > tbody > tr > td, table > tbody > tr > th,
 550 table > tfoot > tr > td, table > tfoot > tr > th {
 551     border: 1px solid #DDD;
 552 }
 553
 554 table > thead > tr > th,
 555 table > thead > tr > td {
 556     border-bottom-width: 2px;
 557 }
 558
 559 table tbody > tr:nth-of-type(2n+1) {
 560     background-color: #F9F9F9;
 561 }
 562
 563 #header-text {
 564     font-size:20pt;
 565     margin:0;
 566 }
 567
 568 #home-options {
 569     background:#F6F6F6;
 570     border-top:1px solid #DDDDDD;
 571     border-bottom:1px solid #DDDDDD;
 572     padding:20px 0;
 573     margin-bottom:20px;
 574 }
 575
 576 #title {
 577     background:#F6F6F6;
 578     border-top:1px solid #DDDDDD;
 579     border-bottom:1px solid #DDDDDD;
 580     padding:0 0 20px;
 581     margin-bottom:20px;
 582 }
 583
 584 h5 a:link, h5 a:visited,
 585 h4 a:link, h4 a:visited,
 586 h3 a:link, h3 a:visited {
 587     color:#2b3990;
 588 }
 589
 590 h5 a:hover,
 591 h4 a:hover,
 592 h3 a:hover {
 593     color:#C26D17;
 594     text-decoration: none;
 595 }
 596
 597 a {
 598     color:#3E51CF;
 599     -webkit-transition: all 0.2s ease;
 600     -moz-transition: all 0.2s ease;
 601     -o-transition: all 0.2s ease;
 602     transition: all 0.2s ease;
 603 }
 604
 605 a:hover {
 606     color:#965412;
 607 }
 608
 609 footer {
 610     background: #2b3990;
 611     padding: 20px 0;
 612     font-size: 10pt;
 613     margin-top: 10px;
 614 }
 615
 616 footer a, footer a:hover{
 617     color:#FFF;
 618     padding-left: 10px;
 619 }
 620
 621 footer .container .links {
 622     background:url('../img/software-carpentry-banner-white.png') no-repeat;
 623     background-size: 200px;
 624     background-position: 0;
 625     min-height: 40px;
 626     padding: 20px 0px 0px 200px;
 627     text-align: right;
 628 }
 629
 630
 631 /* Footer of every page. */
 632 /* TODO -- might clash with site footer */
 633 div.footer {
 634     clear: both;
 635     background: url("/img/main_shadow.png") repeat-x scroll center top #FFFFFF;
 636     padding: 4px 10px 7px 10px;
 637    border-top: 1px solid #A6A6A6;
 638     text-align: right;
 639 }
 640
 641
 642 /* doesn't seem to be used on site, workshop or lesson */
 643 /* Chapter titles. */
 644 div.chapter h2 {
 645     text-align: center;
 646     font-style: italic;
 647 }
 648
 649
 650 /* For the Request a Workshop form */
 651 #ss-form .ss-q-title {
 652     display: block;
 653     font-weight: bold;
 654     padding-bottom: 0.5em;
 655 }
 656 #ss-form .ss-required-asterisk {
 657     color: #c43b1d;
 658 }
 659 #ss-form label {
 660     display:inline;
 661     cursor: default;
 662 }
 663 #ss-form .ss-secondary-text {
 664     color: #666;
 665 }
 666 #ss-form .ss-form-entry {
 667     margin-bottom: 1.5em;
 668 }
 669 #ss-form ul {
 670     margin:0;
 671     padding:0;
 672     list-style: none;
 673 }
 674 #ss-form ol {
 675     margin:0;
 676 }
 677 #ss-form .ss-choice-item {
 678     line-height: 1.3em;
 679     padding-bottom: .5em;
 680 }
 681 #ss-form .ss-q-long {
 682     resize: vertical;
 683     width: 70%;
 684 }
 685 #ss-form .error-message, .required-message {
 686     display: none;
 687 }
 688 #ss-form .ss-form-entry input {
 689   vertical-align: middle;
 690   margin: 0;
 691   padding:0 4px;
 692 }
 693 #ss-form .ss-choice-item-control {
 694   padding-right: 4px;
 695 }
 696
 697
 698 /* GitHub Ribbon */
 699 #github-ribbon a {
 700     background: #000;
 701     color: #fff;
 702     text-decoration: none;
 703     font-family: arial, sans-serif;
 704     text-align: center;
 705     font-weight: bold;
 706     padding: 5px 40%;
 707     font-size: 1.2rem;
 708     line-height: 2rem;
 709     position: relative;
 710     transition: 0.5s;
 711     width: 100%;
 712     margin: 0 auto;
 713     white-space: nowrap;
 714     z-index: 99999;
 715 }
 716 #github-ribbon a:hover {
 717     background: #600;
 718     color: #fff;
 719 }
 720 #github-ribbon a::before, #github-ribbon a::after {
 721     content: "";
 722     width: 100%;
 723     display: block;
 724     position: absolute;
 725     top: 1px;
 726     left: 0;
 727     height: 1px;
 728     background: #fff;
 729 }
 730 #github-ribbon a::after {
 731     bottom: 1px;
 732     top: auto;
 733 }
 734
 735 /* Collapse navbar */
 736 @media (max-width: 993px) {
 737     .navbar-header {
 738         float: none;
 739         min-height: 80px;
 740     }
 741     .navbar-left,.navbar-right {
 742         float: none !important;
 743     }
 744     .navbar-toggle {
 745         display: block;
 746         background-color: #2b3990;
 747         margin-top: 22px;
 748         margin-right: 100px;
 749     }
 750     .navbar-collapse {
 751         border-top: 1px solid transparent;
 752         box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
 753     }
 754     .navbar-fixed-top {
 755                 top: 0;
 756                 border-width: 0 0 1px;
 757         }
 758     .navbar-collapse.collapse {
 759         display: none!important;
 760     }
 761     .navbar-nav {
 762         float: none!important;
 763     }
 764     .navbar-nav>li {
 765         float: none;
 766     }
 767     .navbar-nav>li>a {
 768         padding-top: 10px;
 769         padding-bottom: 10px;
 770     }
 771     .collapse.in{
 772                 display:block !important;
 773         }
 774 }
 775
 776 @media (max-width: 600px) {
 777     .navbar-toggle {
 778         margin-right: 20px;
 779     }
 780     .navbar-brand img {
 781         width: 180px;
 782         height: 36px;
 783         margin-top: 10px
 784     }
 785     footer .container .links {
 786         background:url('../img/software-carpentry-banner-white.png') no-repeat;
 787         background-size: 180px;
 788         background-position: 0;
 789     }
 790 }
 791
 792 /* GitHub ribbon breaking point */
 793 @media screen and (min-width: 600px) {
 794     #github-ribbon {
 795         position: absolute;
 796         display: block;
 797         top: 0;
 798         right: 0;
 799         width: 150px;
 800         overflow: hidden;
 801         height: 150px;
 802     }
 803     #github-ribbon a {
 804         width: 200px;
 805         position: absolute;
 806         padding: 5px 40px;
 807         top: 40px;
 808         right: -40px;
 809         transform: rotate(45deg);
 810         -webkit-transform: rotate(45deg);
 811         box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
 812     }
 813 }
 814 @media (max-width: 599px) {
 815     .header h1 {
 816         font-size: 20pt;
 817     }
 818     #header-text {
 819         font-size: 16pt;
 820     }
 821     #github-ribbon {
 822         width: 100%;
 823     }
 824     #github-ribbon a {
 825         display: block;
 826         padding: 0px 0px;
 827         margin: 0px 0px;
 828     }
 829 }