Fixes #6 - Add media mention banner

static/css/index.css

 #content
 {
   padding-top: 5em;
+  margin: 0 auto;
 }
 
 #key-facts h1
 {
   font-size: 16px;
 }
 
 #content .sprite
 {
   background-image: url(../img/sprite-index.png);
@@ skipping 28 matching lines @@
   display: none;
   padding: 20px;
   background-color: #2f8ecb;
   text-decoration: none;
   font-size: 24px;
   font-weight: bold;
   color: #ffffff;
   border-radius: 5px;
 }
 
-#content.ua-android,
-#content.ua-ios
+.ua-android #content,
+.ua-ios #content
 {
   margin-top: 0px;
 }
 
-#content.ua-android #abb-banner,
-#content.ua-ios #abb-banner,
-#content.ua-android #abb-android-download,
-#content.ua-ios #abb-ios-download
+.ua-android #abb-banner,
+.ua-ios #abb-banner,
+.ua-android #abb-android-download,
+.ua-ios #abb-ios-download
 {
   display: block;
 }
 
-#content.ua-android #adblock-browser-notification,
-#content.ua-ios #adblock-browser-notification
+.ua-android #adblock-browser-notification,
+.ua-ios #adblock-browser-notification
 {
   display: none;
 }
 
 #main, #video-container
 {
   display: inline-block;
   vertical-align: top; /* Fix for https://bugzil.la/1320660 */
 }
 
 #video-container, #maxthon-instruction, #edge-teaser
 {
   background: #ffffff;
   padding: 10px;
   border: 1px solid #c9c9c9;
   box-shadow: 1px 1px 0 0 #dbdbdb;
 }
 
 #maxthon-instruction,
-html[lang^="zh_"] #content.maxthon #video,
-#content.maxthon #feature-free,
-#content.maxthon #terms-message,
+html[lang^="zh_"] .maxthon #video,
+.maxthon #feature-free,
+.maxthon #terms-message,
 #feature-maxthon
 {
   display: none;
 }
 
 #video-container
 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ skipping 57 matching lines @@
   margin-top: -40px;
   margin-left: -40px;
 }
 
 .no-js #video-play,
 .show-disclaimer #video-play
 {
   margin-top: -60px;
 }
 
-html[lang^="zh_"] #content.maxthon #maxthon-instruction
+html[lang^="zh_"] .maxthon #maxthon-instruction
 {
   display: inline-block;
   padding: 0px;
 }
 
-#content.maxthon #feature-maxthon
+.maxthon #feature-maxthon
 {
   display: inline-block;
 }
 
 #summary h1, #summary h2
 {
   font-weight: normal;
   margin: 0;
 }
 
@@ skipping 113 matching lines @@
   background: linear-gradient(bottom, #cacaca, #a2a2a2);
   box-shadow: 0px 0px 7px #6f6f6f;
   -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
   -o-transition: none;
   transition: none;
   bottom: 4px;
 }
 
-#content.android .install-button,
-#content.firefox.ua-firefox .install-button,
-#content.chrome.ua-chrome .install-button,
-#content.opera.ua-opera .install-button,
-#content.internet-explorer.ua-internet-explorer .install-button,
-#content.safari.ua-safari .install-button,
-#content.yandex-browser.ua-yandex-browser .install-button,
-#content.edge.ua-edge .install-button,
+.android .install-button,
+.firefox.ua-firefox .install-button,
+.chrome.ua-chrome .install-button,
+.opera.ua-opera .install-button,
+.internet-explorer.ua-internet-explorer .install-button,
+.safari.ua-safari .install-button,
+.yandex-browser.ua-yandex-browser .install-button,
+.edge.ua-edge .install-button,
 /* IE6 fixes */
