Merge pull request #405 from stenington/about

Add copy and embedded youtube video to about page

static/media/css/core.css

@@ -1133,3 +1133,11 @@ body.home .navbar .nav-wrap ul.nav > li:nth-child(even) {
   counter-increment: subsection;
   content: counter(section) counter(subsection, lower-alpha) ". ";
 }
+/* ABOUT STYLES */
+.about .video {
+  text-align: center;
+  margin: 20px 0;
+}
+.about .org-list {
+  list-style: none;
+}

static/media/less/core.less

@@ -1226,3 +1226,15 @@ and (max-width : 599px) {
       content: counter(section) counter(subsection, lower-alpha) ". ";
   }
 }
+
+/* ABOUT STYLES */
+.about {
+  .video {
+    text-align: center;
+    margin: 20px 0;
+  }
+
+  .org-list {
+    list-style: none;
+  }
+}

views/info/about.html

@@ -1,12 +1,40 @@
 {% extends 'info/layout.html' %}
 {% set pageTitle = 'About' %}
 {% set navItem = 'about' %}
+{% set bodyClass = 'about' %}
+
+{% block head %}
+  <!--[if (gt IE 9)|!(IE)]><!-->
+  <style>
+    .org-list {
+      -webkit-column-count: 3;
+      -moz-column-count: 3;
+      column-count: 3;
+    }
+    .org-list [class*="span"] {
+      float: none;
+    }
+  </style>
+  <!--<![endif]-->
+{% endblock %}
 
 {% block content %}
+  <p class="lead">
+    Join Mayor Rahm Emanuel in challenging Chicago youth to participate in the Summer of Learning, a citywide effort to engage young people in hands-on learning. School stops for the summer, but learning never should.
+  </p>
+  <p class="lead">
+    Youth can explore, play and learn with these organizations and earn badges along the way. They can unlock exploratory challenges and make their own projects to add to their skills. Learners will showcase their work at an end of summer event in Chicago, into the next school year and beyond!
+  </p>
+  <p class="lead">
+    See how science, technology, engineering, arts and math (STEAM) learning will rock the Windy City this summer.
+  </p>
+  <div class="video">
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6WwpwtYNsNk" frameborder="0" allowfullscreen></iframe>
+  </div>
   {% if orgs %}
     {% set nearestTen = (orgs.length // 10) * 10 %}
     <h4>Over {{ nearestTen }} Participating Organizations</h4>
-    <ul class="row">
+    <ul class="row org-list">
     {% for org in orgs %}
       <li class="span4"><a href="{{ org.url }}">{{ org.name }}</a></li>
     {% endfor %}