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

static/css/styles.css

 /*
  * Fonts
  */
 @font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 400;
   src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.woff) format('woff');
 }
 @font-face {
@@ skipping 83 matching lines @@
   font-size:14px;
 }
 
 h6
 {
   font-size:12px;
 }
 
 #header
 {
-  display: block;
   position: fixed;
-  background-color: #ffffff;
+  background-color: #fff;
   width: 100%;
-  top: 0;
-  left: 0;
-  box-shadow: 0 0 12px rgba(0,0,0, 0.09);
+  top: 0px;
+  left: 0px;
+  box-shadow: 0px 0px 12px rgba(0,0,0, 0.09);
   z-index: 10000;
-}
-
-#header.top
-{
-  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.

+  text-align: right;
+}
+
+#header .content-block
+{
+  position: relative;
+  padding: 15px 10px;
+  min-height: 32px;
+}
+
+#header.top .content-block
+{
+  padding: 25px 10px;
 }
 
 #logo
 {
-  float: left;
-  margin: 5px 0;
+  position: absolute;
+  top: 7px;
+  left: 10px;
+}
+
+#header.top #logo
+{
+  top: 17px;
+}
+
+#header .menu-button
+{
+  margin: 0px 0px 0px 25px;
 }
 
 #menu
 {
-  float: right;
+  display: inline;
   vertical-align: middle;
 }
 
 .assistive-text
 {
-  position: absolute;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 }
 
 .menu-list
 {
+  display: inline;
+  margin: 0px;
+  font-size: 15px;
   list-style: none;
-  margin: 0;
-  padding: 22px 0;
-  font-size: 14px;
-  float: right;
 }
 
 .menu-list li
 {
-  position: relative;
+  display: inline;
+  font-weight: bold;
   white-space: nowrap;
-  display: block;
-  font-size: 15px;
-  font-weight: bold;
-  outline-width: 0;
-  float: left;
-  margin-right: 1px;
 }
 
 .menu-list li a
 {
   color: #979797;
   padding: 0 10px;
 }
 
 .menu-list li:hover > a,
 .menu-list li.current-menu-item > a
 {
   color: #373737;
 }
 
-.menu-button
-{
-  float: right;
-  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.

+#header-hamburger
 {
   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;
+#header-hamburger:hover .icon-bar,
+#header-hamburger:focus .icon-bar,
+#header-hamburger:active .icon-bar
+{
+  background-color: #000;
+}
+
+
+.icon-bar
+{
   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 {
+  background-color: #888;
+}
+
+.icon-bar+.icon-bar
+{
   margin-top: 4px;
 }
 
 #content:before,
 #content:after,
-#header:before,
-#header:after,
 .columns-container:before,
 .columns-container:after
 {
   content: " ";
   display: table;
 }
 
 #content:after,
-#header:after,
 .columns-container:after
 {
   clear: both;
 }
 
 #footer
 {
   color: #666;
   background-color: #252525;
   padding-top: 30px;
@@ skipping 564 matching lines @@
 .why-work-here-button:focus
 {
   background-color: #333;
 }
 
 
 @media (max-width: 768px)
 {
   body
   {
-    padding-top: 64px;
+    padding-top: 50px;
+  }
+
+  #header .content-block,
+  #header.top .content-block
+  {
+    padding: 9px 10px;
+  }
+
+  #header.top #logo
+  {
+    top: 7px;
   }
 
   #logo > img
   {
-    height: 34px
+    height: 34px;
   }
 
   #menu
   {
     display: none;
-    float: none;
   }
 
   #menu.open
   {
     display: block;
   }
 
-  #header-hamberger
-  {
+  #header-hamburger
+  {
+    position: absolute;
+    top: 9px;
+    right: 10px;
     display: block;
-    float: right;
-    margin: 5px -5px 0 5px;
+    padding: 0px;
+    margin: 0px 5px;
     background: none;
-    padding: 0 10px;
   }
 
   .menu-list
   {
-    padding: 0;
-    float: none;
-    clear: both;
+    margin-top: 45px;
+    padding: 0px;
     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
+    margin: 0px;
+    padding: 10px;
+    font-size: 14px
   }
 
   .menu-button
   {
+    position: absolute;
+    top: 9px;
+    right: 50px;
     height: 32px;
+    padding: 0 10px;
     line-height: 32px;
-    padding: 0 10px;
-    margin: 7px 0;
-    font-size: 13px
+    font-size: 14px;
   }
 
   .columns-container .column
   {
     width: 100%;
     margin-left: 0;
     clear: both;
   }
 
   #press-info .sidebar-left
   {
     text-align: inherit;
   }
 
   #releases li > *
   {
     display: block;
   }
 
   .no-mobile
   {
     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;
   }
 
   #panels-openings
   {
     margin-top: -40px;
   }
 }