css

static/css/labs.css

@@ -1,5 +1,94 @@
 BODY {
-  padding-top: 50px;
+  padding-top: 75px;
+/*  font-family: "Work Sans","Source Sans Pro","Open Sans","Helvetica Neue","Helvetica","Tahoma","Geneva","Arial",sans-serif;
+*/  
+  letter-spacing: +.02rem;
+  font-weight: 300;
+  font-size: 1.8rem;
+  line-height: 2;
+  color: #4d5363;
+}
+
+code {
+  color: f00;
+  font-size: 1.7rem;
+}
+
+h1 {
+  text-align: center; 
+  font-size: 5.5rem;
+
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Lato","Open Sans","Helvetica","Tahoma","Geneva","Arial",sans-serif;
+  text-rendering: optimizeLegibility;
+  line-height: 150%;
+  letter-spacing: 0;
+}
+
+h2 {
+  font-size: 3.5rem;
+}
+
+h3 {
+  font-size: 2.6rem;
+}
+
+h4 {
+  font-size: 2.2rem;
+}
+
+img{
+  max-width: 500px;
+  height: auto;
+}
+
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+pre {
+  font-size: 1.7rem;
+  line-height: 1.7;
+}
+
+.navbar {
+
+  padding-left: 0px;
+  padding-right: 20px;
+/*background-color: #ba3232;
+  border-right: 20px solid #fff;
+*/letter-spacing: +.05rem;
+  font-weight: bold;
+  font-size: 2rem;
+}
+
+a:link {
+  color: #e00;
+}
+
+a:visited {
+  color: #e00;
+}
+
+a:hover {
+  color: #000;
+}
+
+.navbar a:link{
+  color: #ba3232;
+  font-size: 4rem;
+}
+
+.navbar a:visited {
+  color: #ba3232;
+  font-size: 4rem;
+}
+
+.navbar a:hover {
+  color: #ba3232;
+  font-size: 4rem;
 }
 
 .sidebar-toggle {
@@ -8,20 +97,28 @@ BODY {
 }
 
 .sidebar {
+/*padding-top: 100px;
+*/margin-top: 5px;
   display: none;
   position: fixed;
   top: 51px;
   bottom: 0;
   left: 0;
   z-index: 1050;
-  padding: 20px;
+  padding-left: 20px;
   overflow-x: hidden;
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-  background-color: #f8f8f8;
+  background-color: #292929;
   border-right: 1px solid #eee;
+  letter-spacing: +.05rem;
+  font-weight: 300;
+  font-size: 1.55rem;
+  line-height: 1.8;
 }
+
 .sidebar.active {
   display: block;
+
 }
 @media (min-width: 768px) {
   .sidebar {
@@ -29,10 +126,16 @@ BODY {
   }
 }
 
+.sidebar a {
+  display: block;
+  padding: 10px 20px;
+  text-decoration: none;
+  color: #ccc;
+}
+
 .sidebar ul {
   list-style-type: none;
   padding: 0;
-  background-color: #f8f8f8;
 }
 
 .sidebar > ul {
@@ -41,33 +144,33 @@ BODY {
   margin-left: -20px;
 }
 
-.sidebar a {
-  display: block;
-  padding: 10px 20px;
-  text-decoration: none;
-  color: #777;
-}
-
 .sidebar .sub-item > a{
   padding-left: 40px;
+  background-color: #111;
 }
 
 .sidebar .subsub-item > a{
   padding-left: 60px;
+  background-color: #111;
 }
 
 .sidebar .subsubsub-item > a{
   padding-left: 80px;
+  background-color: #111;
 }
 
 .sidebar .active > a {
   color: #fff;
-  background-color: #428bca;
+  background-color: #ba3232;
+  font-weight: bold;
+
 }
 
 .sidebar a:hover {
-  color: #555;
+  color: #fff;
-  background-color: #eee;
+/*  background-color: #ba3232;
+*/  font-weight: bold;
+
 }
 
 .main {
@@ -86,6 +189,7 @@ BODY {
 .property-name {
     font-weight: bold;
 }
+
 .bs-callout {
     padding: 20px;
     margin: 20px 0;