No Issue - Implemented first run page

skin/firstRun.css

Index: skin/firstRun.css
===================================================================
--- a/skin/firstRun.css
+++ b/skin/firstRun.css
@@ -1,519 +1,640 @@
 /*
- * This file is part of Adblock Plus <https://adblockplus.org/>,
- * Copyright (C) 2006-present 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/>.
- */
+* This file is part of Adblock Plus <https://adblockplus.org/>,

[juliandoucette, 2017/10/21 16:18:46]

Please keep the spaces before "*" in these comments

[martin, 2017/10/26 10:33:17]

At first I wasn't sure what you meant exactly, but now I think you want the
spaces in order to make comments collapsable? I'll add spaces so that collapsing
would be possible. I actually copied the compiled "css" from website-defaults.
The indentation must have been screwed up during the scss->css process.

+* Copyright (C) 2006-present 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-face 

[juliandoucette, 2017/10/21 16:18:43]

This doesn't seem to be used anywhere?

[martin, 2017/10/26 10:33:17]

Done.

+{
+  font-family: "Source Sans Pro";
   font-style: normal;
-  src: url(fonts/CreteRound-Regular.otf);
+  font-weight: 300;
+  font-stretch: normal;
   src: local ("Ø"),
-  /*local ("Ø") forces using no local font called CreteRound*/
-  url(fonts/CreteRound-Regular.otf) format("otf");
+  url(fonts/SourceSansPro-Light.woff) format("otf");
 }
 
-@font-face {
-  font-family: "CreteRound";
-  font-style: italic;
-  src: url(fonts/CreteRound-Italic.otf);
+@font-face 
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
   src: local ("Ø"),
-  /*local ("Ø") forces using no local font called CreteRound*/
-  url(fonts/CreteRound-Italic.otf) format("otf");
+  url(fonts/SourceSansPro-Regular.woff) format("woff");
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;

[juliandoucette, 2017/10/21 16:18:43]

NIT: You could name this "bold"

[martin, 2017/10/26 10:33:17]

Done.

+  font-weight: 700;
+  font-stretch: normal;
+  src: local ("Ø"),
+  url(fonts/SourceSansPro-bold.woff) format("woff");
+}
+
+
+html
+{
+  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
 }
 
 body
 {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 15px;
-  line-height: 140%;
-  color: #7f776b;
-  background-color: #f8f6f2;
-  background-image: url(background-main.png);
-  margin: 0;
-  padding: 0;
-}
-
-a, a:link, a:visited
-{
-  color: #5a84b3;
-  text-decoration: underline;
-}
-
-a:hover
-{
-  text-decoration: none;
-}
-
-button
-{
-  cursor: pointer;
-}
-
-ul
-{
   margin: 0;
   padding: 0;
 }
 
