Issue 4912 - Update media coverage links on eyeo.com

includes/index/style.html

 <style>
+
+#media
+{
+  text-align: center;
+}
 
 #media-links
 {
-  text-align: center;
   list-style: none;
   padding: 0;
+  margin-bottom: 0;
 }
 
 #media-links li
 {
   display: inline-block;
   position: relative;
   margin: 0px 10px 20px;
 }
 
-.publication-logo
+.publisher-logo
 {
   max-height: 25px;
   max-width: 100%;
 }
 
 .external-link-icon

[juliandoucette, 2017/08/02 20:31:13]

NIT: I think you could center this icon by positioning [top/left: 0,
height/width: 100%, line-height: 25px (100%), text-align: center]. And that
would properly center the alt text without overflowing if the image fails to
load.

 {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 20px;
   width: 20px;
   margin-left: -10px;
   margin-top: -12px;
   opacity: 0;
 }
 
 #media-links a:hover .external-link-icon,
 #media-links a:focus .external-link-icon
 {
   opacity: 1;
 }
 
-#media-links a:hover .publication-logo,
-#media-links a:focus .publication-logo
+#media-links a:hover .publisher-logo,
+#media-links a:focus .publisher-logo
 {
   opacity: 0.2;

[juliandoucette, 2017/08/02 20:31:13]

NIT: It may be hard to see the external link icon at this opacity. Here are a
few things that may help:

- Add a white background to the image via CSS (so that the alt text has a white
background too if the image doesn't load)
- Change this opacity to 0.1 (I'm not sure about this. I think we want people
who can't see well to see the effect as well as possible. And 0.1 may may the
fade out too hard to see.)

 }
 
-@media (max-width: 930px) and (min-width: 620px)
+#media small
+{
+  display: block;
+  margin-bottom: 1em;
+}
+
+@media (min-width: 620px) and (max-width: 930px)
 {
   #media-links

[ire, 2017/08/01 10:04:06]

This is to force more than just one lone logo to a second line

[juliandoucette, 2017/08/02 20:31:13]

NIT: Would you mind adding a comment to make this clear?

+ Ack

   {
     max-width: 600px;
     margin-right: auto;
     margin-left: auto;
   }
 }
 
+@media (min-width: 930px)
+{
+  #media small
+  {
+    display: none;
+  }
+}
+
 </style>