Issue 2675 - Implemented responsive header for web.eyeo.com

static/css/styles.css

Index: static/css/styles.css
diff --git a/static/css/styles.css b/static/css/styles.css
index 58dd31179abe67d3a0bebc6fb1fbd2a6cccc2567..6087e6f83bf61a0f552fe2f13221ab16de5dc007 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -99,45 +99,38 @@ h6
   font-size:12px;
 }
 
-#header
+#header 
 {
   display: block;
-  position: absolute;
-  background-color: #ffffff;
+  position: fixed;
+  background: #fff;
   width: 100%;
   top: 0;
   left: 0;
   box-shadow: 0 0 12px rgba(0,0,0, 0.09);
-  z-index: 10000;
+  z-index: 10000;  
 }
 
-#header.fixed
+#header.top 
 {
-  position: fixed;
-}
-
-#header-content
-{
-  display: table;
-  width: 100%;
+  padding: 8px 0;
 }
 
 #logo
 {
-  display: table-cell;
-  padding: 13px 0;
+  float: left;
+  margin: 5px 0;
 }
 
-#header.fixed #logo
+#menu
 {
-  padding: 5px 0;
+  float: right;
+  vertical-align: middle;
 }
 
-#menu
+.collapsed 
 {
-  display: table-cell;
-  vertical-align: middle;
-  width: 100%;
+  display: none;
 }
 
 .assistive-text
@@ -150,8 +143,7 @@ h6
 {
   list-style: none;
   margin: 0;
-  padding: 0;
-  min-height: 36px;
+  padding: 22px 0;
   font-size: 14px;
   float: right;
 }
@@ -163,7 +155,6 @@ h6
   display: block;
   font-size: 15px;
   font-weight: bold;
-  line-height: 36px;
   outline-width: 0;
   float: left;
   margin-right: 1px;
@@ -173,11 +164,6 @@ h6
 {
   color: #979797;
   padding: 0 10px;
-
-  -webkit-transition: all 0.3s ease;
-  -moz-transition: all 0.3s ease;
-  -o-transition: all 0.3s ease;
-  transition: all 0.3s ease;
 }
 
 .menu-list li:hover > a,
@@ -189,7 +175,33 @@ h6
 .menu-button
 {
   float: right;
-  margin-left: 25px;
+  margin: 14px 0 14px 25px;
+}
+
+#header-hamberger
+{
+  display: none;
+}
+
+#header-hamberger:hover,
+#header-hamberger:active,
+#header-hamberger:focus
+{
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.icon-bar {
+  background-color: #888;
+  display: block;
+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+}
+
+.icon-bar+.icon-bar {
+  margin-top: 4px;
 }
 
 #content:before,
@@ -785,8 +797,34 @@ header > *, .content-block
 }
 
 
-@media (max-width: 750px)
+@media (max-width: 768px)
 {
+  body
+  {
+    padding-top: 64px;
+  }
+  
+  #logo > img 
+  {
+    height: 34px
+  }
+  
+  .menu-list
+  {
+    padding: 12px 0;
+  }
+  
+  .menu-item > a 
+  {
+    font-size: 13px
+  }
+  
+  .menu-button
+  {
+    margin: 5px 0 5px 10px;
+    font-size: 13px
+  }
+  
   .columns-container .column
   {
     width: 100%;
@@ -794,35 +832,75 @@ header > *, .content-block
     clear: both;
   }
 
-  #logo
+  #press-info .sidebar-left
   {
-    padding: 5px 0;
+    text-align: inherit;
   }
 
-  #menu .menu-list
+  #releases li > *
+  {
+    display: block;
+  }
+
+  .no-mobile
+  {
+    display: none;
+  }
+}
+
+@media(max-width: 660px)
+{
+  #menu
   {
+    display: block;
+    float: none;
+  }
+
+  #menu
+  {
+    display: none;
+  }
+
+  .menu-list 
+  {
+    padding: 0;
+    float: none;
     clear: both;
-    margin-left: -150px;
+    display: block;
   }
 
-  #menu .menu-button
+  #menu.open
   {
-    margin-top: 5px;
+    display: block;
   }
 
-  #press-info .sidebar-left
+  .menu-list > li
   {
-    text-align: inherit;
+    float: none;
+    display: block;
+    border-top: 1px solid #eee;
   }
 
-  #releases li > *
+  .menu-list > li > a 
   {
+    padding: 10px ;
     display: block;
+    margin: 0;
   }
 
-  .no-mobile
+  .menu-button 
   {
-    display: none;
+    padding: 0 14px;
+    margin: 5px 0;
+  }
+
+  #header-hamberger
+  {
+    display: block;
+    float: right;
+    margin: 5px -5px 0 5px;
+    background: none;
+    padding: 0 10px;
   }
 }