Merge pull request #12 from fmichonneau/site-update

Update CSS to go with the SWC site template update
HPC-workshops · Mar 2, 2015 · e8b726e · e8b726e
2 parents 843999c + ec38fb6
commit e8b726e
Show file tree

Hide file tree

Showing 2 changed files with 161 additions and 79 deletions.
diff --git a/css/bootstrap/bootstrap.css b/css/bootstrap/bootstrap.css
diff --git a/css/swc.css b/css/swc.css
@@ -10,7 +10,6 @@ h1, h2 {
     margin-bottom: 10px;
 }
 
-
 h1.title {
     margin: 40px 0px;
 }
@@ -19,6 +18,10 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
     color: inherit;
 }
 
+h2 code, h3 code, h4 code, h5 code, h6 code {
+    font-size: inherit;
+}
+
 /* Objectives, Callout Box and Challenges */
 .objectives, .keypoints, .callout, .challenge {
     margin: 1em 0;
@@ -98,11 +101,13 @@ blockquote {
     margin: 1em;
     padding: 1em 1em .5em 1em;
     width: 90%;
+    font-size: inherit;
 }
 
 /* Citation for testimonial quote. */
 blockquote.testimonial cite {
     font-style: italic;
+    font-size: inherit;
 }
 
 /* Main body of pages. */
@@ -157,80 +162,120 @@ pre.error {
 /* Override Bootstrap CSS                 */
 /*----------------------------------------*/
 
-blockquote p {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
+
+/* navbar */
+.navbar {
+    min-height: 85px;
+    margin-bottom: 0;
 }
 
-blockquote h2{
-   margin-top: 0px;
+.navbar-nav {
+  margin: 15px 10px 0px 0px;
 }
 
-/* readability: darken the alert colour for contrast with background */
+#swc-navbar {
+    border-top: 5px solid #2b3990;
+    width: 100%;
+    background:  #d6d6d6;
+    border-bottom: 1px solid #CCC;
+}
 
-.alert {
-    color: rgb(0, 0, 0);
+.navbar-brand {
+   position: absolute;
+   padding-top: 7px;
 }
-/* Container for page contents. */
 
-.container {
-    background-color: white;
+.navbar-brand img {
+    width: 250px;
+    height: 50px;
 }
 
-.container-full-width {
-	max-width: none;
+#swc-navbar-search {
+  background-color: #ffffff;
+  color: #666666;
+  border-color:#2b3990;
+  width: 150px;
 }
 
-.container .jumbotron {
-    padding: 20px;
+.navbar-default .navbar-nav > li > a {
+   color: #20267D;
 }
 
-.navbar .container {
-    background-color: inherit;
+.navbar-nav li {
+    margin-right: -7px;
+    margin-left: -7px;
 }
 
-.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;
+.navbar-nav .navbar {
+    diplay: inline-block;
+    float: none;
 }
 
-code {
-    color: #333333;
+.navbar .navbar-collapse {
+    text-align: center;
 }
 
-.navbar-inverse .navbar-inner {
-    background-color: #20267D;
-    background-image: none;
-    border-color: #20267D;
+.navbar-nav .nav-collapse .nav > li > a,
+.navbar-nav .nav-collapse .dropdown-menu a {
+  color: #2b3990;
+  text-align: center;
 }
-.navbar-inverse .nav .active > a,
-.navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
+
+.navbar-nav .nav .active > a,
+.navbar-nav .nav .active > a:hover, .navbar-nav .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 {
+
+.navbar-nav .nav li.dropdown.open > .dropdown-toggle,
+.navbar-nav .nav li.dropdown.active > .dropdown-toggle,
+.navbar-nav .nav li.dropdown.open.active > .dropdown-toggle {
     color: #ffffff;
-    background-color: #20267D;
+     background-color: #20267D;
 }
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret {
+.navbar-nav .nav li.dropdown.active > .dropdown-toggle .caret {
     border-top-color: #999999;
     border-bottom-color: #999999;
 }
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
+.navbar-nav .nav li.dropdown.open > .dropdown-toggle .caret {
     border-top-color: #ffffff;
     border-bottom-color: #ffffff;
 }
 
+
+
+
+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);
+}
+
+
+/* Container for page contents. */
+.container-full-width {
+	max-width: none;
+}
+
+.container .jumbotron {
+    padding: 20px;
+}
+
+code {
+    color: #333333;
+}
+
+
 /* Top banner of every page. */
 div.banner {
 	background-color: #FFFFFF;
@@ -292,16 +337,6 @@ div.mainmenu {
     height: 30px
 }
 
-#menubar {
-    float: left;
-    margin-top: 4px;
-}
-
-#searchbar {
-    float: right;
-    margin-right: 20px;
-}
-
 /* Narration for audio-only lectures. */
 div.narration {
     text-align: center;
@@ -447,6 +482,10 @@ section.content {
     background: white;
 }
 
+dd {
+    margin-left: 10px;
+}
+
 .header.home {
     background: url(../img/header.png) no-repeat center center;
     background-attachment: fixed;
@@ -498,15 +537,6 @@ table tbody > tr:nth-of-type(2n+1) {
     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;
@@ -549,33 +579,34 @@ a:hover {
 }
 
 footer {
-    background:#2b3990;
-    padding:20px 0;
+    background: #2b3990;
+    padding: 20px 0;
     font-size: 10pt;
-    margin-top:10px;
+    margin-top: 10px;
 }
 
 footer a, footer a:hover{
     color:#FFF;
     padding-left: 10px;
 }
 
-footer .container .links{
+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;
+    min-height: 40px;
+    padding: 20px 0px 0px 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;
+   border-top: 1px solid #A6A6A6;
     text-align: right;
 }
 
@@ -652,7 +683,7 @@ div.chapter h2 {
     width: 100%;
     margin: 0 auto;
     white-space: nowrap;
-    z-index: 10;
+    z-index: 99999;
 }
 #github-ribbon a:hover {
     background: #600;
@@ -673,11 +704,65 @@ div.chapter h2 {
     top: auto;
 }
 
+/* Collapse navbar */
+@media (max-width: 993px) {
+    .navbar-header {
+        float: none;
+	min-height: 80px;
+    }
+    .navbar-left,.navbar-right {
+        float: none !important;
+    }
+    .navbar-toggle {
+        display: block;
+	background-color: #2b3990;
+	margin-top: 22px;
+	margin-right: 100px;
+    }
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+    .navbar-fixed-top {
+		top: 0;
+		border-width: 0 0 1px;
+	}
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+    .navbar-nav {
+        float: none!important;
+    }
+    .navbar-nav>li {
+        float: none;
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+    .collapse.in{
+  		display:block !important;
+	}
+}
+
+@media (max-width: 600px) {
+    .navbar-toggle {
+	margin-right: 20px;
+    }
+    .navbar-brand img {
+	width: 180px;
+	height: 36px;
+	margin-top: 10px
+    }
+    footer .container .links {
+	background:url('../img/software-carpentry-banner-white.png') no-repeat;
+	background-size: 180px;
+	background-position: 0;
+    }
+}
+
 /* GitHub ribbon breaking point */
 @media screen and (min-width: 600px) {
-    .navbar .btn-navbar {
-        margin-right: 150px;
-    }
     #github-ribbon {
         position: absolute;
         display: block;
@@ -686,16 +771,13 @@ div.chapter h2 {
         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;
+        right: -40px;
         transform: rotate(45deg);
         -webkit-transform: rotate(45deg);
         box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);