css/swc.css

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