Unified Diff: static/css/styles.css
Issue 29370658:
Issue 4462 - Update styles on Eyeo.com to match new logo (Closed)
Patch Set: See notes on last changeset
Created Jan. 12, 2017, 3:06 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
templates/default.tmpl » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: static/css/styles.css |
| =================================================================== |
| --- a/static/css/styles.css |
| +++ b/static/css/styles.css |
| @@ -1,79 +1,100 @@ |
| /* |
| * 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: 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: "Lato"; |
| + |
| +@font-face |
| +{ |
| + font-family: 'Source Sans Pro'; |
| + font-weight: 300; |
| font-style: italic; |
| + font-stretch: normal; |
| + 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; |
| - 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: 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 |
| +{ |
| + 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; |
| margin: 0; |
| - padding-top: 78px; |
| } |
| a |
| { |
| - color: #7ac142; |
| + font-weight: 400; |
| 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,28 +125,34 @@ |
| 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 |
| +{ |
| + box-shadow: none; |
| +} |
| + |
| #header.top .content-block |
| { |
| - padding: 20px 10px; |
| + padding: 22px 10px; |
| } |
| #logo |
| { |
| position: absolute; |
| top: 50%; |
| left: 10px; |
| margin-top: -20px; |
| @@ -134,17 +161,17 @@ |
| #logo img |
| { |
| height: 100%; |
| } |
| #header .menu-button |
| { |
| - margin: 0px 0px 0px 20px; |
| + margin: 0px 5px 0px 20px; |
| } |
| #menu |
| { |
| display: inline; |
| vertical-align: middle; |
| } |
| @@ -156,17 +183,17 @@ |
| overflow: hidden; |
| clip: rect(1px, 1px, 1px, 1px); |
| } |
| .menu-list |
| { |
| display: inline; |
| margin: 0px; |
| - font-size: 15px; |
| + font-size: 16px; |
| list-style: none; |
| } |
| .menu-list li |
| { |
| display: inline; |
| font-weight: bold; |
| white-space: nowrap; |
| @@ -176,39 +203,38 @@ |
| { |
| 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, |
| +#header-hamburger:active .icon-bar, |
| +#header-hamburger:focus .icon-bar |
| +{ |
| + background-color: #161616; |
| } |
| .icon-bar+.icon-bar |
| { |
| margin-top: 4px; |
| } |
| #content:before, |
| @@ -223,18 +249,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 +320,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; |
| + font-weight: 400; |
| } |
| .heading span |
| { |
| padding: 0; |
| padding-right: 10px; |
| background-color: #fff; |
| } |
| @@ -321,44 +345,43 @@ |
| .centered span |
| { |
| padding-left: 10px; |
| } |
| button, .button, .menu-button |
| { |
| 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; |
| + 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; |
| + 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 +415,34 @@ |
| margin-top: 25px; |
| margin-bottom: 25px; |
| } |
| #our-work |
| { |
| padding-top: 50px; |
| padding-bottom: 50px; |
| - background-color: #f0f0f0; |
| + background-color: #f2f2f2; |
| +} |
| + |
| +#our-work h3 |
| +{ |
| + 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 +589,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; |
| +} |
| + |
| +.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 |
| @@ -793,22 +826,26 @@ |
| #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; |
| @@ -835,22 +872,23 @@ |
| #menu.open |
| { |
| display: block; |
| } |
| #header-hamburger |
| { |
| position: absolute; |
| - top: 9px; |
| - right: 10px; |
| + top: 7px; |
| + right: 6px; |
| display: block; |
| - padding: 0px; |
| - margin: 0px 5px; |
| - background: none; |
| + height: 36px; |
| + width: 36px; |
| + margin: 0; |
| + padding: 0px 5px; |
| } |
| .menu-list |
| { |
| margin-top: 45px; |
| padding: 0px; |
| display: block; |
| } |
| @@ -867,20 +905,20 @@ |
| margin: 0px; |
| padding: 10px; |
| font-size: 14px |
| } |
| .menu-button |
| { |
| 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,24 +944,24 @@ |
| @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 |
| { |
| padding-bottom: 0; |
| padding-right: .1em; |
| border-right-width: 1px; |
| border-right-width: 1px; |
| } |
« no previous file with comments
|
« no previous file
|
templates/default.tmpl » ('j')
|
no next file with comments »
