Issue 4912 - Update media coverage links on eyeo.com

includes/index/style.html

Index: includes/index/style.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/index/style.html
@@ -0,0 +1,76 @@
+<style>
+
+#media
+{
+  text-align: center;
+}
+
+#media-links
+{
+  list-style: none;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+#media-links li
+{
+  display: inline-block;
+  position: relative;
+  margin: 0px 10px 20px;
+}
+
+.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 .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 small
+{
+  display: block;
+  margin-bottom: 1em;
+}
+
+@media (min-width: 620px) and (max-width: 930px)
+{
+  #media-links
+  {
+    max-width: 600px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+@media (min-width: 930px)
+{
+  #media small
+  {
+    display: none;
+  }
+}
+
+</style>