Updated some styles

assets/styles/drake.scss

@@ -5,7 +5,7 @@ $highlight-color-dark: darken($highlight-color, 10%);
 
 body{
   padding-top: calc($navbar-height + 15px);
-  background: white;
+  background: #eee;
 }
 
 a{
@@ -23,6 +23,10 @@ hr{
 
 #main-wrapper{
   max-width: 1120px;
+  padding: 15px 25px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 #main-nav{
@@ -31,7 +35,10 @@ hr{
   left: 0;
   width: 100%;
   height: $navbar-height;
+  background: $highlight-color;
   border-bottom: 1px solid #999;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 10;
 
   ul{
     display: inline-block;
@@ -48,16 +55,20 @@ hr{
   h3{
     display: inline-block;
     margin-top: 14px;
-    margin-left: 10px;
+    margin-left: 25px;
     margin-bottom: 0;
-    color: black;
+    color: white;
     font-size: 2.5rem;
   }
 
   li > a{
+    color: white;
     font-size: 2rem;
     font-weight: bold;
-    text-decoration: none;
+
+    &:hover{
+      color: #eee;
+    }
   }
 }
 
@@ -90,6 +101,7 @@ hr{
   #sidebar{
     background: #eee;
     border: 1px solid #666;
+    border-radius: 5px;
 
     div:not(:last-child){
       border-bottom: 1px solid #666;
@@ -144,3 +156,26 @@ hr{
   max-width: 100%;
   min-height: 250px;
 }
+
+#video-script{
+  .script{
+    h1{
+      font-size: 4rem;
+    }
+    h2{
+      font-size: 3.5rem;
+    }
+    h3{
+      font-size: 3rem;
+    }
+    h4{
+      font-size: 2.5rem;
+    }
+    h5{
+      font-size: 2.25rem;
+    }
+    h6{
+      font-size: 2rem;
+    }
+  }
+}

views/video/view.erb

@@ -32,10 +32,12 @@
 
 <div id="video-script" class="row">
   <div class="twelve columns">
-    <h3>Video script</h3>
+    <h2>Video script</h2>
 
     <hr>
 
-    <%= video.parseScript() %>
+    <div class="script">
+      <%= video.parseScript() %>
+    </div>
   </div>
 </div>