Issue 4920 - Add "Ready for Windows" section to adblockplus.org

static/css/index.css

 #content h1, #content h2
 {
   font-size: 16px;
 }
 
 #content .sprite
 {
   background-image: url(../img/sprite-index.png);
 }
 
@@ skipping 688 matching lines @@
 #more-container.opera #more-opera,
 #more-container.android #more-android,
 #more-container.internet-explorer #more-internet-explorer,
 #more-container.safari #more-safari,
 #more-container.yandex-browser #more-yandex-browser,
 #more-container.maxthon #more-maxthon
 #more-container.edge #more-edge
 {
   background-color: #dbd4c7;
 }
+
+.notice {

[juliandoucette, 2017/06/20 16:20:16]

"Opening braces always go on their own line."

-- https://adblockplus.org/coding-style#general

[ire, 2017/06/21 08:30:18]

Acknowledged.

+  background-color: #ffffff;

[juliandoucette, 2017/06/20 16:20:17]

"CSS rule declaration order should follow the WordPress CSS Coding Standards."

-- https://adblockplus.org/coding-style#html-css

[ire, 2017/06/21 08:30:18]

Acknowledged.

+  padding: 20px;
+  border: 2px solid #a1a1a1;
+  box-sizing: border-box;

[juliandoucette, 2017/06/20 16:20:17]

What difference does this make?

[ire, 2017/06/21 08:30:18]

I had previously had `width: 100%` on this element and, since box-sizing wasn't
defined anywhere in this CSS, the padding was making the box extend. But since I
removed the width style, I don't need this either so will remove. 

+  color: #000000;

[juliandoucette, 2017/06/20 16:20:16]

"Use 3 character hexadecimal notation where possible."

-- https://google.github.io/styleguide/htmlcssguide.html#Hexadecimal_Notation

[ire, 2017/06/21 08:30:18]

Acknowledged.

+}
+
+#ready-for-windows-notice {
+  margin: 10px 10px 30px;

[juliandoucette, 2017/06/20 16:20:17]

Why should only this notice be less wide and have more space beneath?

[ire, 2017/06/21 08:30:18]

It isn't meant to be. I had incorrectly copied the margin on
#adblock-browser-notification from index-mobile.css. Will fix. 

I added more space beneath here because, for the other .notice
(#adblock-browser-notification), there is already more space beneath due to the
content that follows it. By adding 30px margin bottom in this case, I'm
simulating the same amount of space the other notice has. 

+  line-height: 1.4;

[juliandoucette, 2017/06/20 16:20:17]

Why should only this notice have comfortable line height?

[ire, 2017/06/21 08:30:18]

I will move this style to the .notice class

+}