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 header Created Oct. 11, 2017, 12:14 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 * 1 *
2 { 2 {
3 font-family: Arial, sans; 3 font-family: Arial, sans;
4 font-size: 16px; 4 font-size: 16px;
5 } 5 }
6 6
7 body 7 body
8 { 8 {
9 margin: 0; 9 margin: 0;
10 line-height: 1.5; 10 line-height: 1.5;
(...skipping 414 matching lines...) Expand 10 before | Expand all | Expand 10 after
425 #navbar-menu li a 425 #navbar-menu li a
426 { 426 {
427 padding: 0.75em 1em; 427 padding: 0.75em 1em;
428 } 428 }
429 429
430 #navbar-menu li a:hover, 430 #navbar-menu li a:hover,
431 #navbar-menu li a:active, 431 #navbar-menu li a:active,
432 #navbar-menu li a:focus 432 #navbar-menu li a:focus
433 { 433 {
434 background-color: #434343; 434 background-color: #434343;
435 }
436 }
435 437
436 /******************************************************************************* 438 /*******************************************************************************
437 * #site-footer 439 * #footer
438 ******************************************************************************/ 440 ******************************************************************************/
439 441
440 #site-footer 442 #footer
441 { 443 {
442 overflow: auto; 444 overflow: auto;
443 margin-top: 2em; 445 margin-top: 2em;
444 padding-top: 2em; 446 padding: 2em 0em;
445 padding-bottom: 2em;
446 color: #ececec; 447 color: #ececec;
447 background-color: #292929; 448 background-color: #292929;
448 font-size: 0.9em; 449 font-size: 0.9em;
449 } 450 }
450 451
451 /* #site-footer body 452 /* #footer body
452 ******************************************************************************/ 453 ******************************************************************************/
453 454
454 #site-footer h5 455 #footer h5
455 { 456 {
456 margin-top: 1em; 457 margin-top: 1em;
457 margin-bottom: 1.5em; 458 margin-bottom: 1.5em;
458 } 459 }
459 460
460 #site-footer h5::after 461 #footer h5:after
461 { 462 {
462 content: ""; 463 content: "";
463 display: block; 464 display: block;
464 width: 1.25em; 465 width: 1.25em;
465 height: 3px; 466 height: 0.125em;
466 margin-top: 0.5em; 467 margin-top: 0.5em;
467 border: none;
468 background-color: #ececec; 468 background-color: #ececec;
469 } 469 }
470 470
471 #site-footer li 471 #footer ul
472 { 472 {
473 padding: 0em;
473 list-style-type: none; 474 list-style-type: none;
474 } 475 }
475 476
476 #site-footer ul 477 #footer a
477 {
478 padding: 0px;
479 }
480
481 #site-footer a
482 { 478 {
483 color: #ececec; 479 color: #ececec;
484 text-decoration: none; 480 }
485 } 481
486 482 #footer a:hover,
487 #site-footer a:hover, 483 #footer a:active,
488 #site-footer a:active, 484 #footer a:focus
489 #site-footer a:focus
490 { 485 {
491 color: #fff; 486 color: #fff;
492 text-decoration: underline; 487 text-decoration: underline;
493 } 488 }
494 489
495 /* #site-footer #social-list 490 /* #footer #social-list
496 ******************************************************************************/ 491 ******************************************************************************/
492
493 #social-list ul
494 {
495 /* negative margin canceled out by li margin below */
496 margin: 0em -0.375em;
497 }
497 498
498 #social-list li 499 #social-list li
499 { 500 {
500 display: block;
501 float: left; 501 float: left;
502 margin: 0em 0.375em;
502 } 503 }
503 504
504 [dir="rtl"] #social-list li 505 [dir="rtl"] #social-list li
505 { 506 {
506 float: right; 507 float: right;
507 } 508 }
508 509
509 #social-list li
510 {
511 margin-right: 0.5em;
512 }
513
514 [dir="rtl"] #social-list li
515 {
516 margin-left: 0.5em;
517 }
518
519 #social-list img 510 #social-list img
520 { 511 {
521 height: 3em; 512 height: 2em;
522 } 513 }
523 514
524 /* smaller on tablet / small desktop only */ 515 @media(min-width: 1200px)
525 @media(min-width: 768px) and (max-width: 1200px)
526 { 516 {
527 #social-list img 517 #social-list img
528 { 518 {
529 height: 2em; 519 height: 3em;
530 } 520 }
531 } 521 }
532 522
533 /* #site-footer #footer-legal 523 /* #footer #footer-legal
534 ******************************************************************************/ 524 ******************************************************************************/
535 525
536 #footer-legal 526 #footer-legal
537 { 527 {
538 overflow: auto; 528 margin-top: 1em;
539 margin-top: 2em; 529 }
540 } 530
541 531 @media(min-width: 1200px)
542 /* #site-footer #footer-legal #legal-list 532 {
533 #footer-legal
534 {
535 margin-top: 2em;
536 }
537 }
538
539 /* #footer #footer-legal #legal-list
543 ******************************************************************************/ 540 ******************************************************************************/
544 541
545 #legal-list li 542 #legal-list li
546 { 543 {
547 display: block;
548 float: left; 544 float: left;
549 } 545 }
550 546
551 [dir="rtl"] #legal-list li 547 [dir="rtl"] #legal-list li
552 { 548 {
553 float: right; 549 float: right;
554 } 550 }
555 551
552 #legal-list li:after
553 {
554 margin: 0em 0.375em;
555 }
556
557 /* IE9+ only */
556 #legal-list li::after 558 #legal-list li::after
557 { 559 {
558 margin-left: 0.25em;
559 margin-right: 0.25em;
560 content: "|" 560 content: "|"
561 } 561 }
562 562
563 #legal-list li:last-of-type::after 563 #legal-list li:last-of-type::after
564 { 564 {
565 content: none; 565 content: none;
566 } 566 }
567 567
568 /* float copyright and legal links left and right on ~desktop */ 568 /* float copyright and legal links left and right on ~desktop */
569 @media(min-width: 1200px) 569 @media(min-width: 1200px)
(...skipping 15 matching lines...) Expand all
585 585
586 [dir="rtl"] #legal-list 586 [dir="rtl"] #legal-list
587 { 587 {
588 float: left; 588 float: left;
589 } 589 }
590 } 590 }
591 591
592 /* hide all footer links except #social-list on ~mobile */ 592 /* hide all footer links except #social-list on ~mobile */
593 @media(max-width: 767px) 593 @media(max-width: 767px)
594 { 594 {
595 #site-footer .column 595 #footer .column
596 { 596 {
597 display: none; 597 display: none;
598 } 598 }
599 599
600 /* overriding display:none above */ 600 /* overriding display:none above */
601 #site-footer #social-list 601 #footer #social-list
602 { 602 {
603 display: block; 603 display: block;
604 } 604 }
605 } 605 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld