Issue 4461 - update Eyeo logo

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 102 matching lines @@
 
 #header .content-block
 {
   position: relative;
   padding: 15px 10px;
   min-height: 32px;
 }
 
 #header.top .content-block
 {
-  padding: 25px 10px;
+  padding: 20px 10px;
 }
 
 #logo
 {
   position: absolute;
-  top: 7px;
   left: 10px;
-}
-
-#header.top #logo
-{
-  top: 17px;
+  top: 50%;
+  margin-top: -20px;
 }
 
 #header .menu-button
 {
-  margin: 0px 0px 0px 25px;
+  margin: 0px 0px 0px 20px;
 }
 
 #menu
 {
   display: inline;
   vertical-align: middle;
 }
 
 .assistive-text
 {
@@ skipping 15 matching lines @@
 .menu-list li
 {
   display: inline;
   font-weight: bold;
   white-space: nowrap;
 }
 
 .menu-list li a
 {
   color: #979797;
-  padding: 0 10px;
+  padding: 0 8px;
 }
 
 .menu-list li:hover > a,
 .menu-list li.current-menu-item > a
 {
   color: #373737;
 }
 
 #header-hamburger
 {
@@ skipping 629 matching lines @@
   #header.top .content-block
   {
     padding: 9px 10px;
   }
 
   #header.top #logo
   {
     top: 7px;
   }
 
   #logo > img

[juliandoucette, 2016/09/27 13:44:56]

It's not centered properly on mobile (probably a side effect of the last
change).

I suggest we:

/* set the height in CSS instead of HTML */

#logo
{
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -20px;
  height: 40px;
}

/* set the height of the #logo instead of the #logo > img */

#logo img
{
  height: 100%;
}

/* change the height on mobile to 30px */

@media(max-width: 768px)
{
  #logo
  {
    height: 30px;
    margin-top: -15px;
  }
}

PS: This would be easier if I could submit a patchset.

[juliandoucette, 2016/09/27 13:55:51]

Done.

(Also removed #logo.top edge case bug on mobile.)

   {
-    height: 34px;
+    height: 23px;
+    margin-top: 6px;
   }
 
   #menu
   {
     display: none;
   }
 
   #menu.open
   {
     display: block;
@@ skipping 87 matching lines @@
     padding-right: .1em;
     border-right-width: 1px;
     border-right-width: 1px;
   }
 
   #panels-openings
   {
     margin-top: -40px;
   }
 }