-/* Main body of pages. */
-body {
- background: #BEC3C6;
- margin: 20px 0;
- font-family: "Open Sans", Helvetica, Arial, sans-serif;
- color: rgb(03, 03, 03);
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
+ font-weight: bold;
}
-/* Styling for editorial stylesheet */
-body.stylesheet {
- background: #ffffff;
- width: 60em;
- margin: 20 auto;
+h1, h2 {
+ margin-top: 40px;
+ margin-bottom: 10px;
}
-/* Top banner of every page. */
-div.banner {
- background-color: #FFFFFF;
- width: 100%;
- height: 90px;
- margin: 0px;
- padding: 0;
- border-bottom: 1px solid #A6A6A6;
+
+h1.title {
+ margin: 40px 0px;
}
-.swc-blue-bg {
- background-color: #20267D;
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+ color: inherit;
}
-/* Padding around image in top banner. */
-div.banner a img {
- padding: 20px 25px;
+/* Objectives, Callout Box and Challenges */
+.objectives, .keypoints, .callout, .challenge {
+ margin: 1em 0;
+ padding: 0em 1em;
}
-@media (max-width: 700px) {
- div.banner a img {
- padding: 20px 0px;
- }
+.objectives h2:first-child,
+.keypoints h2:first-child,
+.callout h2:first-child,
+.challenge h2:first-child {
+ margin-top: 10px;
}
-/* Footer of every page. */
-div.footer {
- clear: both;
- background: url("/img/main_shadow.png") repeat-x scroll center top #FFFFFF;
- padding: 4px 10px 7px 10px;
- border-top: 1px solid #A6A6A6;
- text-align: right;
+.objectives, .keypoints {
+ background-color: azure;
+ border: 5px solid azure;
}
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
- color: rgb(03,03,03);
+.callout {
+ background-color: #EEE;
+ border: 5px solid #EEE;
}
-h1.title {
- margin:40px 0px;
+.challenge {
+ background-color: #CCFFCC;
+ border: 5px solid #CCFFCC;
}
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
- color: inherit;
+/* Comments in code. */
+.comment {
+ color: purple;
}
-/* Objectives and key points */
-.objectives, .keypoints {
- background-color: azure;
+/* Error messages. */
+.err {
+ color: darkred;
+ font-style: italic;
}
/* Things to fix. */
background-color: lightgray;
}
+/* Highlighted changes in code. */
+.highlight {
+ background-color: mistyrose;
+}
+
+/* Manual input. */
+.in {
+ color: darkgreen;
+}
+
+/* Program output. */
+.out {
+ color: darkblue;
+ font-style: italic;
+}
+
+/* Putting shadows around things. */
+.shadow {
+ -moz-box-shadow: 0 0 30px 5px #999;
+ -webkit-box-shadow: 0 0 30px 5px #999;
+ box-shadow: 0 0 30px 5px #999;
+}
+
/* Things to understand (lead-in to sections in book). */
.understand {
background-color: lightyellow;
width: 90%;
}
-/* Tables used for displaying choices in challenges. */
-table.choices tr td {
- vertical-align : top;
+/* Citation for testimonial quote. */
+blockquote.testimonial cite {
+ font-style: italic;
}
-/* Database tables do _not_ have double borders */
-table.outlined {
- border-collapse: collapse;
+/* Main body of pages. */
+body {
+ font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
+ color: rgb(03, 03, 03);
+}
+
+body.workshop, body.lesson {
+ background-color: #BEC3C6;
+ margin: 20px 0;
+}
+
+/* Styling for editorial stylesheet */
+body.stylesheet {
+ background: #ffffff;
+ width: 60em;
+ margin: 20px auto;
}
-/* Printing */
-@media print {
- h1 {
- font-size: 16pt;
- line-height: 18pt;
- }
- h2,h3,h4,h5,h6 {
- font-size: 12pt;
- line-height: 13pt;
- }
- p,ul,ol,li,pre,code {
- font-size: 8pt;
- line-height: 9pt;
- }
+/* Code sample */
+pre.sourceCode,
+pre.input {
+ color: ForestGreen;
+}
+pre.output {
+ color: MediumBlue;
+}
+pre.error {
+ color: Red;
+}
- code {
- padding: 0px;
- border: 0px;
- background: none;
- }
- #github-ribbon {
- display: none;
- }
+.card {
+ background-color: white;
+}
- .banner {
- display: none;
- }
- .footer {
- display: none;
- }
+
+
+@media (max-width: 700px) {
+ div.banner a img {
+ padding: 20px 0px;
+ }
}
+
+
/*----------------------------------------*/
/* Override Bootstrap CSS */
/*----------------------------------------*/
font-weight: inherit;
line-height: inherit;
}
+
+blockquote h2{
+ margin-top: 0px;
+}
+
/* readability: darken the alert colour for contrast with background */
.alert {
color: rgb(0, 0, 0);
}
-/* Container for page contents. */
-.container {
- background-color: white;
+.navbar-nav {
+ margin:0;
+}
+
+.navbar-nav .container {
+ font-size:11pt;
+ padding: 27px 10px 0px 10px;
+ background: url('../img/software-carpentry-banner.png') no-repeat #d6d6d6;
+ border-top: 5px solid #2b3990;
+ background-size: 250px;
+ background-position: 10px 10px;
+ border-bottom: 1px solid #CCC;
+}
+
+
+/* Container for page contents. */
+.container-full-width {
+ max-width: none;
}
-.hero-unit {
+
+.container .jumbotron {
padding: 20px;
}
+
.navbar .container {
background-color: inherit;
}
+
.navbar-inner {
min-height: 40px;
padding-right: 20px;
-moz-border-radius: 0;
border-radius: 0;
}
+
code {
color: #333333;
}
+
.navbar-inverse .navbar-inner {
background-color: #20267D;
background-image: none;
border-bottom-color: #ffffff;
}
+/* Top banner of every page. */
+div.banner {
+ background-color: #FFFFFF;
+ width: 100%;
+ height: 90px;
+ margin: 0px;
+ padding: 0;
+ border-bottom: 1px solid #A6A6A6;
+}
+
+/* Padding around image in top banner. */
+div.banner a img {
+ padding: 20px 25px;
+}
+
+/* Explanatory call-out boxes. */
+div.box {
+ width: 54em;
+ background-color: mistyrose;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 10px;
+ padding-right: 10px;
+ outline-color: gray;
+ outline-width: 1px;
+ outline-style: solid;
+}
+
+/* Level 2 headings inside pages. */
+div.content div h3 {
+ border-bottom: 1px solid #CCCCCC;
+ display: block;
+ font-family: Verdana,"BitStream vera Sans";
+ margin-top: 10px;
+ padding: 0 5px 3px;
+}
+
+/* PDF and slide files referenced from lectures. */
+div.files {
+ padding: 10px;
+}
+
+.swc-blue-bg {
+ /*background-color: #20267D;*/
+ /* svg colour is slightly different? */
+ background: #2b3990;
+}
+
+/* Main menu at the top of every page. */
+div.mainmenu {
+ clear: both;
+ background-color: #F4F4F4;
+ margin: 0px;
+ padding: 3px 0px 3px 25px;
+ border-bottom: 1px solid #A6A6A6;
+ height: 30px
+}
+
+#menubar {
+ float: left;
+ margin-top: 4px;
+}
+
+#searchbar {
+ float: right;
+ margin-right: 20px;
+}
+
+/* Narration for audio-only lectures. */
+div.narration {
+ text-align: center;
+ font-size: 2em;
+}
+
+/* Table of contents. */
+div.toc {
+ /* No special styling yet. */
+}
+
+.transcript {
+ display: table;
+}
+
+.transcript .media img {
+ border: 1px solid grey;
+}
+
+/* YouTube video embed. */
+div.youtube {
+ text-align: center;
+ padding: 10px;
+}
+
+/* Glossary description lists. */
+dl.gloss {
+ /* Empty for now. */
+}
+
+/* Displaying YouTube videos. */
+iframe.youtube_player {
+ border: 0;
+ text-align: center;
+ width: 640px;
+ height: 500px;
+}
+
+/* Sections in book chapters. */
+section {
+ clear: both;
+}
+
+/* Person's name in team.html. */
+.person {
+ font-weight: bold;
+ font-style: italic;
+}
+
+/* Short review of book in bibliography. */
+span.review {
+ font-style: italic;
+}
+
+/* Bibliography book covers. */
+img.book-cover {
+ width: 80px;
+}
+
+/* Blog calendar table in blog/index.html. */
+table.blogcalendar th {
+ text-align : right;
+ font-weight : bold;
+}
+
+/* See above. */
+table.blogcalendar th.left {
+ text-align : left;
+}
+
+/* See above. */
+table.blogcalendar tr td {
+ text-align : right;
+}
+
+/* Blog index tables in blog/index.html. */
+table.blogindex td.date {
+ text-align: left ;
+ width:10em;
+}
+
+/* Tables used for displaying choices in challenges. */
+table.choices tr td {
+ vertical-align : top;
+}
+
+/* Database tables do _not_ have double borders */
+table.outlined {
+ border-collapse: collapse;
+}
+
+/* Link items (to workshop pages) in the workshops tables */
+table.workshops td.link {
+ width: 50%;
+ text-align: left;
+}
+
+/* Spacer items (i.e. ellipsis) on the workshops tables */
+table.workshops td.spacer {
+ max-width: 100%;
+ text-align: center;
+}
+
+/* Date columns on the workshops tables */
+table.workshops td.date {
+ width: 50%;
+ text-align: right;
+}
+
+/* Badge modal dialog */
+#assertion-modal {
+ width:700px;
+ margin-left:-350px;
+}
+#assertion-modal iframe {
+ background-color: transparent;
+ border: 0px none transparent;
+ padding: 0px;
+ width: 100%;
+ height: 20em;
+}
+
+#assertion-model img.badge {
+ position: absolute;
+ right: 15px;
+ bottom: 35px;
+ opacity: 0.5;
+}
+
+/* list with checkbox as bullet */
+ul.checklist {
+ list-style-image: url('../img/checkbox.png');
+}
+
+/* FAQ */
+dl.faq dt {
+ font-style: italic;
+ font-weight: bold;
+}
+
+section.content {
+ width:100%;
+ background: white;
+}
+
+.header.home {
+ background: url(../img/header.png) no-repeat center center;
+ background-attachment: fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+.header {
+ background:#2b3990;
+}
+
+.header h1 {
+ line-height: 1.1;
+ margin: 60px 0px 80px;
+ font-size: 40pt;
+}
+
+#header-text {
+ font-size:20pt;
+ margin:0;
+}
+
+#nav-logo {
+ width: 270px;
+ height: 40px;
+ top: 5px;
+ left: 10px;
+ position: absolute;
+ z-index: 10;
+}
+
+#home-options {
+ background:#F6F6F6;
+ border-top:1px solid #DDDDDD;
+ border-bottom:1px solid #DDDDDD;
+ padding:20px 0;
+ margin-bottom:20px;
+}
+
+#title {
+ background:#F6F6F6;
+ border-top:1px solid #DDDDDD;
+ border-bottom:1px solid #DDDDDD;
+ padding:0 0 20px;
+ margin-bottom:20px;
+}
+
+h5 a:link, h5 a:visited,
+h4 a:link, h4 a:visited,
+h3 a:link, h3 a:visited {
+ color:#2b3990;
+}
+
+h5 a:hover,
+h4 a:hover,
+h3 a:hover {
+ color:#C26D17;
+ text-decoration: none;
+}
+
+a {
+ color:#3E51CF;
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+}
+
+a:hover {
+ color:#965412;
+}
+
+footer {
+ background:#2b3990;
+ padding:20px 0;
+ font-size: 10pt;
+ margin-top:10px;
+}
+
+footer a, footer a:hover{
+ color:#FFF;
+ padding-left: 10px;
+}
+
+footer .container .links{
+ background:url('../img/software-carpentry-banner-white.png') no-repeat;
+ background-size: 200px;
+ background-position: 0;
+ height:40px;
+ padding:40px 0 0 200px;
+ text-align: right;
+}
+
+/* Footer of every page. */
+/* TODO -- might clash with site footer */
+div.footer {
+ clear: both;
+ background: url("/img/main_shadow.png") repeat-x scroll center top #FFFFFF;
+ padding: 4px 10px 7px 10px;
+ border-top: 1px solid #A6A6A6;
+ text-align: right;
+}
+
+
+/* doesn't seem to be used on site, workshop or lesson */
+/* Chapter titles. */
+div.chapter h2 {
+ text-align: center;
+ font-style: italic;
+}
+
+
+/* For the Request a Workshop form */
+#ss-form .ss-q-title {
+ display: block;
+ font-weight: bold;
+ padding-bottom: 0.5em;
+}
+#ss-form .ss-required-asterisk {
+ color: #c43b1d;
+}
+#ss-form label {
+ display:inline;
+ cursor: default;
+}
+#ss-form .ss-secondary-text {
+ color: #666;
+}
+#ss-form .ss-form-entry {
+ margin-bottom: 1.5em;
+}
+#ss-form ul {
+ margin:0;
+ padding:0;
+ list-style: none;
+}
+#ss-form ol {
+ margin:0;
+}
+#ss-form .ss-choice-item {
+ line-height: 1.3em;
+ padding-bottom: .5em;
+}
+#ss-form .ss-q-long {
+ resize: vertical;
+ width: 70%;
+}
+#ss-form .error-message, .required-message {
+ display: none;
+}
+#ss-form .ss-form-entry input {
+ vertical-align: middle;
+ margin: 0;
+ padding:0 4px;
+}
+#ss-form .ss-choice-item-control {
+ padding-right: 4px;
+}
+
+
/* GitHub Ribbon */
#github-ribbon a {
background: #000;
text-align: center;
font-weight: bold;
padding: 5px 40%;
- font-size: 0.8rem;
- line-height: 1.6rem;
+ font-size: 1.2rem;
+ line-height: 2rem;
position: relative;
transition: 0.5s;
width: 100%;
width: 150px;
overflow: hidden;
height: 150px;
+ -webkit-box-sizing: unset;
+ -moz-box-sizing: unset;
+ box-sizing: unset;
}
#github-ribbon a {
width: 200px;
projects / rnaseq-cwl-training.git / blobdiff