Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/css/styles.css

Issue 29370658: Issue 4462 - Update styles on Eyeo.com to match new logo (Closed)
Patch Set: See notes in patchset Created Jan. 11, 2017, 1:49 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 loc
juliandoucette 2017/01/12 15:05:55 We will use the local font now and re-investigate
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
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 t
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 achieve
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 t
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 s
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 rev
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 lo
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 a
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
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 pa
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
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 th
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 t
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 mad
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 (paddi
{
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 everythin
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;
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld