Issue 4462 - Update styles on Eyeo.com to match new logo

static/css/styles.css

 /*
  * Fonts
  */
 
 @font-face
 {
   font-family: 'Source Sans Pro';
   font-weight: 300;
   font-style: normal;
   font-stretch: normal;
-  src: url('../fonts/SourceSansPro-Light.eot') format('embedded-opentype'),

[juliandoucette, 2017/01/11 14:22:46]

NIT: I should prefer local(...) to url(...)

[saroyanm, 2017/01/12 14:00:19]

I'll suggest to use locale approach to prevent local fonts from being used:
https://hg.adblockplus.org/web.adblockbrowser.org/file/tip/static/css/main.cs...


For reference you can check Paul Irishi smiley approach:
https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#s...

[juliandoucette, 2017/01/12 15:05:55]

We will use the local font now and re-investigate this issue later.

[juliandoucette, 2017/01/12 15:05:56]

Done.

+  src: local('Source Sans Pro Light'),
+    local('SourceSansPro-Light'),
+    url('../fonts/SourceSansPro-Light.eot') format('embedded-opentype'),
     url('../fonts/SourceSansPro-Light.ttf.woff2') format('woff2'),
     url('../fonts/SourceSansPro-Light.otf.woff') format('woff'),
     url('../fonts/SourceSansPro-Light.otf') format('opentype'),
     url('../fonts/SourceSansPro-Light.ttf') format('truetype');
 }
 
 @font-face
 {
   font-family: 'Source Sans Pro';
   font-weight: 300;
   font-style: italic;
   font-stretch: normal;
-  src: url('../fonts/SourceSansPro-LightIt.eot') format('embedded-opentype'),
+  src: local('Source Sans Pro Light Italic'),
+    local('SourceSansPro-LightIt'),
+    url('../fonts/SourceSansPro-LightIt.eot') format('embedded-opentype'),
     url('../fonts/SourceSansPro-LightIt.ttf.woff2') format('woff2'),
     url('../fonts/SourceSansPro-LightIt.otf.woff') format('woff'),
     url('../fonts/SourceSansPro-LightIt.otf') format('opentype'),
     url('../fonts/SourceSansPro-LightIt.ttf') format('truetype');
 }
 
 @font-face
 {
   font-family: 'Source Sans Pro';
   font-weight: 400;
   font-style: normal;
   font-stretch: normal;
-  src: url('../fonts/SourceSansPro-Regular.eot') format('embedded-opentype'),
+  src: local('Source Sans Pro'),
+    local('SourceSansPro-Regular'),
+    url('../fonts/SourceSansPro-Regular.eot') format('embedded-opentype'),
     url('../fonts/SourceSansPro-Regular.ttf.woff2') format('woff2'),
     url('../fonts/SourceSansPro-Regular.otf.woff') format('woff'),
     url('../fonts/SourceSansPro-Regular.otf') format('opentype'),
     url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
 }
 
 /*
  * General layout
  */
 
 html

[juliandoucette, 2017/01/11 14:22:48]

Note: I moved font and color to html because html is the ":root" element from
which styles are inherited first.

[juliandoucette, 2017/01/12 15:05:55]

Acknowledged.

 {
   font-family: 'Source Sans Pro', sans-serif;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.333333;
   color: #161616;
 }
 
 body
 {
   padding: 84px 0 0 0;

[juliandoucette, 2017/01/11 14:22:49]

Note: The header was larger when scrolled top in the screenshots.

[saroyanm, 2017/01/12 14:00:19]

Deatail: please declare units.

[juliandoucette, 2017/01/12 15:05:57]

Acknowledged.

   margin: 0;
 }
 
 a
 {
   font-weight: 400;

[juliandoucette, 2017/01/11 14:22:46]

Note: There is no Source Sans Pro 500. 400 achieves the same effect when 300 is
default.

[juliandoucette, 2017/01/12 15:05:55]

Acknowledged.

   text-decoration: none;
   color: #161616;
 }
 
 a:hover
 {
   text-decoration: underline;
 }
 
 img
@@ skipping 51 matching lines @@
   text-transform: uppercase;
 }
 
 #header .content-block
 {
   position: relative;
   padding: 10px;
   min-height: 32px;
 }
 
 #header.top

[juliandoucette, 2017/01/11 14:22:48]

Note: This was a personal preference. (I removed the shadow on the header when
scrolled to top)

