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

static/css/styles.css

Index: static/css/styles.css
===================================================================
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -97,104 +97,111 @@
 h6
 {
   font-size:12px;
 }
 
 #header
 {
   display: block;
-  position: absolute;
+  position: fixed;
   background-color: #ffffff;
   width: 100%;
   top: 0;
   left: 0;
   box-shadow: 0 0 12px rgba(0,0,0, 0.09);
   z-index: 10000;
 }
 
-#header.fixed
+#header.top
 {
-  position: fixed;
-}
-
-#header-content
-{
-  display: table;
-  width: 100%;
+  padding: 8px 0;

[saroyanm, 2016/05/19 07:43:39]

Detail: "CSS number values should specify units where possible" according to the
style guide, same goes to the changes below 

[juliandoucette, 2016/05/19 12:01:41]

Good catch. Thanks.

[juliandoucette, 2016/06/16 18:07:44]

Done.

 }
 
 #logo
 {
-  display: table-cell;
-  padding: 13px 0;
-}
-
-#header.fixed #logo
-{
-  padding: 5px 0;
+  float: left;
+  margin: 5px 0;
 }
 
 #menu
 {
-  display: table-cell;
+  float: right;
   vertical-align: middle;
-  width: 100%;
 }
 
 .assistive-text
 {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
 }
 
 .menu-list
 {
   list-style: none;
   margin: 0;
-  padding: 0;
-  min-height: 36px;
+  padding: 22px 0;
   font-size: 14px;
   float: right;
 }
 
 .menu-list li
 {
   position: relative;
   white-space: nowrap;
   display: block;
   font-size: 15px;
   font-weight: bold;
-  line-height: 36px;
   outline-width: 0;
   float: left;
   margin-right: 1px;
 }
 
 .menu-list li a
 {
   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,
 .menu-list li.current-menu-item > a
 {
   color: #373737;
 }
 
 .menu-button
 {
   float: right;
-  margin-left: 25px;
+  margin: 14px 0 14px 25px;
+}
+
+#header-hamberger

[saroyanm, 2016/05/19 07:43:40]

Detail: It's "hamburger", same goes to the styles below

[juliandoucette, 2016/05/19 12:01:44]

Haha, the magic of auto-complete. (Persistent typos).

Good catch. Thanks :).

[juliandoucette, 2016/06/16 18:07:44]

Done.

+{
+  display: none;
+}
+
+#header-hamberger:hover,

[saroyanm, 2016/05/19 07:43:40]

It feels like that this styles are redundant

[juliandoucette, 2016/05/19 12:01:45]

I feel you :(. I'm killing the default button styles in the browser. Maybe I
should just use an anchor instead of a button.

[juliandoucette, 2016/06/16 18:07:44]

Done.

+#header-hamberger:active,
+#header-hamberger:focus
+{
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.icon-bar {

[saroyanm, 2016/05/19 07:43:40]

Maybe you can modify this styles to make it obvious that the menu is clickable,
by using at least :hover

[saroyanm, 2016/05/19 07:43:40]

Detail: According to the style guide "opening braces always go on their own
line"

Same for the styles below.

[juliandoucette, 2016/05/19 12:01:42]

My mistake.

[juliandoucette, 2016/05/19 12:01:44]

Will do.

[juliandoucette, 2016/06/16 18:07:43]

Done.

+  background-color: #888;
+  display: block;

[saroyanm, 2016/05/19 07:43:40]

Detail: According to our style guide colors and typography goes after "Display"
property and "Box model":
https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/...

Same applies to other changes on this page, please use property ordering
specified in the styleguide

[juliandoucette, 2016/05/19 12:01:41]

My mistake.

[juliandoucette, 2016/06/16 18:07:45]

Done.

+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+}
+
+.icon-bar+.icon-bar {
+  margin-top: 4px;
 }
 
 #content:before,
 #content:after,
 #header:before,
 #header:after,
 .columns-container:before,
 .columns-container:after
@@ -780,41 +787,87 @@
 
 .why-work-here-button:hover,
 .why-work-here-button:focus
 {
   background-color: #333;
 }
 
 
-@media (max-width: 750px)
+@media (max-width: 768px)
 {
+  body
+  {
+    padding-top: 64px;
+  }
+
+  #logo > img
+  {
+    height: 34px
+  }
+
+  #menu
+  {
+    display: none;
+    float: none;
+  }
+
+  #menu.open
+  {
+    display: block;
+  }
+
+  #header-hamberger
+  {
+    display: block;
+    float: right;
+    margin: 5px -5px 0 5px;
+    background: none;
+    padding: 0 10px;
+  }
+
+  .menu-list
+  {
+    padding: 0;
+    float: none;
+    clear: both;
+    display: block;
+  }
+
+  .menu-list > li
+  {
+    float: none;
+    display: block;
+    border-top: 1px solid #eee;
+  }
+
+  .menu-list > li > a
+  {
+    padding: 10px ;
+    display: block;
+    margin: 0;
+    font-size: 13px
+  }
+
+  .menu-button
+  {
+    height: 32px;
+    line-height: 32px;
+    padding: 0 10px;
+    margin: 7px 0;
+    font-size: 13px
+  }
+
   .columns-container .column
   {
     width: 100%;
     margin-left: 0;
     clear: both;
   }
 
-  #logo
-  {
-    padding: 5px 0;
-  }
-
-  #menu .menu-list
-  {
-    clear: both;
-    margin-left: -150px;
-  }
-
-  #menu .menu-button
-  {
-    margin-top: 5px;
-  }
-
   #press-info .sidebar-left
   {
     text-align: inherit;
   }
 
   #releases li > *
   {
     display: block;
@@ -825,27 +878,28 @@
     display: none;
   }
 }
 
 @media (min-width: 751px)
 {
   .ui-tabs-nav-vertical
   {
+    float: left;
+    width: 100%;
     padding: .2em .1em .2em .2em;
-    float: left; width: 100%;
     border-bottom: none;
   }
   .ui-tabs-nav-vertical li
   {
     clear: left;
     width: 100%;
+    margin: 0 -1px .2em 0;

[saroyanm, 2016/05/19 07:43:40]

Is the change a leftover ?

[juliandoucette, 2016/05/19 12:01:41]

I changed the order to match the style guide.

[saroyanm, 2016/05/23 12:39:20]

Borders and margins are part of box model. I think "clear" can go below.

[juliandoucette, 2016/06/16 18:07:44]

Done.

     border-bottom-width: 1px !important;
     border-left: 1px solid #E1E1E1 !important;
-    margin: 0 -1px .2em 0;
   }
   .ui-tabs-nav-vertical li.ui-tabs-active
   {
     padding-bottom: 0;
     padding-right: .1em;
     border-right-width: 1px;
     border-right-width: 1px;
   }