share-page: Implement final design

These changes have been made by Thomas, but I've uploaded them since I already have a local Mercurial repository of the share page.

The only changes I made are the body size and the red border, which make it look nicer in a popup.

[Felix Dahlke, 2012-10-29 08:48:43]

LGTM, as far as I'm concerned. Wladimir?

[Wladimir Palant, 2012-11-05 06:34:31]

For some reason, I keep getting "Upload in progress" when trying to view a
side-by-side diff here.

http://codereview.adblockplus.org/8681060/diff/2002/index.html
File index.html (right):

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode9
index.html:9: +  height: 570px;
The height shouldn't be hardcoded here, something like padding-bottom: 20px will
have the same effect.

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode38
index.html:38: +  width: 500px;
This width shouldn't be hardcoded here - setting padding-right: 30px on the body
should have the same effect.

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode79
index.html:79: +}
I really hate using nested elements for borders - but I don't see a better way.
Still, hardcoding the width shouldn't be necessary here. Also, this currently
doesn't work properly in Firefox. Making the parent a proper block worked for
me, the following styles work for the container then:

  position: relative;
  height: 118px;
  top: 11px;
  margin-right: 11px;

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode81
index.html:81: +.fb-like {
Bracket on the next line please.

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode83
index.html:83: +  margin-left: 12px;
For some reason, these margins make the whole page jump while loading. How about
replacing them with paddings?

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode86
index.html:86: +#twitter iframe {
Bracket on the next line please.

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode180
index.html:180: +    <a href="https://twitter.com/share"
class="twitter-share-button" data-url="https://adblockplus.org" data-text="I
browse the web without annoying ads thanks to @AdblockPlus!"
data-size="large">Twittern</a>
The texts here shouldn't be in German.

[Felix Dahlke, 2012-11-05 08:38:17]

I've fixed the text, leaving the rest to Thomas.

http://codereview.adblockplus.org/8681060/diff/2002/index.html
File index.html (right):

http://codereview.adblockplus.org/8681060/diff/2002/index.html#newcode180
index.html:180: +    <a href="https://twitter.com/share"
class="twitter-share-button" data-url="https://adblockplus.org" data-text="I
browse the web without annoying ads thanks to @AdblockPlus!"
data-size="large">Twittern</a>
On 2012/11/05 06:34:31, Wladimir Palant wrote:
> The texts here shouldn't be in German.

Done.

[Felix Dahlke, 2012-11-08 19:38:06]

I've uploaded Thomas changes. Seems like he addressed all issues, so LGTM.

[Wladimir Palant, 2012-11-09 06:43:05]

LGTM

[Wladimir Palant, 2012-11-09 06:50:06]

Updated the page in Anwiki, now it looks nice both in Chrome and Firefox - and
even in MSIE9. Good work!