[juliandoucette, 2017/01/12 15:05:57]

Acknowledged.

 {
   box-shadow: none;
 }
 
 #header.top .content-block
 {
   padding: 22px 10px;

[juliandoucette, 2017/01/11 14:22:47]

Note: This makes the header slightly larger when scrolled top.

[juliandoucette, 2017/01/12 15:05:57]

Acknowledged.

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

[juliandoucette, 2017/01/11 14:22:46]

IGNORE: These changes don't make sense. I will revert them in my next patchset.

[saroyanm, 2017/01/12 14:00:19]

Noted.

[juliandoucette, 2017/01/12 15:05:57]

Done.

-  height: 30px;
+  margin-top: -20px;
+  height: 40px;
 }
 
 #logo img
 {
   height: 100%;
 }
 
 #header .menu-button
 {
-  margin: 0px 0px 0px 20px;
+  margin: 0px 5px 0px 20px;
 }
 
 #menu
 {
   display: inline;
   vertical-align: middle;
 }
 
 .assistive-text
 {
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 }
 
 .menu-list
 {
   display: inline;
   margin: 0px;
   font-size: 16px;

[juliandoucette, 2017/01/11 14:22:49]

Note: Matching the screenshots.

[juliandoucette, 2017/01/12 15:05:55]

Acknowledged.

There was a bug with overlapping logo and menu text. This was resolved by
dropping the word "US" from the text.

   list-style: none;
 }
 
 .menu-list li
 {
   display: inline;
   font-weight: bold;
   white-space: nowrap;
 }
 
@@ skipping 16 matching lines @@
 }
 
 .icon-bar
 {
   display: block;
   width: 22px;
   height: 2px;
   background-color: #fff;
 }
 
-#header-hamburger:hover .icon-bar

[juliandoucette, 2017/01/11 14:22:49]

Note: Making the hamburger button the same color and not rounded like the others
(the changes in the ticket alone broke this button).

[juliandoucette, 2017/01/12 15:05:55]

Acknowledged.

+#header-hamburger:hover .icon-bar,
+#header-hamburger:active .icon-bar,
+#header-hamburger:focus .icon-bar
 {
   background-color: #161616;
 }
 
 .icon-bar+.icon-bar
 {
   margin-top: 4px;
 }
 
 #content:before,
@@ skipping 78 matching lines @@
 .content-block,
 .page-title h1
 {
   max-width: 1080px;
   margin: 0 auto;
 }
 
 .heading
 {
   margin-bottom: 20px;
   font-size: 28px;

[juliandoucette, 2017/01/11 14:22:47]

Note: The ticket asked for 48px. This size was too big for small mobile devices
and broke the line on the jobs pages. As a result, I changed it to 28px. I think
this size looks good.

[juliandoucette, 2017/01/12 15:05:56]

Acknowledged.

We may check with Christiane after.

   font-weight: 400;
 }
 
 .heading span
 {
   padding: 0;
   padding-right: 10px;
   background-color: #fff;
 }
 
 .centered
 {
   text-align: center;
 }
 
 .centered span
 {
   padding-left: 10px;
 }
 
 button, .button, .menu-button

[juliandoucette, 2017/01/11 17:51:28]

BUG: This change breaks the gray button on jobs pages.

[juliandoucette, 2017/01/12 15:05:55]

Done.

 {
   display: inline-block;
   padding: 0px 20px;
   background-color: #161616;
   border: 2px solid #161616;

[juliandoucette, 2017/01/11 14:22:48]

Note: Added a border by default (You can't see it because the background is the
same color) to reserve the space (to prevent things from moving when you can see
the border on hover as the background changes)

[juliandoucette, 2017/01/12 15:05:56]

Acknowledged.

   border-radius: 0px;
   color: #fff;
   font-size: 14px;
   font-weight: 400;
   line-height: 36px;
   white-space: nowrap;
   cursor: pointer;
 }
 
 button:hover,
 button:focus,
 .button:hover,
 .button:focus,
 .menu-button:hover,
 .menu-button:focus
 {
   background-color: #fff;

[juliandoucette, 2017/01/11 14:22:49]

Note: Removed text-decoration on hover (I think this makes sense)

[juliandoucette, 2017/01/12 15:05:56]

Acknowledged.

   color: #161616;
   text-decoration: none;
 }
 
 .page-title
 {
   background-color: #f2f2f2;
   padding-top: 25px;
   padding-bottom: 25px;
   margin-bottom: 40px;
@@ skipping 33 matching lines @@
   margin-bottom: 25px;
 }
 
 #our-work
 {
   padding-top: 50px;
   padding-bottom: 50px;
   background-color: #f2f2f2;
 }
 
 #our-work h3

