css/swc.css

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