Issue 2018 - Optimized first-run page for smaller screens

skin/firstRun.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 @font-face {
-  font-family: 'CreteRound';
+  font-family: "CreteRound";
   font-style: normal;
   src: url(fonts/CreteRound-Regular.otf);
-  src: local ('Ø'),
-  /*local ('Ø') forces using no local font called CreteRound*/
-  url(fonts/CreteRound-Regular.otf) format('otf');
+  src: local ("Ø"),
+  /*local ("Ø") forces using no local font called CreteRound*/
+  url(fonts/CreteRound-Regular.otf) format("otf");
 }
 
 @font-face {
-  font-family: 'CreteRound';
+  font-family: "CreteRound";
   font-style: italic;
   src: url(fonts/CreteRound-Italic.otf);
-  src: local ('Ø'),
-  /*local ('Ø') forces using no local font called CreteRound*/
-  url(fonts/CreteRound-Italic.otf) format('otf');
+  src: local ("Ø"),
+  /*local ("Ø") forces using no local font called CreteRound*/
+  url(fonts/CreteRound-Italic.otf) format("otf");
 }
 
 body
 {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 15px;
   line-height: 140%;
   color: #7f776b;
   background-color: #f8f6f2;
   background-image: url(background-main.png);
@@ skipping 28 matching lines @@
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
 header
 {
   background-image: url(background.png);
   background-repeat: repeat-x;
   width: 100%;
-  padding: 25px 0 0 0;
+  padding-top: 25px;
 }
 
 header h1
 {
   font-size: 24px;
   font-weight: normal;
   color: #57ab5b;
   text-align: center;
   margin: 21px auto;
-  padding: 16px 0 14px 0;
+  padding: 16px 0px;
   border: 1px #57ab5b;
   border-style: dashed none;
   /* border parallel fix - 957px is the value
    * closest to 960px(page width) which makes
    * the dashed border parallel
    */
   max-width: 957px;
 }
 
-h1,h2,h3
+h1,
+h2,
+h3
 {
  font-family: CreteRound, Helvetica, Arial, sans-serif;
 }
 
 h2
 {
   font-size: 26px;
   font-weight: lighter;
   color: #968d81;
   line-height: 28px;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 h3
 {
   font-size: 22px;
   color: #7F776B;
   font-weight: normal;
-  margin: 0 0 10px 0;
+  margin-top: 0px;
+  margin-bottom: 10px;
   padding: 0;
   line-height: 24px;
 }
 
 h4
 {
   font-size: 15px;
   color: #7f776b;
   font-weight: normal;
   text-align: center;
   margin: 0;
   padding: 0;
 }
 
 section
 {
   margin: 0 auto;
   margin-bottom: 30px;
   max-width: 960px;
   background-image: url(background.png);
   padding: 40px 100px;
 }
 
 #general
 {
-  padding: 40px 0px;
   display: table;
+  padding-left: 0px;

[saroyanm, 2015/10/07 10:15:07]

I can see that here you don't want to overwrite rule for "section" element, but
in this case I think the exception is "section" with ID "share", because
currently you are duplicating this style to another element with ID
"can-do-more" make sense to have:
section
{
  padding: 40px 0px;
}

#share
{
  padding-left: 100px;
  padding-right: 100px;
}

Or all sections can have equal left-right paddings and do not overwrite them.

"section" elements that we are using to show error don't have heading and I'm
not sure if we should consider them as sections, maybe make sense to use DIV
instead ? Because seems like we are using them as section because of styling. 

So I'll suggest, or to make consistent changes, or revert this change and handle
similar styling issue in separate ticket, while it's irrelevant here.

[Thomas Greiner, 2015/10/07 13:24:24]

The values in `#can-do-more` were duplicates so I eliminated all of the
redundancy that was going on there.

+  padding-right: 0px;
 }
 
 #general > div
 {
   display: table-cell;
   width: 50%;
   vertical-align: top;
   padding: 0px 50px;
   border: dashed 0 #969085;
   -webkit-border-start-width: 1px;
@@ skipping 62 matching lines @@
 #abb-promotion-block a:hover
 {
   box-shadow: 0px 0px 5px #5D5D5D;
 }
 
 #abb-promotion-block a:active
 {
   box-shadow: 0px 0px 5px 1px #5D5D5D;
 }
 
-@media (max-width: 960px)
-{
-  #general
-  {
-    display: block;
-  }
-
-  #general > div
-  {
-    display: block;
-    width: auto;
-    padding: 10px 0px;
-    margin: 0px 50px;
-    border-width: 1px 0 0;
-  }
-}
-
 section > p
 {
-  margin: 15px 0 0 0;
+  margin-top: 15px;
 }
 
 #logo
 {
   margin: 0 auto;
   height: 128px;
   width: 128px;
   display: block;
 }
 
@@ skipping 21 matching lines @@
 }
 
 .feature-tracking-image
 {
   background-image: url(features/tracking.png);
   background-repeat: no-repeat;
 }
 
 #can-do-more-content
 {
-  margin: 30px 100px 20px 100px;
+  margin: 30px 100px;
 }
 
 #can-do-more #features
 {
   border-spacing: 10px;
   margin: 0px;
   padding: 0px;
 }
 
-#can-do-more .feature:not([hidden])
+#can-do-more .feature
 {
-  display: block;
   list-style-type: none;
-  padding: 30px 0;
+  padding-top: 30px;
   padding-bottom: 20px;
   border-top: 1px dashed #c0bebb;
 }
 
 #can-do-more .feature-image, #can-do-more .feature-description
 {
   display: inline-block;
   *display: inline; /* IE6 inline-block fix */
   *zoom: 1;
   vertical-align: top;
 }
 
 #can-do-more .feature-description
 {
-  margin: 0px 0px 0 20px;
+  -webkit-margin-start: 20px;
+  -moz-margin-start: 20px;
   width: 625px;
   max-width: 85%;
 }
 
 #can-do-more .feature-description-textblock
 {
   width: 480px;
   max-width: 100%;
-  margin: 0 40px 0 0;
+  -webkit-margin-end: 40px;
+  -moz-margin-end: 40px;
   display: inline-block;
 }
 
 #can-do-more .feature-description-textblock > span
 {
-  margin: 15px 0 0 0;
+  margin-top: 15px;
 }
 
 #can-do-more .feature-image
 {
   width: 59px;
   height: 59px;
-  margin: 8px 0 10px 20px;
+  margin: 10px 0px;
+  -webkit-margin-start: 20px;
+  -moz-margin-start: 20px;
 }
 
 #share
 {
   background-image: url(background-share.png);
-  padding: 50px 100px 40px 100px;
   max-width: 760px;
   text-align: center;
   font-family: CreteRound, Helvetica, Arial, sans-serif;
 }
 
 #share h2
 {
-  color: #fff;
-  margin: 0 0 30px 0;
+  margin-bottom: 30px;
 }
 
+#share h2,
 #share h2 > a
 {
   color: #fff;
 }
 
 #share h2 > a:hover
 {
   color: #2e5075;
 }
 
 #share span
 {
   color: #bed1e6;
   text-align: center;
   line-height: 34px;
   font-size: 22px;
   display: block;
 }
 
 #donate:hover, .share-buttons a:hover
 {
   box-shadow: 0px 0px 0px 2px #8ca7c4;
   border-radius: 30px;
 }
 
 #donate-block span, #share-block span
 {
-  margin: 10px 20px 0px 20px;
+  margin: 10px 20px;
 }
 
 #donate-block, #share-block
 {
   min-width: 250px;
   display: inline-block;
   vertical-align: top;
   padding: 5px 0 5px 0;
   border: 1px dashed #37506d;
   border-style: none dashed;
 }
 
 #donate-block
 {
   width: 50%;
 }
 
 #share-block
 {
   width: 49%;
 
   -webkit-border-start-style: none;
   -moz-border-start-style: none;
 }
 
 .share-buttons
 {
-  margin: 6px 0 0 0;
+  margin-top: 6px;
   cursor: pointer;
   vertical-align: top;
   /* because inline block creates
    * space if not captured with
    * font-size and line-height 0px
    */
   font-size: 0px;
   line-height: 0px;
 }
 
@@ skipping 121 matching lines @@
   display: table-caption;
 }
 
 .toggle
 {
   cursor: pointer;
   position: relative;
   display: inline-block;
   vertical-align: top;
   height: 22px;
-  margin: 32px 0px 7px 0px;
+  margin-top: 32px;
+  margin-bottom: 7px;
   border-radius: 9999px;
   border: 1px solid #999;
   overflow: hidden;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
 }
 
 .toggle:hover
 {
@@ skipping 11 matching lines @@
   height: 100%;
   font-size: 11px;
   font-weight: 500;
   text-align: center;
   line-height: 23px;
   border-radius: 9999px;
 }
 
 .toggle-on
 {
-  padding: 0px 30px 0px 10px;
-  color: rgba(255,255,255, 0.8);
+  padding-left: 10px;

[saroyanm, 2015/10/07 10:15:07]

What about RTL ?

[Thomas Greiner, 2015/10/07 13:24:25]

Not everything needs to be inverted in an RTL environment. So the question we
have to ask ourselves is: Does it make a difference whether that circle in the
toggle button is on the right or left side? I don't think it does in this case.

There's a nice blog post about that on Mozilla Hacks:
https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-pa...

+  padding-right: 30px;
+  color: rgba(255,255,255,0.8);
   text-shadow: 1px 1px rgba(0,0,0,0.2);
   box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
   background: rgb(69,163,31);
 }
 
 .toggle-off
 {
-  padding: 0px 10px 0px 30px;
+  padding-left: 30px;

[saroyanm, 2015/10/07 10:15:07]

What about RTL ?

+  padding-right: 10px;
   color: rgba(0,0,0,0.6);
   text-shadow: 1px 1px rgba(255,255,255,0.2);
   background: #cfcfcf;
   background: -moz-linear-gradient(top,  #cfcfcf 0%, #f5f5f5 100%);
   background: -webkit-linear-gradient(top,  #cfcfcf 0%,#f5f5f5 100%);
   background: linear-gradient(to bottom,  #cfcfcf 0%,#f5f5f5 100%);
 }
 
 .toggle-blob
 {
@@ skipping 18 matching lines @@
 .off .toggle-blob
 {
   left: 0px;
   right: auto;
 }
 
 #donate
 {
   height: 21px;
   display: inline-block;
-  margin: 15px 0px 2px 0px;
+  margin-top: 15px;
+  margin-bottom: 2px;
   font-size: 16px;
   color: #003366;
   cursor: pointer;
   font-weight: bold;
   padding: 5px 18px;
   text-decoration: none;
   border-radius: 20px;
   border: 1px solid #FF9933;
   overflow: hidden;
   font-family: arial, sans-serif;
   background-image: url(donate.png);
   background-repeat: repeat-x;
 }
 
 footer
 {
   margin: 0 auto 30px;
   max-width: 960px;
   text-align: center;
 }
+
+@media (max-width: 970px)
+{
+  header
+  {
+    background-size: 100px 57px;
+  }
+
+  #logo
+  {
+    width: 64px;
+    height: 64px;
+  }
+
+  section
+  {
+    padding: 40px 20px;
+  }
+
+  #general,
+  #general > div
+  {
+    display: block;
+  }
+
+  #general > div
+  {
+    width: auto;
+    padding: 10px 0px;
+    border-width: 1px 0px 0px;
+  }
+
+  #general > div,
+  #can-do-more > h2,
+  #can-do-more-content
+  {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  
+  #can-do-more,
+  #can-do-more .feature h3
+  {
+    text-align: center;
+  }
+
+  #can-do-more .feature-description-textblock
+  {
+    text-align: start;
+  }
+
+  .toggle
+  {
+    margin-top: 14px;
+  }
+}