No Issue - Implemented first run page

skin/firstRun.css

Index: skin/firstRun.css
===================================================================
--- a/skin/firstRun.css
+++ b/skin/firstRun.css
@@ -1,519 +1,638 @@
 /*
- * 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/>,
+* 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 
+{
+  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;
+  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;
+  font-size: 16px;

[juliandoucette, 2017/10/18 10:42:35]

This is unnecessary (because the default is 16px) and not-accessible (because it
overrides the browser font-size).

 }
 
 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
-{
+  background-color: #fff;

[juliandoucette, 2017/10/18 10:42:36]

This is unnecessary (because the default is white).

   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%;
+  max-width: 100%;
+  margin: 0 auto 8em;
+  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
+.column-centered-content 

[juliandoucette, 2017/10/18 10:42:35]

SuperNIT: We usually call this `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;
+  .one-third 

[juliandoucette, 2017/10/18 10:42:37]

NIT: This selector is too general (you mean all one-third columns in the body,
not *all* one-third columns).

[martin, 2017/10/20 10:03:28]

How about I give the parent div a class of "content-columns-container" and then
do `.content-columns-container > .one-third`?

[juliandoucette, 2017/10/20 13:50:22]

By "body" I didn't mean <body> or `body .one-third`. I meant `#content
.one-third` or similar. You have the right idea. But classes are meant to be
reused. Use an ID unless this rule applies to more than one page that you know
about.

+  {
+    padding: 3em 0;
+    border-bottom: 1px solid #d3d3d3;
+  }
 }
 
-#abb-promotion-block a > div
-{
-  display: table-cell;
-  vertical-align: middle;
-  padding: 6px;
-}
+/******************************************************************************
+* .content

[juliandoucette, 2017/10/18 10:42:35]

SuperNIT: You removed the space before the "*" (the same applies elsewhere)

(SuperNIT = Less than NIT)

+*****************************************************************************/
 
-#abb-promotion-block .title
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5
 {
-  font-size: 21px;
-  color: #ffffff;
   font-weight: bold;
-}
-
-#abb-promotion-block .subtitle
-{
-  font-size: 12px;
-  color: #9ab7d6;
+  margin: 32px 0px;
+  margin: 2rem 0rem;
 }
 
-#abb-promotion-block a:hover
+.content h1 { font-size: 2.4em; }

[juliandoucette, 2017/10/18 10:42:37]

Note: I have added smaller heading sizes for mobile recently

[martin, 2017/10/20 10:03:27]

I pulled the latest changes for `website-defaults`, rebuilt by running `gulp`,
looked through `main.css` but couldn't find any media queries associated with
heading sizes. Where should I find these?

[juliandoucette, 2017/10/20 13:50:21]

Ack. I didn't push this (https://codereview.adblockplus.org/29581842/) yes.
Sorry.

[juliandoucette, 2017/10/20 14:13:51]

Not to mention that this isn't part of website-defaults. I added smaller mobile
sizes to new abp.org main.css. You can copy & paste them from here.

.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)
{
  .content h1 { font-size: 2.4em; }
  .content h2 { font-size: 1.6em; }
}

PS: We can probably bundle main.css from abp.org into abpui in the future
instead of maintaining his CSS in firstRun.css.

+.content h2 { font-size: 1.6em; }
+.content h3 { font-size: 1.3em; }
+.content h4 { font-size: 1.2em; }
+.content h5 { font-size: 1.1em; }
+
+/*******************************************************************************
+* #navbar
+******************************************************************************/
+
+#navbar
 {
-  box-shadow: 0px 0px 5px #5D5D5D;
+  height: 4em;
+  background-color: #c70d2c;
 }
 
-#abb-promotion-block a:active
+#navbar li
 {
-  box-shadow: 0px 0px 5px 1px #5D5D5D;
-}
-
-section > p
-{
-  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;
+  }
 }
 

[juliandoucette, 2017/10/18 10:42:36]

There should be some sort of separation here so that we don't confuse these with
#navbar styles.

-#share-renren
+.installation-status-header

[juliandoucette, 2017/10/18 10:42:36]

See comment in firstRun.html

 {
-  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 
 {
-  font-size: 160%;
-  border: 3px dashed red;
-  text-align: center;
-  line-height: 1.3em;
+  height: 54px;
+}
+
+.applestore-button
+{
+  margin-right: 1em;
 }

[juliandoucette, 2017/10/18 10:42:36]

Missing right-to-left style

[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;
+  }
+}
+
+h1

