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