Issue 5742 - Added container and 4 column grid to adblockplus.org

static/css/main.css

 /*******************************************************************************
  * Base styles

[juliandoucette, 2017/10/04 19:13:52]

Note: This will be automated ASAP.

[ire, 2017/10/04 22:17:10]

Sorry, not sure what you mean. What will be automated?

  ******************************************************************************/
 html {

[ire, 2017/10/04 22:17:10]

The formatting doesn't follow our coding style.

[ire, 2017/10/09 09:34:51]

I realised I forgot to follow up on this. Can you fix the formatting for these
styles in a separate issue?

   color: #212121;
   background-color: #fff;
   font-family: sans-serif;
   line-height: 1.5; }
 
 /**
  * Stretch content full-width
  */
 .full-width {
   display: block;
@@ skipping 47 matching lines @@
 
 /* - .column(s) within .row .reverse appear in reverse order
  * - .column(s) within [dir=rtl] appear in reverse order respectively
  */
 .column,
 [dir="rtl"] .reverse .column {
   float: left; }
 
 .row,
 .column {
-  box-sizing: border-box: }
+  box-sizing: border-box; }
 
 .reverse .column,
 [dir="rtl"] .column {
   float: right; }
 
 @media (min-width: 768px) {
   .one-half,
   .one-fourth {
     width: 50%; } }
 
 @media (min-width: 1200px) {

[juliandoucette, 2017/10/04 19:13:52]

Note: I customized this breakpoint and width to match the new abp.org design

[ire, 2017/10/04 22:17:10]

Acknowledged.

   .one-third {
     width: 33.333333%; }
   .two-thirds {
     width: 66.666667%; }
   .one-fourth {
     width: 25%; }
   .three-fourths {
     width: 75%; } }
 
 *
@@ skipping 96 matching lines @@
   width: 12px;
   height: 12px;
   background-position: -167px -13px;
 }
 
 .language-entry a
 {
   display: block;
 }
 
-#language .flag
-{
-  width: 16px;
-  height: 11px;
-  max-height: 11px;
-  margin-right: 5px;
-  margin-left: 0px;
-  background-image: url(../img/sprite-flags.png);
-  vertical-align: middle;
-}
-
-html[dir="rtl"] #language .flag
-{
-  margin-left: 5px;
-  margin-right: 0px;
-}
-
-#flag-ar
-{
-  background-position: 0px 0px;
-}
-
-#flag-bg
-{
-  background-position: -17px 0px;
-}
-
-#flag-de
-{
-  background-position: -34px 0px;
-}
-
-#flag-en
-{
-  background-position: -51px 0px;
-}
-
-#flag-es
-{
-  background-position: -68px 0px;
-}
-
-#flag-sk
-{
-  background-position: -85px 0px;
-}
-
-#flag-fr
-{
-  background-position: 0px -12px;
-}
-
-#flag-el
-{
-  background-position: -85px -12px;
-}
-
-#flag-he
-{
-  background-position: -17px -12px;
-}
-
-#flag-it
-{
-  background-position: -85px -24px;
-}
-
-#flag-hu
-{
-  background-position: -34px -12px;
-}
-
-#flag-ko
-{
-  background-position: -51px -12px;
-}
-
-#flag-ja
-{
-  background-position: -102px 0px;
-}
-
-#flag-lt
-{
-  background-position: -68px -12px;
-}
-
-#flag-nl
-{
-  background-position: 0px -24px;
-}
-
-#flag-pl
-{
-  background-position: -102px -12px;
-}
-
-#flag-pt_BR
-{
-  background-position: -17px -24px;
-}
-
-#flag-pt_PT
-{
-  background-position: -102px -24px;
-}
-
-#flag-ru
-{
-  background-position: -34px -24px;
-}
-
-#flag-zh_CN
-{
-  background-position: -51px -24px;
-}
-
-#flag-zh_TW
-{
-  background-position: -68px -24px;
-}
-
-a[hreflang="de"]:not(:lang(de)):after,
-a[hreflang="en"]:not(:lang(en)):after
-{
-  display: inline-block;
-  width: 16px;
-  height: 11px;
-  background-image: url(../img/sprite-flags.png);
-  content: "";
-  margin-left: 2px;
-}
-
-a[hreflang="de"]:not(:lang(de)):after
-{
-  background-position: -34px 0px;
-}
-
-a[hreflang="en"]:not(:lang(en)):after
-{
-  background-position: -51px 0px;
-}
-
-#language-selector a:after
-{
-  display: none;
-}
-
 #logo
 {
   position: absolute;
   width: 128px;
   height: 128px;
   background-position: -83px -83px;
 }
 
 #content h1
 {
@@ skipping 165 matching lines @@
 
 [dir="ltr"] .alert
 {
   border-left: 5px solid #d14841;
 }
 
 [dir="rtl"] .alert
 {
   border-right: 5px solid #d14841;
 }