-#content.firefox_ua-firefox .install-button,
-#content.chrome_ua-chrome .install-button,
-#content.opera_ua-opera .install-button,
-#content.internet-explorer_ua-internet-explorer .install-button,
-#content.safari_ua-safari .install-button,
-#content.yandex-browser_ua-yandex-browser .install-button,
-#content.edge_ua-edge .install-button
+.firefox_ua-firefox .install-button,
+.chrome_ua-chrome .install-button,
+.opera_ua-opera .install-button,
+.internet-explorer_ua-internet-explorer .install-button,
+.safari_ua-safari .install-button,
+.yandex-browser_ua-yandex-browser .install-button,
+.edge_ua-edge .install-button
 {
   background: #62c52b;
   background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
   background: -moz-linear-gradient(top, #62c52b, #4f9d22);
   background: -ms-linear-gradient(top, #62c52b, #4f9d22);
   background: -o-linear-gradient(top, #62c52b, #4f9d22);
   background: linear-gradient(top, #62c52b, #4f9d22);
   box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
   text-shadow: 2px 2px 2px #327d14;
 }
 
-#content.android .install-button:hover,
-#content.firefox.ua-firefox .install-button:hover,
-#content.chrome.ua-chrome .install-button:hover,
-#content.opera.ua-opera .install-button:hover,
-#content.internet-explorer.ua-internet-explorer .install-button:hover,
-#content.safari.ua-safari .install-button:hover,
-#content.yandex-browser.ua-yandex-browser .install-button:hover,
-#content.edge.ua-edge .install-button:hover,
+.android .install-button:hover,
+.firefox.ua-firefox .install-button:hover,
+.chrome.ua-chrome .install-button:hover,
+.opera.ua-opera .install-button:hover,
+.internet-explorer.ua-internet-explorer .install-button:hover,
+.safari.ua-safari .install-button:hover,
+.yandex-browser.ua-yandex-browser .install-button:hover,
+.edge.ua-edge .install-button:hover,
 /* IE6 fixes */
-#content.firefox_ua-firefox .install-button:hover,
-#content.chrome_ua-chrome .install-button:hover,
-#content.opera_ua-opera .install-button:hover,
-#content.internet-explorer_ua-internet-explorer .install-button:hover,
-#content.safari_ua-safari .install-button:hover,
-#content.yandex-browser_ua-yandex-browser .install-button:hover,
-#content.edge_ua-edge .install-button:hover
+.firefox_ua-firefox .install-button:hover,
+.chrome_ua-chrome .install-button:hover,
+.opera_ua-opera .install-button:hover,
+.internet-explorer_ua-internet-explorer .install-button:hover,
+.safari_ua-safari .install-button:hover,
+.yandex-browser_ua-yandex-browser .install-button:hover,
+.edge_ua-edge .install-button:hover
 {
   box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
 }
 
-#content.android .install-button:active,
-#content.firefox.ua-firefox .install-button:active,
-#content.chrome.ua-chrome .install-button:active,
-#content.opera.ua-opera .install-button:active,
-#content.internet-explorer.ua-internet-explorer .install-button:active,
-#content.safari.ua-safari .install-button:active,
-#content.yandex-browser.ua-yandex-browser .install-button:active,
-#content.edge.ua-edge .install-button:active,
+.android .install-button:active,
+.firefox.ua-firefox .install-button:active,
+.chrome.ua-chrome .install-button:active,
+.opera.ua-opera .install-button:active,
+.internet-explorer.ua-internet-explorer .install-button:active,
+.safari.ua-safari .install-button:active,
+.yandex-browser.ua-yandex-browser .install-button:active,
+.edge.ua-edge .install-button:active,
 /* IE6 fixes */
-#content.firefox_ua-firefox .install-button:active,
-#content.chrome_ua-chrome .install-button:active,
-#content.opera_ua-opera .install-button:active,
-#content.internet-explorer_ua-internet-explorer .install-button:active,
-#content.safari_ua-safari .install-button:active,
-#content.yandex-browser_ua-yandex-browser .install-button:active,
-#content.edge_ua-edge .install-button:active
+.firefox_ua-firefox .install-button:active,
+.chrome_ua-chrome .install-button:active,
+.opera_ua-opera .install-button:active,
+.internet-explorer_ua-internet-explorer .install-button:active,
+.safari_ua-safari .install-button:active,
+.yandex-browser_ua-yandex-browser .install-button:active,
+.edge_ua-edge .install-button:active
 {
   background: #4f9d22;
   background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
   background: linear-gradient(bottom, #62c52b, #4f9d22);
   box-shadow: 0px 0px 7px #486c15;
 }
 
-#content.firefox #install-firefox, #content.chrome #install-chrome,
-#content.opera #install-opera, #content.android #install-android,
-#content.internet-explorer #install-internet-explorer,
-#content.safari #install-safari,
-#content.yandex-browser #install-yandex-browser,
-#content.edge #install-edge
+.firefox #install-firefox, .chrome #install-chrome,
+.opera #install-opera, .android #install-android,
+.internet-explorer #install-internet-explorer,
+.safari #install-safari,
+.yandex-browser #install-yandex-browser,
+.edge #install-edge
 {
   display: inline-block;
 }
 
 #other-platform ul
 {
   list-style: none;
   display: inline-block;
   margin: 0px;
   padding: 0;
@@ skipping 21 matching lines @@
 #platform-firefox
 {
   background-position: -108px -89px;
 }
 
 #information-android
 {
   display: none;
 }
 
-#content.android #information-android
+.android #information-android
 {
   display: block;
 }
 
-#content.firefox #platform-firefox
+.firefox #platform-firefox
 {
   background-position: -108px -68px;
 }
 
 #platform-chrome
 {
   background-position: -88px -89px;
 }
 
-#content.chrome #platform-chrome
+.chrome #platform-chrome
 {
   background-position: -88px -68px;
 }
 
 #platform-android
 {
   background-position: -68px -89px;
 }
 
-#content.android #platform-android
+.android #platform-android
 {
   background-position: -68px -68px;
 }
 
 #platform-opera
 {
   background-position: -68px -131px;
 }
 
-#content.opera #platform-opera
+.opera #platform-opera
 {
   background-position: -68px -110px;
 }
 
 #platform-internet-explorer
 {
   background-position: -108px -131px;
 }
 
-#content.internet-explorer #platform-internet-explorer
+.internet-explorer #platform-internet-explorer
 {
   background-position: -108px -110px;
 }
 
 #platform-safari
 {
   background-position: -88px -131px;
 }
 
-#content.safari #platform-safari
+.safari #platform-safari
 {
   background-position: -88px -110px;
 }
 
 #platform-yandex-browser
 {
   background-position: -128px -89px;
 }
 
-#content.yandex-browser #platform-yandex-browser
+.yandex-browser #platform-yandex-browser
 {
   background-position: -128px -68px;
 }
 
 #platform-maxthon
 {
   background-position: -128px -130px;
 }
 
-#content.maxthon #platform-maxthon
+.maxthon #platform-maxthon
 {
   background-position: -128px -109px;
 }
 
 #platform-edge
 {
   background-position: -68px -171px;
 }
 
-#content.edge #platform-edge
+.edge #platform-edge
 {
   background-position: -68px -151px;
 }
 
 #content h3.subscribe-header
 {
   font-size: 18px;
   margin-bottom: 0px;
 }
 
 #other-platform > div,
-#content.edge #video,
+.edge #video,
 #edge-teaser
 {
   display: none;
 }
 
 .warning-platform,
 .disclaimer,
 #maxthon-notification
 {
   display: none;
   color: #D00;
   text-align: center;
   border: 1px solid #D00;
   padding: 5px;
   border-radius: 5px;
 }
 
 .disclaimer
 {
   font-size: 14px;
   color: #000;
   text-align: left;
 }
 
-#content.ua-firefox .warning-platform.firefox,
-#content.ua-chrome .warning-platform.chrome,
-#content.ua-android .warning-platform.android,
-#content.ua-opera .warning-platform.opera,
-#content.ua-internet-explorer .warning-platform.internet-explorer,
-#content.ua-safari .warning-platform.safari,
-#content.ua-yandex-browser .warning-platform.yandex-browser,
-#content.ua-maxthon .warning-platform.maxthon,
+.ua-firefox .warning-platform.firefox,
+.ua-chrome .warning-platform.chrome,
+.ua-android .warning-platform.android,
+.ua-opera .warning-platform.opera,
+.ua-internet-explorer .warning-platform.internet-explorer,
+.ua-safari .warning-platform.safari,
+.ua-yandex-browser .warning-platform.yandex-browser,
+.ua-maxthon .warning-platform.maxthon,
 html[lang^="zh_"] #maxthon-notification
 {
   display: block;
 }
 
-#content.firefox.ua-firefox .warning-platform.firefox,
-#content.chrome.ua-chrome .warning-platform.chrome,
-#content.android.ua-android .warning-platform.android,
-#content.opera.ua-opera .warning-platform.opera,
-#content.internet-explorer.ua-internet-explorer .warning-platform.internet-explorer,
-#content.safari.ua-safari .warning-platform.safari,
-#content.yandex-browser.ua-yandex-browser .warning-platform.yandex-browser,
-#content.maxthon.ua-maxthon .warning-platform.maxthon,
-#content.ua-maxthon #maxthon-notification,
-#content.maxthon #maxthon-notification,
+.firefox.ua-firefox .warning-platform.firefox,
+.chrome.ua-chrome .warning-platform.chrome,
+.android.ua-android .warning-platform.android,
+.opera.ua-opera .warning-platform.opera,
+.internet-explorer.ua-internet-explorer .warning-platform.internet-explorer,
+.safari.ua-safari .warning-platform.safari,
+.yandex-browser.ua-yandex-browser .warning-platform.yandex-browser,
+.maxthon.ua-maxthon .warning-platform.maxthon,
+.ua-maxthon #maxthon-notification,
+.maxthon #maxthon-notification,
 /* IE6 fixes */
-#content.firefox_ua-firefox .warning-platform.firefox,
-#content.chrome_ua-chrome .warning-platform.chrome,
-#content.opera_ua-opera .warning-platform.opera,
-#content.internet-explorer_ua-internet-explorer .warning-platform.internet-explorer,
-#content.safari_ua-safari .warning-platform.safari,
-#content.yandex-browser_ua-yandex-browser .warning-platform.yandex-browser,
-#content.maxthon_ua-maxthon .warning-platform.maxthon
+.firefox_ua-firefox .warning-platform.firefox,
+.chrome_ua-chrome .warning-platform.chrome,
+.opera_ua-opera .warning-platform.opera,
+.internet-explorer_ua-internet-explorer .warning-platform.internet-explorer,
+.safari_ua-safari .warning-platform.safari,
+.yandex-browser_ua-yandex-browser .warning-platform.yandex-browser,
+.maxthon_ua-maxthon .warning-platform.maxthon
 {
   display: none;
 }
 
 #key-facts
 {
   box-sizing: content-box;
 }
 
 #key-facts section
@@ skipping 92 matching lines @@
   line-height: 1.4;
   color: #000;
   background-color: #fff;
   border: 2px solid #a1a1a1;
 }
 
 #ready-for-windows-notice
 {
   margin-bottom: 30px;
 }
+
+/******************************************************************************
+ * #media

[juliandoucette, 2018/02/19 14:15:56]

Detail/TOL: This widget also appears on eyeo.com. And I suspect it will occur
again on other websites in the future. Therefore, I think we should implement it
as consistently as we can across websites.

[ire, 2018/02/20 10:49:05]

Noted & Agreed. Is there something in particular you want me to change?

[juliandoucette, 2018/02/21 11:22:53]

Not specifically. Ideally, the solution that you implement here should be
portable to eyeo.com. As a result, you may keep that in mind and test it on
eyeo.com while you are implementing if you choose.

[ire, 2018/02/22 08:43:52]

Ack. The layout between the two sites is noticeably different though. Since the
"As mentioned on" section is to the left. I see your point here though, and I
did actually use the solution from eyeo.com partly here and changed what was
different.

+ *****************************************************************************/
+
+#media-header h2,
+#media-list
+{
+  margin: 0;
+}
+
+#media-header
+{
+  margin-bottom: 2em;
+}
+
+#media-header h2
+{
+  font-size: 100%;

[juliandoucette, 2018/02/19 14:15:57]

Why 100% instead of 1em?

[ire, 2018/02/20 10:49:05]

I have no idea lol. Changed.

+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+#media-list li
+{
+  display: inline-block;
+}
+
+#media-list img
+{
+  max-width: 5em;

[juliandoucette, 2018/02/19 14:15:56]

Why max heigh/width instead of *just* hight/width?

[ire, 2018/02/20 10:49:05]

Because not all the images will have the same height/width. But we want them to
fit within a certain "box". If I were to set a specific width, the landscape
images will appear so much smaller than the portrait images and vice versa.

[juliandoucette, 2018/02/21 11:22:54]

Acknowledged.

+  max-height: 3em;
+  margin: 0 1em 1em;
+}
+
+#media-list a 
+{
+  position: relative;
+  display: block;
+}
+
+#media-list a:hover img
+{
+  opacity: 0.5;
+}
+
+#media-list a:hover:after
+{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-image: url(../img/external-icon.png);
+  background-image: url(../img/external-icon.svg, none);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1em;
+}
+
+@media (min-width: 768px)
+{
+  #media-header small
+  { 
+    display: none; 
+  }
+
+  #media-list
+  {
+    display: table;
+    width: 100%;
+  }
+
+  #media-list li
+  {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  #media-list img
+  {
+    margin: 0 2em;  

[juliandoucette, 2018/02/19 14:15:57]

Is this meant to make not display:flex look a little better? Otherwise, it seems
to just add a little space around the list itself?

[ire, 2018/02/20 10:49:04]

It's for both cases, we need some space around each item/image. Or maybe I
misunderstand what your issue is?

[juliandoucette, 2018/02/21 11:22:53]

I was confused because the space applied to each item does not make a difference
when the space provided by display:flex is greater; except for the first space
before the first item and the last space after the last item.

[ire, 2018/02/22 08:43:52]

Acknowledged.

+  }
+}
+
+@media (min-width: 992px)
+{
+  #media {
+    display: table;
+    width: 100%;
+  }
+
+  #media-header,
+  #media-list
+  {
+    display: table-cell;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  #media-header
+  {
+    margin-bottom: 0;
+  }
+
+  #media-list { direction: rtl; }

[juliandoucette, 2018/02/19 14:15:57]

Why are these necessary?

[ire, 2018/02/20 10:49:05]

To align the list items to the right if flex is not supported. Otherwise the
images will be aligned left. It's the only way I could come up with to not have
the list items aligned left and have a similar look to the flex version.

[juliandoucette, 2018/02/21 11:22:53]

I think that you should be able to make them identical using a non-flex layout.
I may be mistaking.

[ire, 2018/02/22 08:43:52]

I was having trouble achieving the exact same spacing because we need the images
to be vertically centred, and the only non-flex way I could come up with was
table layout. And this forced my hand with the spacing between each image.

It should be noted that none of our "officially" supported devices don't support
flexbox (only the devices we have "partial" support for, i.e. IE 9, IE 8, will
see this version). 

Since this is a NIT, I will opt to keep this solution until I can think of a
better way.

[juliandoucette, 2018/02/23 13:46:17]

Agreed.

+  [dir="rtl"] #media-list { direction: ltr; }
+
+  @supports (display: flex)

[juliandoucette, 2018/02/19 14:15:57]

There seems to be too little space between items without display:flex on
desktop.

[ire, 2018/02/20 10:49:05]

How much space should there be? The only reason there is so much space between
items with flex enabled is because they can take up all the available space,
which we can't do in the non-flex version. 

[juliandoucette, 2018/02/21 11:22:53]

See answer above. This may or may not be an issue / blocking issue.

+  {
+    #media-list
+    {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+}