-li
-{
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-header
-{
-  background-image: url(background.png);
-  background-repeat: repeat-x;
-  width: 100%;
-  padding-top: 25px;
-}
-
-header h1
+.container
 {
-  font-size: 24px;
-  font-weight: normal;
-  color: #57ab5b;
-  text-align: center;
-  margin: 21px auto;
-  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
-{
- 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;
+  width: 80%;

[juliandoucette, 2017/10/21 16:18:43]

new abp.org uses website-defaults .container width. Why are you setting a custom
width for this page?

[martin, 2017/10/26 10:33:19]

Honestly I chose to override the default for the sole purpose of the buttons in
the first and second columns to horizontally align on wider displays. Due to the
variable height of the <p> the buttons misalign by default. Alternatively we can
give the columns a fixed min-height and pin the buttons to the bottom, however
that approach felt a bit off. I dropped the width rule.

+  max-width: 100%;
+  margin: 0 auto 8em;

[juliandoucette, 2017/10/21 16:18:44]

NIT: `.container` is a very general class. It's meant to centre the content
within, and control the width and padding of, horizontal sections of the page.
And it's currently being used in the main content *and* the footer. I'm guessing
that you are trying to add 8em of space between the main content and the footer.
If I am guessing correctly then I would suggest using a more specific selector
for this purpose e.g. Adding an ID to the main content and applying an 8em
margin-bottom to it.

[martin, 2017/10/26 10:33:18]

Done.

+  padding: 0px 1em;
 }
 
-h3
-{
-  font-size: 22px;
-  color: #7F776B;
-  font-weight: normal;
-  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;
-  box-sizing: border-box;
-}
-
-#general
-{
-  display: table;
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
-#general > .block
-{
-  display: table-cell;
-  width: 50%;
-  vertical-align: top;
-  padding: 0px 50px;
-  border: dashed 0 #969085;
-  -webkit-border-start-width: 1px;
-  -moz-border-start-width: 1px;
-  border-inline-start-width: 1px;
-}
-
-#general > .block:first-child
-{
-  border: none;
-}
-
-#acceptable-ads-block h2
-{
-  margin-bottom: 34px;
-}
-
-#abb-promotion-block:lang(fr)
-{
-  display: none;
-}
-
-#abb-promotion-block
+.ta-centre
 {
   text-align: center;
 }
 
-#abb-promotion-block h2
-{
-  color: #7795b6;
-  margin-bottom: 40px;
-}
-
-#abb-promotion-block a
+@media (max-width: 992px) 
 {
-  border: solid 1px #446a96;
-  border-radius: 5px;
-  display: inline-block;
-  padding: 6px 16px;
-  background: -webkit-linear-gradient(bottom, #294e76, #6b92be);
-  background: linear-gradient(to top, #294e76, #6b92be);
-  text-decoration: none;
-  text-align: start;
+  #content-columns-container > .one-third 

[juliandoucette, 2017/10/21 16:18:44]

NIT: `#content-columns-container` is quite long. We currently use `#content` for
this purpose on adblockplus.org. I suggest we use `#content` for the sake of
consistency.

[martin, 2017/10/26 10:33:18]

Done.

+  {
+    padding: 3em 0;
+    border-bottom: 1px solid #d3d3d3;
+  }
 }
 
-#abb-promotion-block a > div
+/******************************************************************************
+* .content
+*****************************************************************************/
+
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5
 {
-  display: table-cell;
-  vertical-align: middle;
-  padding: 6px;
+  font-weight: bold;
+  margin: 32px 0px;
+  margin: 2rem 0rem;
 }
 
-#abb-promotion-block .title
+.content h1 { font-size: 1.8em; }
+.content h2 { font-size: 1.4em; }
+.content h3 { font-size: 1.3em; }
+.content h4 { font-size: 1.2em; }
+.content h5 { font-size: 1.1em; }
+
+@media(min-width: 768px)
 {
-  font-size: 21px;
-  color: #ffffff;
-  font-weight: bold;
-}
-
-#abb-promotion-block .subtitle
-{
-  font-size: 12px;
-  color: #9ab7d6;
+  .content h1 { font-size: 2.4em; }
+  .content h2 { font-size: 1.6em; }
 }
 
-#abb-promotion-block a:hover
+.content a,
+.content a:visited
 {
-  box-shadow: 0px 0px 5px #5D5D5D;
+  color: #C70D2C;
 }
 
-#abb-promotion-block a:active
+
+/*******************************************************************************
+* #navbar
+******************************************************************************/
+
+#navbar
 {
-  box-shadow: 0px 0px 5px 1px #5D5D5D;
+  height: 4em;
+  background-color: #c70d2c;
 }
 
-section > p
+#navbar li
 {
-  margin-top: 15px;
+  list-style-type: none;
 }
 
-#logo
+/* padding provided by navbar contents */
+.navbar-container
 {
+  width: 80%;
   margin: 0 auto;
-  height: 128px;
-  width: 128px;
-  display: block;
 }
 
-#share
+/* full-width under .container max-width */
+@media(max-width: 1199px)
 {
-  background-image: url(background-share.png);
-  text-align: center;
-  font-family: CreteRound, Helvetica, Arial, sans-serif;
+  .navbar-container
+  {
+    width: 100%;
+  }
 }
 
-#share h2
+/* #navbar #navbar-logo
+******************************************************************************/
+
+#navbar-logo
 {
-  margin-bottom: 30px;
-}
-
-#share h2,
-#share h2 > a
-{
+  /* padding is visible in hover background-color change */
+  padding: 0em 1em;
   color: #fff;
 }
 
-#share h2 > a:hover
+#navbar-logo:hover,
+#navbar-logo:active,
+#navbar-logo:focus
 {
-  color: #2e5075;
-}
-
-#share span
-{
-  color: #bed1e6;
-  text-align: center;
-  line-height: 34px;
-  font-size: 22px;
-  display: block;
+  background-color: #AE0013;
+  text-decoration: none;
 }
 
-#donate:hover, .share-buttons a:hover
+#navbar-logo,
+#navbar-logo > *
 {
-  box-shadow: 0px 0px 0px 2px #8ca7c4;
-  border-radius: 30px;
+  float: left;
 }
 
-#share > .block
+[dir="rtl"] #navbar-logo,
+[dir="rtl"] #navbar-logo > *
 {
-  display: inline-block;
-  vertical-align: top;
-  width: 49%;
-  padding: 5px 0px;
-  border: 1px dashed #37506d;
-  border-style: none dashed;
+  float: right;
+}
+
+#navbar-logo img
+{
+  height: 4em;
+  padding: 0.5em 0em;
+  margin: 0em 1em 0em 0em;
 }
 
-#share > .block:last-child
+[dir="rtl"] #navbar-logo > img
 {
-  -webkit-border-start-style: none;
-  -moz-border-start-style: none;
+  margin: 0em  0em 0em 1em;
 }
 
-#share > .block > span
+#navbar-logo > span
 {
-  margin: 10px 20px;
+  /* full-height: 2.91 * 1.375 = ~4em */
+  line-height: 2.91em;
+  font-size: 1.375em;
 }
 
-.share-buttons
+/* #navbar #navbar-menu-toggle
+******************************************************************************/
+
+#navbar-menu-toggle
 {
-  margin-top: 6px;
-  vertical-align: top;
-  /* because inline block creates
-   * space if not captured with
-   * font-size and line-height 0px
-   */
-  font-size: 0px;
-  line-height: 0px;
+  float: right;
+  padding: 1em;
 }
 
-.share-buttons > a
+[dir="rtl"] #navbar-menu-toggle
 {
-  width: 50px;
-  height: 50px;
-  margin: 0 8px;
-  text-decoration: none;
-  display: inline-block;
+  float: left;
 }
 
-#share-general,
-#share-chinese:lang(zh)
+/* show on mobile */
+#navbar-menu-toggle,
+#navbar-menu-toggle > img
 {
   display: block;
 }
 
-#share-general:lang(zh),
-#share-chinese
+/* hide on desktop */
+@media(min-width: 992px)
+{
+  #navbar-menu-toggle
+  {
+    display: none;
+  }
+}
+
+#navbar-menu-toggle > img
+{
+  /* plus 2em padding = 4em */
+  height: 2em;
+}
+
+#navbar-menu-toggle:hover,
+#navbar-menu-toggle:active,
+#navbar-menu-toggle:focus
+{
+  background-color: #AE0013;
+}
+
+/* #navbar #navbar-menu
+******************************************************************************/
+
+#navbar-menu a
+{
+  display: block;
+  color: #fff;
+  text-decoration: none;
+}
+
+/* #navbar #navbar-menu #navbar-locale-menu
+******************************************************************************/
+
+/* caret */
+#navbar-locale-selected:after
+{
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin: 0em 0em 0em 0.255em;
+  vertical-align: .255em;
+  content: "";
+  border-top: .3em solid;
+  border-right: .3em solid transparent;
+  border-left: .3em solid transparent;
+}
+
+[dir="rtl"] #navbar-locale-selected:after
+{
+  margin: 0em 0.255em 0em 0em;
+}
+
+#navbar-locale-menu
 {
   display: none;
 }
 
-#share-chinese > a
+#navbar-locale-menu.visible
+{
+  display: block;
+}
+
+#navbar-locale-menu > li > a
 {
-  border-bottom: 2px solid transparent;
+  padding: 0.75em 1em;
+}
+
+#navbar-locale-menu > li > a:hover,
+#navbar-locale-menu > li > a:active,
+#navbar-locale-menu > li > a:focus
+{
+  background-color: #434343;
 }
 
-#share-chinese > a:hover
-{
-  box-shadow: none;
-  border-radius: 0;
-  border-bottom: 2px solid #8CA7C4;
-}
+/* #navbar #navbar-menu (desktop)
+******************************************************************************/
 
-#share-facebook
+@media(min-width: 992px)
 {
-  background-image: url(social/facebook.png);
-  background-repeat: no-repeat;
-}
-
-#share-twitter
-{
-  background-image: url(social/twitter.png);
-  background-repeat: no-repeat;
+  #navbar-menu
+  {
+    float: right;
+  }
+  
+  [dir="rtl"] #navbar-menu
+  {
+    float: left;
+  }
+  
+  #navbar-menu > li,
+  #navbar-menu > li > a
+  {
+    display: inline-block;
+  }
+  
+  #navbar-menu > li > a
+  {
+    padding: 0em 1em;
+    line-height: 4em;
+  }
+  
+  #navbar-menu > li > a:hover,
+  #navbar-menu > li > a:active,
+  #navbar-menu > li > a:focus
+  {
+    background-color: #AE0013;
+  }
+  
+  /* #navbar #navbar-menu #navbar-locale-menu
+  ****************************************************************************/
+  
+  #navbar-locale-menubar
+  {
+    position: relative;
+  }
+  
+  #navbar-locale-menu
+  {
+    position: absolute;
+    min-width: 16em;
+    max-height: 20em;
+    max-height: 50vh;
+    top: 100%;
+    right: 0px;
+    overflow: auto;
+    z-index: 9001;
+    background-color: #292929;
+  }
+  
+  [dir="rtl"] #navbar-locale-menu
+  {
+    right: auto;
+    left: 0px;
+  }
 }
 
-#share-gplus
+/* #navbar #navbar-menu (mobile)
+******************************************************************************/
+
+@media(max-width: 991px)
 {
-  background-image: url(social/googleplus.png);
-  background-repeat: no-repeat;
+  #navbar-menu
+  {
+    display: none;
+    float: left;
+    clear: both;
+    width: 100%;
+    background-color: #292929;
+  }
+  
+  #navbar-menu.visible
+  {
+    display: block;
+  }
+  
+  #navbar-menu li a
+  {
+    padding: 0.75em 1em;
+  }
+  
+  #navbar-menu li a:hover,
+  #navbar-menu li a:active,
+  #navbar-menu li a:focus
+  {
+    background-color: #434343;
+  }
 }
 
-#share-renren
+/******************************************************************************
+* Main Page Content
+*****************************************************************************/
+
+#installation-status-header
 {
-  background-image: url(social/renren.png);
-  background-repeat: no-repeat;
+  text-align: center;
+  background: #f9f9f9;
+  padding: 4em 0;
+  margin-bottom: 4em;
+}
+
+.section-header > h2
+{
+  margin: 1em 0 0;
 }
 
-#share-weibo
+.button-primary
 {
-  background-image: url(social/weibo.png);
-  background-repeat: no-repeat;
+  display: inline-block;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #fff !important;
+  text-align: center;
+  width: 100%;
+  border-radius: 6px;
+  padding: 1em 0;
+  background: #C70D2C;
+}
+
+.store-buttons
+{
+  width:  100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.store-button
+{
+  display: block;
+  width: 180px;
+  height: 58px;
+  border-radius: 6px;
+  background: #000;
 }
 
-.warning
+.store-button > img 
+{
+  height: 54px;
+}
+
+.applestore-button
 {
-  font-size: 160%;
-  border: 3px dashed red;
-  text-align: center;
-  line-height: 1.3em;
+  margin-right: 1em;
+}
+
+[dir="rtl"] .appstore-button
+{
+  margin-right: 0;
+  margin-left: 1em;
 }
 
-#social ul
+@media (max-width: 1280px) 
 {
-  list-style: none;
-  display: inline-block;
-  padding: 0;
+  .store-buttons 
+  {
+    flex-direction: column;
+  }
+  
+  .store-button 
+  {
+    width: 100%;
+  }
+  .applestore-button
+  {
+    margin: 0 0 1em;
+  }
+}
+
+#installation-status-header > h1
+{
+  font-size: 3em;
   margin: 0;
 }
 
-#social:hover h1
+/*******************************************************************************
+* #footer
+******************************************************************************/
+
+#footer
 {
-  opacity: 0;
-}
-
-#social ul:hover li {
-  opacity: 0.3;
+  overflow: auto;
+  margin-top: 2em;
+  padding: 2em 0em;
+  color: #ececec;
+  background-color: #292929;
+  font-size: 0.9em;
 }
 
-#social ul li
+/* #footer body
+******************************************************************************/
+
+#footer h5
 {
-  display: inline-block;
-  margin: 0px 5px;
-  -webkit-transition: opacity .5s ease, bottom .3s ease;
-  transition: opacity .5s ease, bottom .3s ease;
-  position: relative;
-  bottom: -30px;
+  margin-top: 1em;
+  margin-bottom: 1.5em;
+}
+
+#footer h5:after
+{
+  content: "";
+  display: block;
+  width: 1.25em;
+  height: 0.125em;
+  margin-top: 0.5em;
+  background-color: #ececec;
 }
 
-#social ul li:hover
+#footer ul
+{
+  padding: 0em;
+  list-style-type: none;
+}
+
+#footer a
 {
-  opacity: 1.0;
-  bottom: 0px;
+  color: #ececec;
+}
+
+#footer a:hover,
+#footer a:active,
+#footer a:focus
+{
+  color: #fff;
+  text-decoration: underline;
 }
 
-.share-button
+/* #footer #social-list
+******************************************************************************/
+
+#social-list ul
 {
-  display: inline-block;
-  width: 82px;
-  height: 82px;
+  /* negative margin canceled out by li margin below */
+  margin: 0em -0.375em;
 }
 
-/* Change order of the blocks for French */
-#content:lang(fr)
+#social-list li
 {
-  display: table;
-  margin: auto;
-  caption-side: bottom;
+  float: left;
+  margin: 0em 0.375em;
 }
 
-#share:lang(fr)
+[dir="rtl"] #social-list li
 {
-  display: table-caption;
+  float: right;
+}
+
+#social-list img
+{
+  height: 2em;
 }
 
-#donate
+@media(min-width: 1200px)
+{
+  #social-list img
+  {
+    height: 3em;
+  }
+}
+
+/* #footer #footer-legal
+******************************************************************************/
+
+#footer-legal
+{
+  margin-top: 1em;
+}
+
+@media(min-width: 1200px)
 {
-  height: 21px;
-  display: inline-block;
-  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-legal
+  {
+    margin-top: 2em;
+  }
+}
+
+/* #footer #footer-legal #legal-list
+******************************************************************************/
+
+#legal-list li
+{
+  float: left;
+}
+
+[dir="rtl"] #legal-list li
+{
+  float: right;
+}
+
+#legal-list li:after
+{
+  margin: 0em 0.375em;
 }
 
-footer
+/* IE9+ only */
+#legal-list li::after
 {
-  margin: 0 auto 30px;
-  max-width: 960px;
-  text-align: center;
+  content: "|"
+}
+
+#legal-list li:last-of-type::after
+{
+  content: none;
 }
 
-@media (max-width: 970px)
+/* float copyright and legal links left and right on ~desktop */
+@media(min-width: 1200px)
 {
-  header
+  #copyright-notice
   {
-    background-size: 100px 57px;
+    float: left;
   }
-
-  #logo
+  
+  [dir="rtl"] #copyright-notice
+  {
+    float: right;
+  }
+  
+  #legal-list
   {
-    width: 64px;
-    height: 64px;
+    float: right;
   }
-
-  section
+  
+  [dir="rtl"] #legal-list
   {
-    padding: 40px 20px;
+    float: left;
   }
+}
 
-  #general,
-  #general > .block,
-  #share > .block
+/* hide all footer links except #social-list on ~mobile */
+@media(max-width: 767px)
+{
+  #footer .column
+  {
+    display: none;
+  }
+  
+  /* overriding display:none above */
+  #footer #social-list
   {
     display: block;
   }
-
-  #general > .block
-  {
-    width: auto;
-    margin-left: 20px;
-    margin-right: 20px;
-    padding: 10px 0px;
-    border-width: 1px 0px 0px;
-  }
-
-  #share > .block
-  {
-    width: auto;
-    padding: 20px 0px;
-    border-style: dashed none none;
-  }
-
-  #donate,
-  .share-buttons
-  {
-    margin-top: 10px;
-  }
 }