edX Homepage - revised layout (HTML/CSS) for new edX universities and created logo assets

lms/static/sass/multicourse/_home.scss

@@ -1,6 +1,11 @@
 .home {
   padding: 0px;
 
+  > .container {
+    @include box-sizing(border-box);
+    width: flex-grid(12);
+  }
+
   > header {
     background: rgb(255,255,255);
     @include background-image(url('/static/images/homepage-bg.jpg'));
@@ -175,9 +180,6 @@
   }
 
   .university-partners {
-    @include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
-                                                      rgba(245,245,245, 1) 50%,
-                                                      rgba(245,245,245, 0) 100%));
     border-bottom: 1px solid rgb(210,210,210);
     margin-bottom: 0px;
     overflow: hidden;
@@ -300,7 +302,6 @@
         }
 
         img {
-          max-width: 190px;
           position: relative;
           @include transition(all, 0.25s, ease-in-out);
           vertical-align: middle;
@@ -324,6 +325,44 @@
         }
       }
     }
+
+    &.university-partners2x6 {
+      @include box-sizing(border-box);
+      width: flex-grid(12, 12);
+
+      .partners {
+        @include box-sizing(border-box);
+        @include clearfix();
+        margin-left: 60px;
+        padding: 12px 0;
+
+        .partner {
+          @include box-sizing(border-box);
+          width: flex-grid(2, 12);
+          display: block;
+          float: left;
+          padding: 0 12px;
+
+          a {
+
+            img {
+              width: 100%;
+              height: auto;
+            }
+
+            .name > span {
+              font-size: 1.0em;
+            }
+
+            &:hover {
+              .name {
+                bottom: 14px;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   .more-info {

lms/templates/index.html

@@ -47,8 +47,8 @@
     <section class="highlighted-courses">
       <h2>Explore free courses from <span class="edx">edX</span> universities</h2>
 
-      <section class="university-partners">
-        <ol class="partners partners-primary">
+      <section class="university-partners university-partners2x6">
+        <ol class="partners">
           <li class="partner mit">
             <a href="${reverse('university_profile', args=['MITx'])}">
               <img src="${static.url('images/university/mit/mit.png')}" />
@@ -65,7 +65,7 @@
               </div>
             </a>
           </li>
-          <li class="partner last">
+          <li class="partner">
             <a href="${reverse('university_profile', args=['BerkeleyX'])}">
               <img src="${static.url('images/university/berkeley/berkeley.png')}" />
               <div class="name">
@@ -73,11 +73,6 @@
               </div>
             </a>
           </li>
-        </ol>
-
-        <hr />
-
-        <ol class="partners">
           <li class="partner">
             <a href="${reverse('university_profile', args=['UTx'])}">
               <img src="${static.url('images/university/ut/ut-rollover_350x150.png')}" />
@@ -86,6 +81,27 @@
               </div>
             </a>
           </li>
+          <li class="partner">
+            <a href="${reverse('university_profile', args=['McGillX'])}">
+              <img src="${static.url('images/university/mcgill/mcgill.png')}" />
+              <div class="name">
+                <span>McGillX</span>
+              </div>
+            </a>
+          </li>
+          <li class="partner">
+            <a href="${reverse('university_profile', args=['ANUx'])}">
+              <img src="${static.url('images/university/anu/anu.png')}" />
+              <div class="name">
+                <span>ANUx</span>
+              </div>
+            </a>
+          </li>
+        </ol>
+
+        <hr />
+
+        <ol class="partners">
           <li class="partner">
             <a href="${reverse('university_profile', args=['WellesleyX'])}">
               <img src="${static.url('images/university/wellesley/wellesley-rollover_350x150.png')}" />
@@ -94,7 +110,7 @@
               </div>
             </a>
           </li>
-          <li class="partner last">
+          <li class="partner">
             <a href="${reverse('university_profile', args=['GeorgetownX'])}">
               <img src="${static.url('images/university/georgetown/georgetown-rollover_350x150.png')}" />
               <div class="name">
@@ -102,6 +118,38 @@
               </div>
             </a>
           </li>
+          <li class="partner">
+            <a href="${reverse('university_profile', args=['TorontoX'])}">
+              <img src="${static.url('images/university/toronto/toronto.png')}" />
+              <div class="name">
+                <span>TorontoX</span>
+              </div>
+            </a>
+          </li>
+          <li class="partner">
+            <a href="${reverse('university_profile', args=['EPFLx'])}">
+              <img src="${static.url('images/university/epfl/epfl.png')}" />
+              <div class="name">
+                <span>EPFLx</span>
+              </div>
+            </a>
+          </li>
+          <li class="partner">
+            <a href="${reverse('university_profile', args=['DelftX'])}">
+              <img src="${static.url('images/university/delft/delft.png')}" />
+              <div class="name">
+                <span>DelftX</span>
+              </div>
+            </a>
+          </li>
+          <li class="partner">
+            <a href="${reverse('university_profile', args=['RiceX'])}">
+              <img src="${static.url('images/university/rice/rice.png')}" />
+              <div class="name">
+                <span>RiceX</span>
+              </div>
+            </a>
+          </li>
         </ol>
       </section>