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