[juliandoucette, 2017/01/11 14:22:47]

Note: The text in these headers was uppercase in the screenshots

[juliandoucette, 2017/01/12 15:05:56]

Acknowledged.

 {
   text-transform: uppercase;
 }
 
 #media
 {
   margin-top: 25px;
 }
 
 #our-work .heading span
@@ skipping 173 matching lines @@
   border-top: 1px solid #E1E1E1;
 }
 
 .ui-tabs-nav li.ui-tabs-active,
 .ui-tabs-nav li:hover
 {
   background-color: #fff;
   border-top: 2px solid #161616;
   border-bottom: none;
   position: relative;
   top: 1px;

[juliandoucette, 2017/01/11 14:22:48]

Note: I think 1px looks better when black.

[juliandoucette, 2017/01/12 15:05:55]

Acknowledged.

 }
 

[juliandoucette, 2017/01/11 14:22:48]

Note: I took a little creative license here. I made the hover/active vertical
tab black instead of awkwardly pushing the other tabs down like it did before. I
think this makes sense in the scope of this ticket because we were asked to make
these tabs black and not rounded.

[juliandoucette, 2017/01/12 15:05:55]

Acknowledged.

 .ui-tabs-nav-vertical li.ui-tabs-active,
 .ui-tabs-nav-vertical li:hover
 {
   border: 1px solid #161616;
   background-color: #161616;
   top: 0px;
 }
 
 .ui-tabs-nav-vertical li.ui-tabs-active a,
 .ui-tabs-nav-vertical li:hover a
@@ skipping 191 matching lines @@
 }
 
 #fair-company-logo
 {
   float: right;
 }
 
 .why-work-here-button
 {
   background-color: #747474;
+  border-color: #747474;
 }
 
 .why-work-here-button:hover,
+.why-work-here-button:active,
 .why-work-here-button:focus
 {
-  background-color: #333;
+  background-color: #fff;
+  border-color: #747474;
+  color: #747474;
 }
 
 
 @media (max-width: 768px)
 {
   body
   {
     padding-top: 50px;
   }
 
@@ skipping 13 matching lines @@
   #menu
   {
     display: none;
   }
 
   #menu.open
   {
     display: block;
   }
 
   #header-hamburger

[juliandoucette, 2017/01/11 14:22:48]

Note: Fixing broken hamburger (see comments above)

[juliandoucette, 2017/01/12 15:05:56]

Done.

Fixed bug between Firefox and Chrome (padding)

   {
     position: absolute;
     top: 7px;
-    right: 1px;
+    right: 6px;
     display: block;
-    padding: 8px 0px;
-    margin: 0px 5px;
+    height: 36px;
+    width: 36px;
+    margin: 0;
+    padding: 0px 5px;
   }
 
   .menu-list
   {
     margin-top: 45px;
     padding: 0px;
     display: block;
   }
 
   .menu-list > li
   {
     display: block;
     border-top: 1px solid #eee;
   }
 
   .menu-list > li > a
   {
     display: block;
     margin: 0px;
     padding: 10px;
     font-size: 14px
   }
 
   .menu-button

[juliandoucette, 2017/01/11 14:22:47]

Note: Making a little more space so that everything fits @320px width

[juliandoucette, 2017/01/12 15:05:56]

Done.

   {
     position: absolute;
     top: 7px;
     right: 43px;
     height: 32px;
     padding: 0 6px;
     line-height: 32px;
     font-size: 14px;
   }
 
@@ skipping 28 matching lines @@
     float: left; width: 100%;
     border-bottom: none;
   }
 
   .ui-tabs-nav-vertical li
   {
     clear: left;
     width: 100%;
     margin: 0 -1px .2em 0;
   }
+
   .ui-tabs-nav-vertical li.ui-tabs-active

[juliandoucette, 2017/01/11 14:22:47]

NIT: I should probably space out the rest of these.

[juliandoucette, 2017/01/12 15:05:56]

Acknowledged.

   {
     padding-bottom: 0;
     padding-right: .1em;
     border-right-width: 1px;
     border-right-width: 1px;
   }
 
   #panels-openings
   {
     margin-top: -40px;
   }
 }