X-Git-Url: https://git.arvados.org/rnaseq-cwl-training.git/blobdiff_plain/e821a90ef79d1886da7cadebcf05166a7ac64ef8..7517cc4f89b2336ada65ca5b37f8d3c531ed96a3:/css/swc.css

diff --git a/css/swc.css b/css/swc.css
index 79ec3c0..76141aa 100644
--- a/css/swc.css
+++ b/css/swc.css
@@ -1,6 +1,8 @@
+
 /* 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 {
@@ -8,19 +10,52 @@ 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. */
@@ -30,6 +65,22 @@ div.chapter h2 {
     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;
@@ -56,42 +107,159 @@ blockquote.testimonial cite {
 
 /* 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;
@@ -104,17 +272,6 @@ div.box {
     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 {
@@ -130,17 +287,10 @@ div.files {
     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. */
@@ -150,17 +300,17 @@ div.mainmenu {
     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. */
@@ -182,13 +332,6 @@ div.toc {
     border: 1px solid grey;
 }
 
-
-/* Title styling */
-h1.title {
-    margin:40px 0px;
-    border-bottom:1px solid #515151;
-}
-
 /* YouTube video embed. */
 div.youtube {
     text-align: center;
@@ -200,25 +343,30 @@ dl.gloss {
     /* 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;
@@ -256,11 +404,6 @@ table.outlined {
     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%;
@@ -301,41 +444,260 @@ table.workshops td.date {
 
 /* 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;
+    }
 }