+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
+ font-weight: bold;
+}
+
+h1, h2 {
+ margin-top: 40px;
+ margin-bottom: 10px;
+}
+
+
+h1.title {
+ margin: 40px 0px;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+ color: inherit;
+}
+
+/* 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, .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. */
+.fixme {
+ text-decoration: underline;
+ color: darkred;
+ 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;
+}
+
+/* Block quotations. */
+blockquote {
+ margin: 1em;
+ padding: 1em 1em .5em 1em;
+ width: 90%;
+}
+
+/* Citation for testimonial quote. */
+blockquote.testimonial cite {
+ font-style: italic;
+}
+
/* Main body of pages. */
body {
- 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;
+}
+
+
+
+/* Code sample */
+pre.sourceCode,
+pre.input {
+ color: ForestGreen;
+}
+pre.output {
+ color: MediumBlue;
+}
+pre.error {
+ color: Red;
+}
+
+
+.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. */
border: 1px solid grey;
}
-h1, h2 {
- margin-top: 40px;
- margin-bottom: 10px;
-}
-
-h1:first-child, h2:first-child {
- margin-top: 10px;
-}
-
-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;
-
-/* Things to fix. */
-.fixme {
- text-decoration: underline;
- color: darkred;
- background-color: lightgray;
-}
-
-/* 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;
-}
-
-/* Block quotations. */
-blockquote {
- margin: 1em;
- padding: 1em 1em .5em 1em;
- width: 90%;
-}
-
-/* Citation for testimonial quote. */
-blockquote.testimonial cite {
- font-style: italic;
-}
/* YouTube video embed. */
div.youtube {
text-align: center;
width:10em;
}
-/* Citation for testimonial quote. */
-blockquote.testimonial cite {
- font-style: italic;
-}
-
/* Tables used for displaying choices in challenges. */
table.choices tr td {
vertical-align : top;
}
#nav-logo {
- width:270px;
- height:40px;
- top:5;
- left:10;
- position:absolute;
+ width: 270px;
+ height: 40px;
+ top: 5px;
+ left: 10px;
+ position: absolute;
z-index: 10;
}
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 {
#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;
+ }
+}