+
/* Headings */
-h1, h2, h3, h4, h5, h6 {
- color: rgb(03,03,03);
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
+ font-weight: bold;
}
h1, h2 {
margin-bottom: 10px;
}
+
+h1.title {
+ margin: 40px 0px;
+}
+
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
}
-/* Chapter titles. */
-div.chapter h2 {
- text-align: center;
- font-style: italic;
+/* Objectives, Callout Box and Challenges */
+.objectives, .keypoints, .callout, .challenge {
+ margin: 1em 0;
+ padding: 0em 1em;
+}
+
+.objectives h2:first-child,
+.keypoints h2:first-child,
+.callout h2:first-child,
+.challenge h2:first-child {
+ margin-top: 10px;
}
-/* Objectives and key points */
.objectives, .keypoints {
background-color: azure;
+ border: 5px solid azure;
+}
+
+.callout {
+ background-color: #EEE;
+ border: 5px solid #EEE;
+}
+
+.challenge {
+ background-color: #CCFFCC;
+ border: 5px solid #CCFFCC;
+}
+
+/* Comments in code. */
+.comment {
+ color: purple;
+}
+
+/* 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;
/* Main body of pages. */
body {
- background: #BEC3C6;
- margin: 20px 0;
- font-family: "Open Sans", Helvetica, Arial, sans-serif;
+ 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: 20 auto;
+ margin: 20px auto;
}
-/* Top banner of every page. */
-div.banner {
- background-color: #FFFFFF;
- width: 100%;
- height: 90px;
- margin: 0px;
- padding: 0;
- border-bottom: 1px solid #A6A6A6;
+
+
+/* Code sample */
+pre.sourceCode,
+pre.input {
+ color: ForestGreen;
+}
+pre.output {
+ color: MediumBlue;
+}
+pre.error {
+ color: Red;
}
-/* Padding around image in top banner. */
-div.banner a img {
- padding: 20px 25px;
+
+.card {
+ background-color: white;
}
+
+
+
@media (max-width: 700px) {
div.banner a img {
padding: 20px 0px;
}
}
+
+
+/*----------------------------------------*/
+/* Override Bootstrap CSS */
+/*----------------------------------------*/
+
+blockquote p {
+ font-size: inherit;
+ 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);
+}
+
+.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;
+}
+
+.container .jumbotron {
+ padding: 20px;
+}
+
+.navbar .container {
+ background-color: inherit;
+}
+
+.navbar-inner {
+ min-height: 40px;
+ padding-right: 20px;
+ padding-left: 20px;
+ background-color: #F4F4F4;
+ background-image: none;
+ border: 1px solid #d4d4d4;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+
+code {
+ color: #333333;
+}
+
+.navbar-inverse .navbar-inner {
+ background-color: #20267D;
+ background-image: none;
+ border-color: #20267D;
+}
+.navbar-inverse .nav .active > a,
+.navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
+ color: #ffffff;
+ background-color: #20267D;
+}
+.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
+.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
+.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
+ color: #ffffff;
+ background-color: #20267D;
+}
+.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret {
+ border-top-color: #999999;
+ border-bottom-color: #999999;
+}
+.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
+ border-top-color: #ffffff;
+ 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;
outline-width: 1px;
outline-style: solid;
}
-@media (max-width: 700px) {
- div.box {
- width: 80%;
- }
-}
-@media (min-width: 700px) {
- div.box {
- width: 54em;
- max-width: 80%;
- }
-}
/* Level 2 headings inside pages. */
div.content div h3 {
padding: 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;
-}
-
.swc-blue-bg {
- background-color: #20267D;
+ /*background-color: #20267D;*/
+ /* svg colour is slightly different? */
+ background: #2b3990;
}
/* Main menu at the top of every page. */
margin: 0px;
padding: 3px 0px 3px 25px;
border-bottom: 1px solid #A6A6A6;
- height:30px
+ height: 30px
}
#menubar {
- float:left;
- margin-top:4px;
+ float: left;
+ margin-top: 4px;
}
#searchbar {
- float:right;
- margin-right:20px;
+ float: right;
+ margin-right: 20px;
}
/* Narration for audio-only lectures. */
border: 1px solid grey;
}
-
-/* Title styling */
-h1.title {
- margin:40px 0px;
- border-bottom:1px solid #515151;
-}
-
/* YouTube video embed. */
div.youtube {
text-align: center;
/* Empty for now. */
}
-/* FIXME: shouldn't be using iframe's directly (EventBrite and YouTube should be via macro expansion). */
+/* Displaying YouTube videos. */
iframe.youtube_player {
- border : 0;
- text-align : center;
- width : 640px;
- height : 500px;
+ border: 0;
+ text-align: center;
+ width: 640px;
+ height: 500px;
}
-/* Amy Brown's logo in book/stylesheet.html. */
-img.logoARB {
- float: right;
+/* Sections in book chapters. */
+section {
+ clear: both;
}
/* Person's name in team.html. */
-span.person {
+.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;
border-collapse: collapse;
}
-/* Container for content in the workshop index page */
-div.workshops {
- text-align: center;
-}
-
/* Link items (to workshop pages) in the workshops tables */
table.workshops td.link {
width: 50%;
/* list with checkbox as bullet */
ul.checklist {
- list-style-image: url('/img/checkbox.png');
+ list-style-image: url('../img/checkbox.png');
}
-/* Printing */
-@media print {
- h1 {
- font-size: 16pt;
- line-height: 18pt;
- }
+/* FAQ */
+dl.faq dt {
+ font-style: italic;
+ font-weight: bold;
+}
- h2,h3,h4,h5,h6 {
- font-size: 12pt;
- line-height: 13pt;
- }
+section.content {
+ width:100%;
+ background: white;
+}
- p,ul,ol,li,pre,code {
- font-size: 8pt;
- line-height: 9pt;
- }
+.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;
+}
- code {
- padding: 0px;
- border: 0px;
- background: none;
- }
+.header {
+ background:#2b3990;
+}
- #github-ribbon {
- display: none;
- }
+.header h1 {
+ line-height: 1.1;
+ margin: 60px 0px 80px;
+ font-size: 40pt;
+}
- .banner {
- display: none;
- }
+#header-text {
+ font-size:20pt;
+ margin:0;
+}
- .footer {
+#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;
+ color: #fff;
+ text-decoration: none;
+ font-family: arial, sans-serif;
+ text-align: center;
+ font-weight: bold;
+ padding: 5px 40%;
+ font-size: 1.2rem;
+ line-height: 2rem;
+ position: relative;
+ transition: 0.5s;
+ width: 100%;
+ margin: 0 auto;
+ white-space: nowrap;
+ z-index: 10;
+}
+#github-ribbon a:hover {
+ background: #600;
+ color: #fff;
+}
+#github-ribbon a::before, #github-ribbon a::after {
+ content: "";
+ width: 100%;
+ display: block;
+ position: absolute;
+ top: 1px;
+ left: 0;
+ height: 1px;
+ background: #fff;
+}
+#github-ribbon a::after {
+ bottom: 1px;
+ top: auto;
+}
+
+/* GitHub ribbon breaking point */
+@media screen and (min-width: 600px) {
+ .navbar .btn-navbar {
+ margin-right: 150px;
+ }
+ #github-ribbon {
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ width: 150px;
+ overflow: hidden;
+ height: 150px;
+ -webkit-box-sizing: unset;
+ -moz-box-sizing: unset;
+ box-sizing: unset;
+ }
+ #github-ribbon a {
+ width: 200px;
+ position: absolute;
+ padding: 5px 40px;
+ top: 40px;
+ right: -80px;
+ transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
+ }
+}
+@media (max-width: 599px) {
+ .header h1 {
+ font-size: 20pt;
+ }
+ #header-text {
+ font-size: 16pt;
+ }
+ #github-ribbon {
+ width: 100%;
+ }
+ #github-ribbon a {
+ display: block;
+ padding: 0px 0px;
+ margin: 0px 0px;
+ }
}
projects / rnaseq-cwl-training.git / blobdiff