Fixes #31 - Adjustments to media mention section of index page

static/css/index.css

Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -68,36 +68,40 @@
     display: block;
   }
 }
 
 /******************************************************************************
  * #media
  *****************************************************************************/
 
-#media-section { clear: both; }
-
-#media-header h2,
-#media-list
+#media-section
 {
-  margin: 0;
+  clear: both;
+  text-align: center;
 }
 
 #media-header
 {
-  margin-bottom: 2em;
+  margin-bottom: 1em;
 }
 
 #media-header h2
 {
   font-size: 1em;
   font-weight: normal;
   text-transform: uppercase;
 }
 
+#media-header h2,
+#media-list
+{
+  margin: 0;
+}
+
 #media-list li
 {
   display: inline-block;
 }
 
 #media-list img
 {
   max-width: 10em;
@@ -132,23 +136,55 @@
   background-image: url(../img/external-icon.png);
   background-image: linear-gradient(transparent, transparent),
                     url(../img/external-icon.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 1em;
 }
 
-@media (min-width: 992px)
+@media (min-width: 1024px)
 {
+  #media
+  {
+    display: table;
+    width: 100%;
+  }
+
+  #media-header,
+  #media-list
+  {
+    display: table-cell;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  #media-header
+  {
+    margin-bottom: 0;
+  }
+
   #media-header small
   {
     display: none;
   }
 
+  #media-list { direction: rtl; }
+  [dir="rtl"] #media-list { direction: ltr; }
+
+  @supports (display: flex)
+  {
+    #media-list
+    {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
   #media-list
   {
     display: table;
     width: 100%;
   }
 
   #media-list li
   {
@@ -157,51 +193,16 @@
   }
 
   #media-list img
   {
     margin: 0 2em;
   }
 }
 
-@media (min-width: 768px)
-{
-  #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; }
-  [dir="rtl"] #media-list { direction: ltr; }
-
-  @supports (display: flex)
-  {
-    #media-list
-    {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-  }
-
-}
-
 /******************************************************************************
  * #abb-notification
  *****************************************************************************/
 
 #abb-notification h2,
 #abb-notification h3
 {
   text-transform: uppercase;