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

Delta Between Two Patch Sets: static/css/main.css

Issue 29558641: Issue 5740 - Implemented new abp.org footer styles (Closed) Base URL: https://bitbucket.org/adblockplus/adblockplus.org
Left Patch Set: Rebased on top of #5742 Created Oct. 5, 2017, 3:35 p.m.
Right Patch Set: Addressed comments Created Oct. 11, 2017, 1:11 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « static/css/index-desktop.css ('k') | static/css/main-desktop.css » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 /*******************************************************************************
2 * Base styles
3 ******************************************************************************/
4 html {
5 color: #212121;
6 background-color: #fff;
7 font-family: sans-serif;
8 line-height: 1.5; }
9
10 /**
11 * Stretch content full-width
12 */
13 .full-width {
14 display: block;
15 width: 100%;
16 margin: 1em 0px; }
17
18 /**
19 * Center content within a (responsive) fixed width
20 */
21 .container {
22 width: auto;
23 max-width: 100%;
24 margin: 0px auto;
25 padding: 0px 1em; }
26
27 @media (min-width: 768px) {
28 .container {
29 width: 720px; } }
30
31 @media (min-width: 1200px) {
32 .container {
33 width: 1170px; } }
34
35 /*******************************************************************************
36 * Grid component
37 ******************************************************************************/
38 /**
39 * - .row contains one or more .column(s)
40 * - .row clears .column(s)
41 * - .row negates the left & right padding of it's left-most & right-most
42 * .column(s) while preserving consistent padding between .column(s)
43 */
44 .row {
45 margin: 0px -1em; }
46
47 .row:after {
48 display: block;
49 clear: both;
50 content: ""; }
51
52 /**
53 * - .column is 100% width by default
54 * - Modifier classes are applied to .column to change it's width
55 * - Modifier classes behave differently on different device widths
56 */
57 .column {
58 position: relative;
59 width: 100%;
60 min-height: 1px;
61 padding: 0px 1em; }
62
63 /* - .column(s) within .row .reverse appear in reverse order
64 * - .column(s) within [dir=rtl] appear in reverse order respectively
65 */
66 .column,
67 [dir="rtl"] .reverse .column {
68 float: left; }
69
70 .row,
71 .column {
72 box-sizing: border-box; }
juliandoucette 2017/10/05 17:09:57 Oops! I fixed an issue here https://codereview.adb
73
74 .reverse .column,
75 [dir="rtl"] .column {
76 float: right; }
77
78 @media (min-width: 768px) {
79 .one-half,
80 .one-fourth {
81 width: 50%; } }
82
83 @media (min-width: 1200px) {
84 .one-third {
85 width: 33.333333%; }
86 .two-thirds {
87 width: 66.666667%; }
88 .one-fourth {
89 width: 25%; }
90 .three-fourths {
91 width: 75%; } }
92
93 * 1 *
94 { 2 {
95 font-family: Arial, sans; 3 font-family: Arial, sans;
96 font-size: 16px; 4 font-size: 16px;
97 } 5 }
98 6
99 body 7 body
100 { 8 {
101 margin: 0; 9 margin: 0;
102 line-height: 1.5; 10 line-height: 1.5;
(...skipping 28 matching lines...) Expand all
131 } 39 }
132 40
133 .sprite 41 .sprite
134 { 42 {
135 display: inline-block; 43 display: inline-block;
136 font-size: 0px; /* fix for IE6 height bug */ 44 font-size: 0px; /* fix for IE6 height bug */
137 background-image: url(../img/sprite-main.png); 45 background-image: url(../img/sprite-main.png);
138 background-repeat: no-repeat; 46 background-repeat: no-repeat;
139 } 47 }
140 48
141 header
142 {
143 display: block;
144 position: relative;
145 background: white;
146 border: 1px solid #d9d9d9;
147 border-top: none;
148 box-shadow: 1px 1px 0 0 #d9d9d9;
149 z-index: 1;
150 }
151
152 header nav li
153 {
154 padding: 0px 5px;
155 }
156
157 header nav li.selected
158 {
159 color: #db1313;
160 text-shadow: 1px 1px 1px #eee;
161 cursor: default;
162 }
163
164 header nav li.install-link a
165 {
166 color: #048e48;
167 }
168
169 header nav li.install-link .install-link-icon
170 {
171 display: inline-block;
172 width: 12px;
173 height: 12px;
174 background-position: -167px -13px;
175 }
176
177 .language-entry a
178 {
179 display: block;
180 }
181
182 #logo
183 {
184 position: absolute;
185 width: 128px;
186 height: 128px;
187 background-position: -83px -83px;
188 }
189
190 #content h1
191 {
192 font-size: 30px;
193 }
194
195 #content h2
196 {
197 font-weight: bold;
198 font-size: 25px;
199 }
200
201 #content h3
202 {
203 font-size: 20px;
204 }
205
206 #adblock-browser-notification 49 #adblock-browser-notification
207 { 50 {
208 text-align: center; 51 text-align: center;
209 } 52 }
210 53
211 #adblock-browser-notification a 54 #adblock-browser-notification a
212 { 55 {
213 font-weight: bold; 56 font-weight: bold;
214 } 57 }
215 58
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
249 .toc li 92 .toc li
250 { 93 {
251 margin: 4px 0; 94 margin: 4px 0;
252 } 95 }
253 96
254 #social-list ul 97 #social-list ul
255 { 98 {
256 list-style: none; 99 list-style: none;
257 padding: 0; 100 padding: 0;
258 margin: 0; 101 margin: 0;
259 }
260
261 .social-entry
262 {
263 display: inline-block;
264 margin: 0px 5px;
265 }
266
267 .social-entry a
268 {
269 width: 82px;
270 height: 82px;
271 -webkit-transition: opacity .5s ease;
272 -moz-transition: opacity .5s ease;
273 -ms-transition: opacity .5s ease;
274 -o-transition: opacity .5s ease;
275 transition: opacity .5s ease;
276 opacity: .6;
277 }
278
279 .social-entry a:hover
280 {
281 opacity: 1.0;
282 }
283
284 #social-facebook
285 {
286 background-position: 0px 0px;
287 }
288
289 #social-twitter
290 {
291 background-position: 0px -83px;
292 }
293
294 #social-gplus
295 {
296 background-position: -83px 0px;
297 } 102 }
298 103
299 div.animation[started="false"]:before 104 div.animation[started="false"]:before
300 { 105 {
301 content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ%2B Ih5AAAAFVBMVEUAgAAAgAD%2F%2F%2F%2Fr9uvY7Ni%2B376h0aGeNpcsAAAAAXRSTlNtc%2BXFgwAAA DVJREFUeF5dzVEKACAMAlC7QW6t%2F7r%2FIYOBEPr1GOgw2AHiduaHkwKXwBK4BYZdylrpy4K%2BP%2 Fu5C1CVKVSzAAAAAElFTkSuQmCC); 106 content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ%2B Ih5AAAAFVBMVEUAgAAAgAD%2F%2F%2F%2Fr9uvY7Ni%2B376h0aGeNpcsAAAAAXRSTlNtc%2BXFgwAAA DVJREFUeF5dzVEKACAMAlC7QW6t%2F7r%2FIYOBEPr1GOgw2AHiduaHkwKXwBK4BYZdylrpy4K%2BP%2 Fu5C1CVKVSzAAAAAElFTkSuQmCC);
302 padding-left: 0px; 107 padding-left: 0px;
303 padding-right: 3px; 108 padding-right: 3px;
304 } 109 }
305 110
306 html[dir="rtl"] div.animation[started="false"]:before 111 html[dir="rtl"] div.animation[started="false"]:before
(...skipping 24 matching lines...) Expand all
331 [dir="ltr"] .alert 136 [dir="ltr"] .alert
332 { 137 {
333 border-left: 5px solid #d14841; 138 border-left: 5px solid #d14841;
334 } 139 }
335 140
336 [dir="rtl"] .alert 141 [dir="rtl"] .alert
337 { 142 {
338 border-right: 5px solid #d14841; 143 border-right: 5px solid #d14841;
339 } 144 }
340 145
341 @media(max-width: 767px) 146 /******************************************************************************
342 { 147 * .content
343 #site-footer .column 148 *****************************************************************************/
149
150 .content h1,
151 .content h2,
152 .content h3,
153 .content h4,
154 .content h5
155 {
156 font-weight: bold;
157 margin: 32px 0px;
158 margin: 2rem 0rem;
159 }
160
161 .content h1 { font-size: 2.4em; }
162 .content h2 { font-size: 1.6em; }
163 .content h3 { font-size: 1.3em; }
164 .content h4 { font-size: 1.2em; }
165 .content h5 { font-size: 1.1em; }
166
167 /*******************************************************************************
168 * #navbar
169 ******************************************************************************/
170
171 #navbar
172 {
173 height: 4em;
174 background-color: #c70d2c;
175 }
176
177 #navbar li
178 {
179 list-style-type: none;
180 }
181
182 /* padding provided by navbar contents */
183 .navbar-container
184 {
185 width: 1170px;
186 margin: 0 auto;
187 }
188
189 /* full-width under .container max-width */
190 @media(max-width: 1199px)
191 {
192 .navbar-container
193 {
194 width: 100%;
195 }
196 }
197
198 /* #navbar #navbar-logo
199 ******************************************************************************/
200
201 #navbar-logo
202 {
203 /* padding is visible in hover background-color change */
204 padding: 0em 1em;
205 color: #fff;
206 }
207
208 #navbar-logo:hover,
209 #navbar-logo:active,
210 #navbar-logo:focus
211 {
212 background-color: #AE0013;
213 text-decoration: none;
214 }
215
216 #navbar-logo,
217 #navbar-logo > *
218 {
219 float: left;
220 }
221
222 [dir="rtl"] #navbar-logo,
223 [dir="rtl"] #navbar-logo > *
224 {
225 float: right;
226 }
227
228 #navbar-logo img
229 {
230 height: 4em;
231 padding: 0.5em 0em;
232 margin: 0em 1em 0em 0em;
233 }
234
235 [dir="rtl"] #navbar-logo > img
236 {
237 margin: 0em 0em 0em 1em;
238 }
239
240 #navbar-logo > span
241 {
242 /* full-height: 2.91 * 1.375 = ~4em */
243 line-height: 2.91em;
244 font-size: 1.375em;
245 }
246
247 /* #navbar #navbar-menu-toggle
248 ******************************************************************************/
249
250 #navbar-menu-toggle
251 {
252 float: right;
253 padding: 1em;
254 }
255
256 [dir="rtl"] #navbar-menu-toggle
257 {
258 float: left;
259 }
260
261 /* show on mobile */
262 #navbar-menu-toggle,
263 #navbar-menu-toggle > img
264 {
265 display: block;
266 }
267
268 /* hide on desktop */
269 @media(min-width: 992px)
270 {
271 #navbar-menu-toggle
344 { 272 {
345 display: none; 273 display: none;
346 } 274 }
347 275 }
348 #site-footer #social-list 276
juliandoucette 2017/10/05 17:09:56 This is suspicious.
277 #navbar-menu-toggle > img
278 {
279 /* plus 2em padding = 4em */
280 height: 2em;
281 }
282
283 #navbar-menu-toggle:hover,
284 #navbar-menu-toggle:active,
285 #navbar-menu-toggle:focus
286 {
287 background-color: #AE0013;
288 }
289
290 /* #navbar #navbar-menu
291 ******************************************************************************/
292
293 #navbar-menu a
294 {
295 display: block;
296 color: #fff;
297 text-decoration: none;
298 }
299
300 /* #navbar #navbar-menu #navbar-locale-menu
301 ******************************************************************************/
302
303 /* caret */
304 #navbar-locale-selected:after
305 {
306 display: inline-block;
307 width: 0;
308 height: 0;
309 margin: 0em 0em 0em 0.255em;
310 vertical-align: .255em;
311 content: "";
312 border-top: .3em solid;
313 border-right: .3em solid transparent;
314 border-left: .3em solid transparent;
315 }
316
317 [dir="rtl"] #navbar-locale-selected:after
318 {
319 margin: 0em 0.255em 0em 0em;
320 }
321
322 #navbar-locale-menu
323 {
324 display: none;
325 }
326
327 #navbar-locale-menu.visible
328 {
329 display: block;
330 }
331
332 #navbar-locale-menu > li > a
333 {
334 padding: 0.75em 1em;
335 }
336
337 #navbar-locale-menu > li > a:hover,
338 #navbar-locale-menu > li > a:active,
339 #navbar-locale-menu > li > a:focus
340 {
341 background-color: #434343;
342 }
343
344 /* #navbar #navbar-menu (desktop)
345 ******************************************************************************/
346
347 @media(min-width: 992px)
348 {
349 #navbar-menu
350 {
351 float: right;
352 }
353
354 [dir="rtl"] #navbar-menu
355 {
356 float: left;
357 }
358
359 #navbar-menu > li,
360 #navbar-menu > li > a
361 {
362 display: inline-block;
363 }
364
365 #navbar-menu > li > a
366 {
367 padding: 0em 1em;
368 line-height: 4em;
369 }
370
371 #navbar-menu > li > a:hover,
372 #navbar-menu > li > a:active,
373 #navbar-menu > li > a:focus
374 {
375 background-color: #AE0013;
376 }
377
378 /* #navbar #navbar-menu #navbar-locale-menu
379 ****************************************************************************/
380
381 #navbar-locale-menubar
382 {
383 position: relative;
384 }
385
386 #navbar-locale-menu
387 {
388 position: absolute;
389 min-width: 16em;
390 max-height: 20em;
391 max-height: 50vh;
392 top: 100%;
393 right: 0px;
394 overflow: auto;
395 z-index: 9001;
396 background-color: #292929;
397 }
398
399 [dir="rtl"] #navbar-locale-menu
400 {
401 right: auto;
402 left: 0px;
403 }
404 }
405
406 /* #navbar #navbar-menu (mobile)
407 ******************************************************************************/
408
409 @media(max-width: 991px)
410 {
411 #navbar-menu
412 {
413 display: none;
414 float: left;
415 clear: both;
416 width: 100%;
417 background-color: #292929;
418 }
419
420 #navbar-menu.visible
349 { 421 {
350 display: block; 422 display: block;
351 } 423 }
352 424
353 #site-footer #social-list ul 425 #navbar-menu li a
354 { 426 {
355 margin: 0em 1em; 427 padding: 0.75em 1em;
356 } 428 }
357 } 429
358 430 #navbar-menu li a:hover,
359 #site-footer 431 #navbar-menu li a:active,
juliandoucette 2017/10/05 17:09:57 I should probably order and/or separate (comment)
360 { 432 #navbar-menu li a:focus
433 {
434 background-color: #434343;
435 }
436 }
437
438 /*******************************************************************************
439 * #footer
440 ******************************************************************************/
441
442 #footer
443 {
444 overflow: auto;
361 margin-top: 2em; 445 margin-top: 2em;
362 padding: 2em 0em; 446 padding: 2em 0em;
363 color: #ececec; 447 color: #ececec;
364 background-color: #292929; 448 background-color: #292929;
365 overflow: auto; 449 font-size: 0.9em;
366 } 450 }
367 451
368 #site-footer h5 452 /* #footer body
369 { 453 ******************************************************************************/
370 color: #ececec; 454
371 font-size: 22px; 455 #footer h5
372 margin: 16px 0px 40px 0px; 456 {
373 } 457 margin-top: 1em;
374 458 margin-bottom: 1.5em;
375 #site-footer h5::after 459 }
juliandoucette 2017/10/05 17:09:57 Note: I took this from https://codereview.adblockp
460
461 #footer h5:after
376 { 462 {
377 content: ""; 463 content: "";
378 display: block; 464 display: block;
379 width: 30px; 465 width: 1.25em;
380 height: 3px; 466 height: 0.125em;
juliandoucette 2017/10/05 17:09:57 This is probably too wide.
381 margin: 16px 0px 0px 0px; 467 margin-top: 0.5em;
382 border: none;
383 background-color: #ececec; 468 background-color: #ececec;
384 } 469 }
385 470
386 #site-footer p 471 #footer ul
387 { 472 {
388 font-size: 18px; 473 padding: 0em;
389 }
390
391 #site-footer li
392 {
393 list-style-type: none; 474 list-style-type: none;
394 } 475 }
395 476
396 #site-footer ul 477 #footer a
397 { 478 {
398 padding: 0px;
399 }
400
401 #site-footer a
402 {
403 font-size: 18px;
404 color: #ececec; 479 color: #ececec;
405 text-decoration: none; 480 }
406 } 481
407 482 #footer a:hover,
408 #site-footer a:hover, 483 #footer a:active,
409 #site-footer a:active, 484 #footer a:focus
410 #site-footer a:focus
411 { 485 {
412 color: #fff; 486 color: #fff;
413 text-decoration: underline; 487 text-decoration: underline;
414 } 488 }
415 489
490 /* #footer #social-list
491 ******************************************************************************/
492
493 #social-list ul
494 {
495 /* negative margin canceled out by li margin below */
496 margin: 0em -0.375em;
497 }
498
499 #social-list li
500 {
501 float: left;
502 margin: 0em 0.375em;
503 }
504
505 [dir="rtl"] #social-list li
506 {
507 float: right;
508 }
509
510 #social-list img
511 {
512 height: 2em;
513 }
514
515 @media(min-width: 1200px)
516 {
517 #social-list img
518 {
519 height: 3em;
520 }
521 }
522
523 /* #footer #footer-legal
524 ******************************************************************************/
525
416 #footer-legal 526 #footer-legal
417 { 527 {
418 margin-top: 3em; 528 margin-top: 1em;
419 } 529 }
420 530
421 #site-footer #copyright-notice, 531 @media(min-width: 1200px)
422 #site-footer #copyright-notice a, 532 {
423 #legal-list a 533 #footer-legal
424 { 534 {
425 font-size: 14px; 535 margin-top: 2em;
426 } 536 }
427 537 }
428 @media(min-width: 768px) 538
429 { 539 /* #footer #footer-legal #legal-list
430 #site-footer #copyright-notice, 540 ******************************************************************************/
431 #site-footer #copyright-notice a, 541
432 #legal-list a
433 {
434 font-size: 16px;
435 }
436 }
437
438 #social-list li,
439 #legal-list li 542 #legal-list li
440 { 543 {
441 display: block;
442 float: left; 544 float: left;
443 } 545 }
444 546
445 #social-list li 547 [dir="rtl"] #legal-list li
446 { 548 {
447 margin-right: 10px; 549 float: right;
448 } 550 }
449 551
450 [dir="rtl"] #social-list li 552 #legal-list li:after
451 { 553 {
452 margin-left: 10px; 554 margin: 0em 0.375em;
453 } 555 }
454 556
455 #social-list img 557 /* IE9+ only */
456 {
457 height: 40px;
458 }
459
460 #legal-list li::after 558 #legal-list li::after
461 { 559 {
462 margin: 0px 5px;
463 content: "|" 560 content: "|"
464 } 561 }
465 562
466 #legal-list li:last-of-type::after 563 #legal-list li:last-of-type::after
467 { 564 {
468 content: none; 565 content: none;
469 } 566 }
470 567
471 @media(min-width: 1024px) 568 /* float copyright and legal links left and right on ~desktop */
569 @media(min-width: 1200px)
472 { 570 {
473 #copyright-notice 571 #copyright-notice
474 { 572 {
475 float: left; 573 float: left;
476 } 574 }
477 575
478 [dir="rtl"] #copyright-notice 576 [dir="rtl"] #copyright-notice
479 { 577 {
480 float: right; 578 float: right;
481 } 579 }
482 580
483 #legal-list 581 #legal-list
484 { 582 {
485 float: right; 583 float: right;
486 } 584 }
487 585
488 [dir="rtl"] #legal-list 586 [dir="rtl"] #legal-list
489 { 587 {
490 float: left; 588 float: left;
491 } 589 }
492 } 590 }
591
592 /* hide all footer links except #social-list on ~mobile */
593 @media(max-width: 767px)
594 {
595 #footer .column
596 {
597 display: none;
598 }
599
600 /* overriding display:none above */
601 #footer #social-list
602 {
603 display: block;
604 }
605 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld