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