Added dark colors to darktheme + max width

Added dark colors to darktheme.
Set max width to 1284.
Added div class header.

assets/css/darktheme.css

@@ -36,3 +36,46 @@ body {
   background-color: inherit;
   color: inherit;
 }
+/***** Side menu *****/
+.header h2 {
+   color: #666;
+}
+
+.content-subhead {
+    color: #888;
+}
+
+#menu {
+    background: #191818;
+}
+
+#menu a {
+    color: #999;
+}
+
+#menu .pure-menu li a:hover,
+#menu .pure-menu li a:focus {
+    background: #333;
+}
+
+#menu .pure-menu ul,
+#menu .pure-menu .menu-item-divided {
+    border-top: 1px solid #333;
+}
+
+.menu-link {
+    background: #000;
+    background: rgba(0,0,0,0.7);
+}
+
+.menu-link:hover,
+.menu-link:focus {
+    background: #000;
+}
+
+.menu-link span,
+.menu-link span:before,
+.menu-link span:after {
+    background-color: #fff;
+}
+/***** Side menu end *****/

assets/css/side-menu.css

@@ -41,19 +41,19 @@ The content `<div>` is where all your content goes.
 .content {
     margin: 0 auto;
     padding: 0 2em;
-    max-width: 800px;
+    max-width: 1284px;
     margin-bottom: 50px;
     line-height: 1.6em;
 }
 
 .header {
     font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    max-width: 768px;
+    max-width: 1284px;
     margin: 0 auto;
     padding: 1em;
     text-align: center;
-    border-bottom: 1px solid #eee;
+/*    border-bottom: 1px solid #eee;
-    background: #fff;
+    background: #fff;*/
     letter-spacing: 0.05em;
 }
     .header h1 {
@@ -66,14 +66,14 @@ The content `<div>` is where all your content goes.
         font-weight: 100;
         line-height: 1.5;
         margin: 0;
-        color: #666;
+        /* color: #666; */
         letter-spacing: -0.02em;
     }
 
 .content-subhead {
     margin: 50px 0 20px 0;
     font-weight: 300;
-    color: #888;
+    /* color: #888; */
 }
 
 /*
@@ -89,9 +89,13 @@ appears on the left side of the page.
     left: 0;
     bottom: 0;
     z-index: 1000; /* so the menu or its navicon stays above all content */
-    background: #191818;
+    background: #f5f5f5; 
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    -moz-transition:all 200ms ease-in;
+    -webkit-transition:all 200ms ease-in;
+    -o-transition:all 200ms ease-in;
+    transition:all 200ms ease-in;
 }
     /*
     All anchors inside the menu should be styled like this.
@@ -120,14 +124,14 @@ appears on the left side of the page.
     */
     #menu .pure-menu ul,
     #menu .pure-menu .menu-item-divided {
-        border-top: 1px solid #333;
+        border-top: 1px solid #ececec;
     }
         /*
         Change color of the anchor links on hover/focus.
         */
         #menu .pure-menu li a:hover,
         #menu .pure-menu li a:focus {
-            background: #333;
+            background: #ececec;
         }
 
     /*
@@ -148,9 +152,13 @@ appears on the left side of the page.
     This styles the menu heading.
     */
     #menu .pure-menu-heading {
-        font-size: 100%;
+        font-size: 125%;
+        font-weight: 300;
+        letter-spacing: 0.1em;
         color: #fff;
-        margin: 0;
+        margin-top: 0;
+        padding: 0.5em 0.8em;
+        text-transform: uppercase;
     }
 
 /* -- Dynamic Button For Responsive Menu -------------------------------------*/

src/invidious/views/template.ecr

@@ -112,6 +112,7 @@
       <div class="pure-g">
         <div class="pure-u-1 pure-u-md-2-24"></div>
         <div class="pure-u-1 pure-u-md-20-24">
+          <div class="header">
           <div class="pure-g navbar h-box">
             <div class="pure-u-1 pure-u-md-4-24">
               <a href="/" class="index-link pure-menu-heading">Invidious</a>
@@ -180,7 +181,10 @@
             <% end %>
             </div>
           </div>
+          </div>
+          <div class="content">
           <%= content %>
+          </div>
           <div class="footer">
             <div class="pure-g">
               <div class="pure-u-1 pure-u-md-1-3">