Fixes #33 - Adjustments to features section of index page

static/css/index.css

 /******************************************************************************
  * Temparary styles
  *****************************************************************************/
 
 .avoid-wrap {display: inline-block;}
 .small {font-size: smaller;}
 .maxthon-only {display: none;}
 .maxthon .maxthon-only {display: block;}
 
 #content,
@@ skipping 181 matching lines @@
     vertical-align: middle;
   }
 
   #media-list img
   {
     margin: 0 2em;
   }
 }
 
 /******************************************************************************
+ * #features
+ *****************************************************************************/
+
+#features
+{
+  text-align: center;
+  padding-top: 3em;
+  padding-bottom: 3em;

[ire, 2018/03/14 13:07:42]

TOL: It seems like we should have another `.section` class for the larger
sections with 3em padding instead of 2. Or just change the .section to use 3em
padding... (we should handle this later)

[juliandoucette, 2018/03/14 13:54:42]

Agreed.

+}
+
+#features h2
+{
+  text-transform: uppercase;
+}
+
+@media (max-width: 575px)
+{
+  #features .column
+  {
+    margin-bottom: 3em;
+  }
+
+  #features .column:last-of-type
+  {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 1023px)
+{
+  #features
+  {
+    text-align: left;

[ire, 2018/03/14 13:07:42]

This should be text-align: right on RTL

[juliandoucette, 2018/03/14 13:54:42]

Good catch!

I tested this today and didn't even notice :D

[ire, 2018/03/14 14:04:35]

Haha I didn't notice either the first time :P

+  }
+
+  #features .column
+  {
+    position: relative;
+    width: auto;
+    padding: 0 3em 2em 10.5em;
+  }
+
+  [dir="rtl"] #features .column
+  {
+    padding: 0 10.5em 2em 3em;
+  }
+
+  #features .column:last-of-type
+  {
+    padding-bottom: 0;
+  }
+
+  #features img
+  {
+    position: absolute;
+    left: 3em;
+    top: 0.5em;
+  }
+
+  [dir="rtl"] #features img
+  {
+    left: auto;
+    right: 3em;
+  }
+
+  #features h2
+  {
+    margin: 0;
+  }
+}
+
+/******************************************************************************
  * #abb-notification
  *****************************************************************************/
 
 #abb-notification h2,
 #abb-notification h3
 {
   text-transform: uppercase;
 }
 
 #abb-logo
@@ skipping 20 matching lines @@
  * #footnote
  *****************************************************************************/
 
 #footnote
 {
   padding-top: 3em;
   padding-bottom: 2em;
   font-size: 13px;
   color: #7d7d7d;
 }