[juliandoucette, 2017/10/18 10:42:37]

NIT: I think that this selector is too general (I think that you mean all h1
inside of .installation-status-header)

+{
+  font-size: 3em;
   margin: 0;
 }
 
-#social:hover h1
+p

[juliandoucette, 2017/10/18 10:42:36]

I think that all of these styles are already covered correctly by defaults.css.

 {
-  opacity: 0;
+  margin: 0 0 1em;
+  font-weight: 400;
+  line-height: 150%;
 }
 
-#social ul:hover li {
-  opacity: 0.3;
+.column-description > a

[juliandoucette, 2017/10/18 10:42:37]

I think that this selector is too specific. I think that you want all links in
the main content to be red. e.g.

.content a,
.content a:visited
{
  color: #c70d2c;
}

I think that font-weight and text-decoration are already covered by defaults.css

[martin, 2017/10/20 10:03:27]

I went for this specific of a selector because when I did `.content > a` all
links remained blue...

On 2017/10/18 10:42:37, juliandoucette wrote:

[juliandoucette, 2017/10/20 13:50:21]

That's because [the child combinator only matches one level deep, two selectors
are more specific than one]. If you use `.content a, .content a:visited` and
place this CSS file after defaults.css then it will take prescience.

@see https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

PS: In the future we may integrate SCSS into adblockplusui (hopefully) and use
the link color variable when generating defaults.css instead. Sorry about this
:/

+{
+  color: #C70D2C;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+p > a:hover

[juliandoucette, 2017/10/18 10:42:35]

I think that this is already covered by defaults.css

+{
+  text-decoration: underline;
 }
 
-#social ul li
+/*******************************************************************************
+* #footer
+******************************************************************************/
+
+#footer
 {
-  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;
+  overflow: auto;
+  margin-top: 2em;
+  padding: 2em 0em;
+  color: #ececec;
+  background-color: #292929;
+  font-size: 0.9em;
+}
+
+/* #footer body
+******************************************************************************/
+
+#footer h5
+{
+  margin-top: 1em;
+  margin-bottom: 1.5em;
 }
 
-#social ul li:hover
+#footer h5:after
 {
-  opacity: 1.0;
-  bottom: 0px;
+  content: "";
+  display: block;
+  width: 1.25em;
+  height: 0.125em;
+  margin-top: 0.5em;
+  background-color: #ececec;
+}
+
+#footer ul
+{
+  padding: 0em;
+  list-style-type: none;
+}
+
+#footer a
+{
+  color: #ececec;
 }
 
-.share-button
+#footer a:hover,
+#footer a:active,
+#footer a:focus
 {
-  display: inline-block;
-  width: 82px;
-  height: 82px;
+  color: #fff;
+  text-decoration: underline;
 }
 
-/* Change order of the blocks for French */
-#content:lang(fr)
+/* #footer #social-list
+******************************************************************************/
+
+#social-list ul
 {
-  display: table;
-  margin: auto;
-  caption-side: bottom;
+  /* negative margin canceled out by li margin below */
+  margin: 0em -0.375em;
 }
 
-#share:lang(fr)
+#social-list li
 {
-  display: table-caption;
+  float: left;
+  margin: 0em 0.375em;
+}
+
+[dir="rtl"] #social-list li
+{
+  float: right;
 }
 
-#donate
+#social-list img
+{
+  height: 2em;
+}
+
+@media(min-width: 1200px)
+{
+  #social-list img
+  {
+    height: 3em;
+  }
+}
+
+/* #footer #footer-legal
+******************************************************************************/
+
+#footer-legal
 {
-  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;
+  margin-top: 1em;
+}
+
+@media(min-width: 1200px)
+{
+  #footer-legal
+  {
+    margin-top: 2em;
+  }
+}
+
+/* #footer #footer-legal #legal-list
+******************************************************************************/
+
+#legal-list li
+{
+  float: left;
+}
+
+[dir="rtl"] #legal-list li
+{
+  float: right;
 }
 
-footer
+#legal-list li:after
 {
-  margin: 0 auto 30px;
-  max-width: 960px;
-  text-align: center;
+  margin: 0em 0.375em;
+}
+
+/* IE9+ only */
+#legal-list li::after
+{
+  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;
-  }
 }