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

static/css/styles.css

Index: static/css/styles.css
===================================================================
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,79 +1,94 @@
 /*
  * 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 {
-  font-family: "Lato";
+
+@font-face
+{
+  font-family: 'Source Sans Pro';
+  font-weight: 300;
   font-style: normal;
-  font-weight: 700;
-  src: local("Lato Bold"), local("Lato-Bold"), url(/fonts/Lato-Bold.woff) format('woff');
+  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.

+    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: "Lato";
+
+@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'),
+    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;
-  src: local("Lato Italic"), local("Lato-Italic"), url(/fonts/Lato-Italic.woff) format('woff');
-}
-@font-face {
-  font-family: "Lato";
-  font-style: italic;
-  font-weight: 700;
-  src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url(/fonts/Lato-BoldItalic.woff) format('woff');
+  font-style: normal;
+  font-stretch: normal;
+  src: 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
 {
-  font-family: Lato, sans-serif;
-  font-size: 14px;
-  line-height: 1.4;
-  color: #747474;
-  padding: 0;
+  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;
-  padding-top: 78px;
 }
 
 a
 {
-  color: #7ac142;
+  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
 {
-  color: #91e64f;
+  text-decoration: underline;
 }
 
 img
 {
   border-width: 0px;
 }
 
 header,
 footer,
 nav
 {
   display: block;
 }
 
-h1, h2, h3, h4, h5, h6
-{
-  color: #333;
-}
-
 h1
 {
   font-size:28px;
 }
 
 h2
 {
   font-size:24px;
@@ -104,37 +119,43 @@
   position: fixed;
   background-color: #fff;
   width: 100%;
   top: 0px;
   left: 0px;
   box-shadow: 0px 0px 12px rgba(0,0,0, 0.09);
   z-index: 10000;
   text-align: right;
+  text-transform: uppercase;
 }
 
 #header .content-block
 {
   position: relative;
-  padding: 15px 10px;
+  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: 20px 10px;
+  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: -20px;
-  height: 40px;
+  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;
 }
 
 #logo img
 {
   height: 100%;
 }
 
 #header .menu-button
@@ -156,17 +177,17 @@
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 }
 
 .menu-list
 {
   display: inline;
   margin: 0px;
-  font-size: 15px;
+  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;
@@ -176,39 +197,36 @@
 {
   color: #979797;
   padding: 0 8px;
 }
 
 .menu-list li:hover > a,
 .menu-list li.current-menu-item > a
 {
-  color: #373737;
+  text-decoration: none;
+  color: #161616;
 }
 
 #header-hamburger
 {
   display: none;
 }
 
-#header-hamburger:hover .icon-bar,
-#header-hamburger:focus .icon-bar,
-#header-hamburger:active .icon-bar
-{
-  background-color: #000;
-}
-
-
 .icon-bar
 {
   display: block;
   width: 22px;
   height: 2px;
-  border-radius: 1px;
-  background-color: #888;
+  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.

+{
+  background-color: #161616;
 }
 
 .icon-bar+.icon-bar
 {
   margin-top: 4px;
 }
 
 #content:before,
@@ -223,18 +241,18 @@
 #content:after,
 .columns-container:after
 {
   clear: both;
 }
 
 #footer
 {
-  color: #666;
-  background-color: #252525;
+  color: #fff;
+  background-color: #2d2d2d;
   padding-top: 30px;
   padding-bottom: 50px;
 }
 
 #footer a
 {
   color: #c2c2c2;
 }
@@ -294,21 +312,19 @@
 .page-title h1
 {
   max-width: 1080px;
   margin: 0 auto;
 }
 
 .heading
 {
-  margin: 0;
   margin-bottom: 20px;
-  border-bottom: 1px solid #E2E2E2;
-  font-weight: normal;
-  height: 0.7em;
+  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;
 }
@@ -321,44 +337,43 @@
 .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;
-  cursor: pointer;
-  background-color: #7ac142;
-  color: #ffffff;
-  border: none;
-  border-radius: 3px;
+  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: bold;
+  font-weight: 400;
   line-height: 36px;
   white-space: nowrap;
-  height: 36px;
-  padding: 0 20px;
+  cursor: pointer;
 }
 
 button:hover,
 button:focus,
 .button:hover,
 .button:focus,
 .menu-button:hover,
 .menu-button:focus
 {
-  background-color: #7FCF42;
-  color: #ffffff;
+  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-image: url(/images/subtlenet2.png);
-  background-color: #e9e9e5;
+  background-color: #f2f2f2;
   padding-top: 25px;
   padding-bottom: 25px;
   margin-bottom: 40px;
 }
 
 .sidebar-left .contact-person
 {
   text-align: right;
@@ -392,34 +407,34 @@
   margin-top: 25px;
   margin-bottom: 25px;
 }
 
 #our-work
 {
   padding-top: 50px;
   padding-bottom: 50px;
-  background-color: #f0f0f0;
+  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
 {
   background-color: #f0f0f0;
 }
 
-#our-work .column
-{
-  text-align: center;
-}
-
 .profile
 {
   text-align: center;
   margin-top: 0px;
   margin-bottom: 30px;
 }
 
 .profile-image,
@@ -566,45 +581,55 @@
 .ui-tabs-nav li
 {
   background-color: #FBFBFB;
   padding: 0;
   background-image: none;
   list-style: none;
   float: left;
   margin: 0;
-
   border: 1px solid #E1E1E1;
   border-left: none;
   border-bottom-color: #CFCFCF;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  -webkit-border-top-left-radius: 3px;
-  -webkit-border-top-right-radius: 3px;
-
   transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -webkit-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
 }
 
+.ui-tabs-nav-vertical li,
 .ui-tabs-nav li:first-child
 {
   border-left: 1px solid #E1E1E1;
   border-top: 1px solid #E1E1E1;
 }
 
 .ui-tabs-nav li.ui-tabs-active,
 .ui-tabs-nav li:hover
 {
   background-color: #fff;
-  border-top: 2px solid #7ac142;
+  border-top: 2px solid #161616;
   border-bottom: none;
   position: relative;
-  top: 2px;
+  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
+{
+  color: #fff;
+  text-decoration: none;
 }
 
 .ui-tabs-active .ui-tabs-anchor
 {
   cursor: default;
 }
 
 .ui-tabs-anchor
@@ -835,22 +860,21 @@
   #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: 9px;
-    right: 10px;
+    top: 7px;
+    right: 1px;
     display: block;
-    padding: 0px;
+    padding: 8px 0px;
     margin: 0px 5px;
-    background: none;
   }
 
   .menu-list
   {
     margin-top: 45px;
     padding: 0px;
     display: block;
   }
@@ -867,20 +891,20 @@
     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: 9px;
-    right: 50px;
+    top: 7px;
+    right: 43px;
     height: 32px;
-    padding: 0 10px;
+    padding: 0 6px;
     line-height: 32px;
     font-size: 14px;
   }
 
   .columns-container .column
   {
     width: 100%;
     margin-left: 0;
@@ -906,22 +930,21 @@
 @media (min-width: 751px)
 {
   .ui-tabs-nav-vertical
   {
     padding: .2em .1em .2em .2em;
     float: left; width: 100%;
     border-bottom: none;
   }
+
   .ui-tabs-nav-vertical li
   {
     clear: left;
     width: 100%;
-    border-bottom-width: 1px !important;
-    border-left: 1px solid #E1E1E1 !important;
     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;