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

Side by Side Diff: static/css/styles.css

Issue 29370994: Issue 4462 - Update eyeo.com styles to match new logo (Closed) Base URL: https://hg.adblockplus.org/web.eyeo.com
Patch Set: Created Jan. 11, 2017, 12:52 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | static/fonts/Lato-Bold.woff » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Fonts 2 * Fonts
3 */ 3 */
4 @font-face { 4
5 font-family: "Lato"; 5 @font-face
6 {
7 font-family: 'Source Sans Pro';
8 font-weight: 300;
6 font-style: normal; 9 font-style: normal;
10 font-stretch: normal;
11 src: url('../fonts/SourceSansPro-Light.eot') format('embedded-opentype'),
12 url('../fonts/SourceSansPro-Light.ttf.woff2') format('woff2'),
13 url('../fonts/SourceSansPro-Light.otf.woff') format('woff'),
14 url('../fonts/SourceSansPro-Light.otf') format('opentype'),
15 url('../fonts/SourceSansPro-Light.ttf') format('truetype');
16 }
17
18 @font-face
19 {
20 font-family: 'Source Sans Pro';
21 font-weight: 300;
22 font-style: italic;
23 font-stretch: normal;
24 src: url('../fonts/SourceSansPro-LightIt.eot') format('embedded-opentype'),
25 url('../fonts/SourceSansPro-LightIt.ttf.woff2') format('woff2'),
26 url('../fonts/SourceSansPro-LightIt.otf.woff') format('woff'),
27 url('../fonts/SourceSansPro-LightIt.otf') format('opentype'),
28 url('../fonts/SourceSansPro-LightIt.ttf') format('truetype');
29 }
30
31 @font-face
32 {
33 font-family: 'Source Sans Pro';
7 font-weight: 400; 34 font-weight: 400;
8 src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.wof f) format('woff');
9 }
10 @font-face {
11 font-family: "Lato";
12 font-style: normal; 35 font-style: normal;
13 font-weight: 700; 36 font-stretch: normal;
14 src: local("Lato Bold"), local("Lato-Bold"), url(/fonts/Lato-Bold.woff) format ('woff'); 37 src: url('../fonts/SourceSansPro-Regular.eot') format('embedded-opentype'),
15 } 38 url('../fonts/SourceSansPro-Regular.ttf.woff2') format('woff2'),
16 @font-face { 39 url('../fonts/SourceSansPro-Regular.otf.woff') format('woff'),
17 font-family: "Lato"; 40 url('../fonts/SourceSansPro-Regular.otf') format('opentype'),
18 font-style: italic; 41 url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
19 font-weight: 400;
20 src: local("Lato Italic"), local("Lato-Italic"), url(/fonts/Lato-Italic.woff) format('woff');
21 }
22 @font-face {
23 font-family: "Lato";
24 font-style: italic;
25 font-weight: 700;
26 src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url(/fonts/Lato-Bold Italic.woff) format('woff');
27 } 42 }
28 43
29 /* 44 /*
30 * General layout 45 * General layout
31 */ 46 */
32 47
48 html
49 {
50 font-family: 'Source Sans Pro', sans-serif;
51 font-size: 18px;
52 font-weight: 300;
53 line-height: 1.333333;
54 color: #161616;
55 }
56
33 body 57 body
34 { 58 {
35 font-family: Lato, sans-serif; 59 padding: 84px 0 0 0;
36 font-size: 14px;
37 line-height: 1.4;
38 color: #747474;
39 padding: 0;
40 margin: 0; 60 margin: 0;
41 padding-top: 78px;
42 } 61 }
43 62
44 a 63 a
45 { 64 {
46 color: #7ac142; 65 font-weight: 400;
47 text-decoration: none; 66 text-decoration: none;
67 color: #161616;
48 } 68 }
49 69
50 a:hover 70 a:hover
51 { 71 {
52 color: #91e64f; 72 text-decoration: underline;
53 } 73 }
54 74
55 img 75 img
56 { 76 {
57 border-width: 0px; 77 border-width: 0px;
58 } 78 }
59 79
60 header, 80 header,
61 footer, 81 footer,
62 nav 82 nav
63 { 83 {
64 display: block; 84 display: block;
65 } 85 }
66 86
67 h1, h2, h3, h4, h5, h6
68 {
69 color: #333;
70 }
71
72 h1 87 h1
73 { 88 {
74 font-size:28px; 89 font-size:28px;
75 } 90 }
76 91
77 h2 92 h2
78 { 93 {
79 font-size:24px; 94 font-size:24px;
80 } 95 }
81 96
(...skipping 20 matching lines...) Expand all
102 #header 117 #header
103 { 118 {
104 position: fixed; 119 position: fixed;
105 background-color: #fff; 120 background-color: #fff;
106 width: 100%; 121 width: 100%;
107 top: 0px; 122 top: 0px;
108 left: 0px; 123 left: 0px;
109 box-shadow: 0px 0px 12px rgba(0,0,0, 0.09); 124 box-shadow: 0px 0px 12px rgba(0,0,0, 0.09);
110 z-index: 10000; 125 z-index: 10000;
111 text-align: right; 126 text-align: right;
127 text-transform: uppercase;
112 } 128 }
113 129
114 #header .content-block 130 #header .content-block
115 { 131 {
116 position: relative; 132 position: relative;
117 padding: 15px 10px; 133 padding: 10px;
118 min-height: 32px; 134 min-height: 32px;
119 } 135 }
120 136
137 #header.top
138 {
139 box-shadow: none;
140 }
141
121 #header.top .content-block 142 #header.top .content-block
122 { 143 {
123 padding: 20px 10px; 144 padding: 22px 10px;
124 } 145 }
125 146
126 #logo 147 #logo
127 { 148 {
128 position: absolute; 149 position: absolute;
129 top: 50%; 150 top: 50%;
130 left: 10px; 151 left: 10px;
131 margin-top: -20px; 152 margin-top: -15px;
132 height: 40px; 153 height: 30px;
133 } 154 }
134 155
135 #logo img 156 #logo img
136 { 157 {
137 height: 100%; 158 height: 100%;
138 } 159 }
139 160
140 #header .menu-button 161 #header .menu-button
141 { 162 {
142 margin: 0px 0px 0px 20px; 163 margin: 0px 0px 0px 20px;
(...skipping 11 matching lines...) Expand all
154 height: 1px; 175 height: 1px;
155 width: 1px; 176 width: 1px;
156 overflow: hidden; 177 overflow: hidden;
157 clip: rect(1px, 1px, 1px, 1px); 178 clip: rect(1px, 1px, 1px, 1px);
158 } 179 }
159 180
160 .menu-list 181 .menu-list
161 { 182 {
162 display: inline; 183 display: inline;
163 margin: 0px; 184 margin: 0px;
164 font-size: 15px; 185 font-size: 16px;
165 list-style: none; 186 list-style: none;
166 } 187 }
167 188
168 .menu-list li 189 .menu-list li
169 { 190 {
170 display: inline; 191 display: inline;
171 font-weight: bold; 192 font-weight: bold;
172 white-space: nowrap; 193 white-space: nowrap;
173 } 194 }
174 195
175 .menu-list li a 196 .menu-list li a
176 { 197 {
177 color: #979797; 198 color: #979797;
178 padding: 0 8px; 199 padding: 0 8px;
179 } 200 }
180 201
181 .menu-list li:hover > a, 202 .menu-list li:hover > a,
182 .menu-list li.current-menu-item > a 203 .menu-list li.current-menu-item > a
183 { 204 {
184 color: #373737; 205 text-decoration: none;
206 color: #161616;
185 } 207 }
186 208
187 #header-hamburger 209 #header-hamburger
188 { 210 {
189 display: none; 211 display: none;
190 } 212 }
191 213
192 #header-hamburger:hover .icon-bar,
193 #header-hamburger:focus .icon-bar,
194 #header-hamburger:active .icon-bar
195 {
196 background-color: #000;
197 }
198
199
200 .icon-bar 214 .icon-bar
201 { 215 {
202 display: block; 216 display: block;
203 width: 22px; 217 width: 22px;
204 height: 2px; 218 height: 2px;
205 border-radius: 1px; 219 background-color: #fff;
206 background-color: #888; 220 }
221
222 #header-hamburger:hover .icon-bar
223 {
224 background-color: #161616;
207 } 225 }
208 226
209 .icon-bar+.icon-bar 227 .icon-bar+.icon-bar
210 { 228 {
211 margin-top: 4px; 229 margin-top: 4px;
212 } 230 }
213 231
214 #content:before, 232 #content:before,
215 #content:after, 233 #content:after,
216 .columns-container:before, 234 .columns-container:before,
217 .columns-container:after 235 .columns-container:after
218 { 236 {
219 content: " "; 237 content: " ";
220 display: table; 238 display: table;
221 } 239 }
222 240
223 #content:after, 241 #content:after,
224 .columns-container:after 242 .columns-container:after
225 { 243 {
226 clear: both; 244 clear: both;
227 } 245 }
228 246
229 #footer 247 #footer
230 { 248 {
231 color: #666; 249 color: #fff;
232 background-color: #252525; 250 background-color: #2d2d2d;
233 padding-top: 30px; 251 padding-top: 30px;
234 padding-bottom: 50px; 252 padding-bottom: 50px;
235 } 253 }
236 254
237 #footer a 255 #footer a
238 { 256 {
239 color: #c2c2c2; 257 color: #c2c2c2;
240 } 258 }
241 259
242 #footer a:hover 260 #footer a:hover
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
292 310
293 .content-block, 311 .content-block,
294 .page-title h1 312 .page-title h1
295 { 313 {
296 max-width: 1080px; 314 max-width: 1080px;
297 margin: 0 auto; 315 margin: 0 auto;
298 } 316 }
299 317
300 .heading 318 .heading
301 { 319 {
302 margin: 0;
303 margin-bottom: 20px; 320 margin-bottom: 20px;
304 border-bottom: 1px solid #E2E2E2; 321 font-size: 28px;
305 font-weight: normal; 322 font-weight: 400;
306 height: 0.7em;
307 } 323 }
308 324
309 .heading span 325 .heading span
310 { 326 {
311 padding: 0; 327 padding: 0;
312 padding-right: 10px; 328 padding-right: 10px;
313 background-color: #fff; 329 background-color: #fff;
314 } 330 }
315 331
316 .centered 332 .centered
317 { 333 {
318 text-align: center; 334 text-align: center;
319 } 335 }
320 336
321 .centered span 337 .centered span
322 { 338 {
323 padding-left: 10px; 339 padding-left: 10px;
324 } 340 }
325 341
326 button, .button, .menu-button 342 button, .button, .menu-button
327 { 343 {
328 display: inline-block; 344 display: inline-block;
329 cursor: pointer; 345 padding: 0px 20px;
330 background-color: #7ac142; 346 background-color: #161616;
331 color: #ffffff; 347 border: 2px solid #161616;
332 border: none; 348 border-radius: 0px;
333 border-radius: 3px; 349 color: #fff;
334 font-size: 14px; 350 font-size: 14px;
335 font-weight: bold; 351 font-weight: 400;
336 line-height: 36px; 352 line-height: 36px;
337 white-space: nowrap; 353 white-space: nowrap;
338 height: 36px; 354 cursor: pointer;
339 padding: 0 20px;
340 } 355 }
341 356
342 button:hover, 357 button:hover,
343 button:focus, 358 button:focus,
344 .button:hover, 359 .button:hover,
345 .button:focus, 360 .button:focus,
346 .menu-button:hover, 361 .menu-button:hover,
347 .menu-button:focus 362 .menu-button:focus
348 { 363 {
349 background-color: #7FCF42; 364 background-color: #fff;
350 color: #ffffff; 365 color: #161616;
366 text-decoration: none;
351 } 367 }
352 368
353 .page-title 369 .page-title
354 { 370 {
355 background-image: url(/images/subtlenet2.png); 371 background-color: #f2f2f2;
356 background-color: #e9e9e5;
357 padding-top: 25px; 372 padding-top: 25px;
358 padding-bottom: 25px; 373 padding-bottom: 25px;
359 margin-bottom: 40px; 374 margin-bottom: 40px;
360 } 375 }
361 376
362 .sidebar-left .contact-person 377 .sidebar-left .contact-person
363 { 378 {
364 text-align: right; 379 text-align: right;
365 margin-top: 20px; 380 margin-top: 20px;
366 float: right; 381 float: right;
(...skipping 23 matching lines...) Expand all
390 #who-we-are 405 #who-we-are
391 { 406 {
392 margin-top: 25px; 407 margin-top: 25px;
393 margin-bottom: 25px; 408 margin-bottom: 25px;
394 } 409 }
395 410
396 #our-work 411 #our-work
397 { 412 {
398 padding-top: 50px; 413 padding-top: 50px;
399 padding-bottom: 50px; 414 padding-bottom: 50px;
400 background-color: #f0f0f0; 415 background-color: #f2f2f2;
416 }
417
418 #our-work h3
419 {
420 text-transform: uppercase;
401 } 421 }
402 422
403 #media 423 #media
404 { 424 {
405 margin-top: 25px; 425 margin-top: 25px;
406 } 426 }
407 427
408 #our-work .heading span 428 #our-work .heading span
409 { 429 {
410 background-color: #f0f0f0; 430 background-color: #f0f0f0;
411 } 431 }
412 432
413 #our-work .column
414 {
415 text-align: center;
416 }
417
418 .profile 433 .profile
419 { 434 {
420 text-align: center; 435 text-align: center;
421 margin-top: 0px; 436 margin-top: 0px;
422 margin-bottom: 30px; 437 margin-bottom: 30px;
423 } 438 }
424 439
425 .profile-image, 440 .profile-image,
426 .country-image 441 .country-image
427 { 442 {
(...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after
564 } 579 }
565 580
566 .ui-tabs-nav li 581 .ui-tabs-nav li
567 { 582 {
568 background-color: #FBFBFB; 583 background-color: #FBFBFB;
569 padding: 0; 584 padding: 0;
570 background-image: none; 585 background-image: none;
571 list-style: none; 586 list-style: none;
572 float: left; 587 float: left;
573 margin: 0; 588 margin: 0;
574
575 border: 1px solid #E1E1E1; 589 border: 1px solid #E1E1E1;
576 border-left: none; 590 border-left: none;
577 border-bottom-color: #CFCFCF; 591 border-bottom-color: #CFCFCF;
578 border-top-left-radius: 3px;
579 border-top-right-radius: 3px;
580 -webkit-border-top-left-radius: 3px;
581 -webkit-border-top-right-radius: 3px;
582
583 transition: all 0.2s linear; 592 transition: all 0.2s linear;
584 -moz-transition: all 0.2s linear; 593 -moz-transition: all 0.2s linear;
585 -webkit-transition: all 0.2s linear; 594 -webkit-transition: all 0.2s linear;
586 -o-transition: all 0.2s linear; 595 -o-transition: all 0.2s linear;
587 } 596 }
588 597
598 .ui-tabs-nav-vertical li,
589 .ui-tabs-nav li:first-child 599 .ui-tabs-nav li:first-child
590 { 600 {
591 border-left: 1px solid #E1E1E1; 601 border-left: 1px solid #E1E1E1;
592 border-top: 1px solid #E1E1E1; 602 border-top: 1px solid #E1E1E1;
593 } 603 }
594 604
595 .ui-tabs-nav li.ui-tabs-active, 605 .ui-tabs-nav li.ui-tabs-active,
596 .ui-tabs-nav li:hover 606 .ui-tabs-nav li:hover
597 { 607 {
598 background-color: #fff; 608 background-color: #fff;
599 border-top: 2px solid #7ac142; 609 border-top: 2px solid #161616;
600 border-bottom: none; 610 border-bottom: none;
601 position: relative; 611 position: relative;
602 top: 2px; 612 top: 1px;
613 }
614
615 .ui-tabs-nav-vertical li.ui-tabs-active,
616 .ui-tabs-nav-vertical li:hover
617 {
618 border: 1px solid #161616;
619 background-color: #161616;
620 top: 0px;
621 }
622
623 .ui-tabs-nav-vertical li.ui-tabs-active a,
624 .ui-tabs-nav-vertical li:hover a
625 {
626 color: #fff;
627 text-decoration: none;
603 } 628 }
604 629
605 .ui-tabs-active .ui-tabs-anchor 630 .ui-tabs-active .ui-tabs-anchor
606 { 631 {
607 cursor: default; 632 cursor: default;
608 } 633 }
609 634
610 .ui-tabs-anchor 635 .ui-tabs-anchor
611 { 636 {
612 border-bottom: none; 637 border-bottom: none;
(...skipping 220 matching lines...) Expand 10 before | Expand all | Expand 10 after
833 } 858 }
834 859
835 #menu.open 860 #menu.open
836 { 861 {
837 display: block; 862 display: block;
838 } 863 }
839 864
840 #header-hamburger 865 #header-hamburger
841 { 866 {
842 position: absolute; 867 position: absolute;
843 top: 9px; 868 top: 7px;
844 right: 10px; 869 right: 1px;
845 display: block; 870 display: block;
846 padding: 0px; 871 padding: 8px 0px;
847 margin: 0px 5px; 872 margin: 0px 5px;
848 background: none;
849 } 873 }
850 874
851 .menu-list 875 .menu-list
852 { 876 {
853 margin-top: 45px; 877 margin-top: 45px;
854 padding: 0px; 878 padding: 0px;
855 display: block; 879 display: block;
856 } 880 }
857 881
858 .menu-list > li 882 .menu-list > li
859 { 883 {
860 display: block; 884 display: block;
861 border-top: 1px solid #eee; 885 border-top: 1px solid #eee;
862 } 886 }
863 887
864 .menu-list > li > a 888 .menu-list > li > a
865 { 889 {
866 display: block; 890 display: block;
867 margin: 0px; 891 margin: 0px;
868 padding: 10px; 892 padding: 10px;
869 font-size: 14px 893 font-size: 14px
870 } 894 }
871 895
872 .menu-button 896 .menu-button
873 { 897 {
874 position: absolute; 898 position: absolute;
875 top: 9px; 899 top: 7px;
876 right: 50px; 900 right: 43px;
877 height: 32px; 901 height: 32px;
878 padding: 0 10px; 902 padding: 0 6px;
879 line-height: 32px; 903 line-height: 32px;
880 font-size: 14px; 904 font-size: 14px;
881 } 905 }
882 906
883 .columns-container .column 907 .columns-container .column
884 { 908 {
885 width: 100%; 909 width: 100%;
886 margin-left: 0; 910 margin-left: 0;
887 clear: both; 911 clear: both;
888 } 912 }
(...skipping 15 matching lines...) Expand all
904 } 928 }
905 929
906 @media (min-width: 751px) 930 @media (min-width: 751px)
907 { 931 {
908 .ui-tabs-nav-vertical 932 .ui-tabs-nav-vertical
909 { 933 {
910 padding: .2em .1em .2em .2em; 934 padding: .2em .1em .2em .2em;
911 float: left; width: 100%; 935 float: left; width: 100%;
912 border-bottom: none; 936 border-bottom: none;
913 } 937 }
938
914 .ui-tabs-nav-vertical li 939 .ui-tabs-nav-vertical li
915 { 940 {
916 clear: left; 941 clear: left;
917 width: 100%; 942 width: 100%;
918 border-bottom-width: 1px !important;
919 border-left: 1px solid #E1E1E1 !important;
920 margin: 0 -1px .2em 0; 943 margin: 0 -1px .2em 0;
921 } 944 }
922 .ui-tabs-nav-vertical li.ui-tabs-active 945 .ui-tabs-nav-vertical li.ui-tabs-active
923 { 946 {
924 padding-bottom: 0; 947 padding-bottom: 0;
925 padding-right: .1em; 948 padding-right: .1em;
926 border-right-width: 1px; 949 border-right-width: 1px;
927 border-right-width: 1px; 950 border-right-width: 1px;
928 } 951 }
929 952
930 #panels-openings 953 #panels-openings
931 { 954 {
932 margin-top: -40px; 955 margin-top: -40px;
933 } 956 }
934 } 957 }
OLDNEW
« no previous file with comments | « no previous file | static/fonts/Lato-Bold.woff » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld