wip news feed on home page

lms/static/sass/_about.scss

@@ -138,6 +138,27 @@
   }
 
   .press {
+
+    .press-resources {
+      @include clearfix;
+      margin-bottom: 60px;
+
+      .pressreleases, .identity-assets {
+        background: rgb(245,245,245);
+        border: 1px solid rgb(200,200,200);
+        @include box-sizing(border-box);
+        @include border-radius(4px);
+        float: left;
+        padding: 20px 30px;
+        text-align: center;
+        width: flex-grid(6);
+      }
+
+      .pressreleases {
+        margin-right: flex-gutter();
+      }
+    }
+
     .press-story {
       border-bottom: 1px solid rgb(220,220,220);
       @include clearfix;
@@ -179,7 +200,10 @@
             font-weight: bold;
           }
 
-          a {
+          span.post-date {
+            color: $lighter-base-font-color;
+            font: 300 italic 1.2rem/1.6rem $sans-serif;
+            margin-right: 10px;
           }
         }
       }

lms/static/sass/_index.scss

 .home {
-  padding: 0px 0px 100px;
+  padding: 0px;
 
   > header {
     background: rgb(255,255,255);
@@ -46,7 +46,7 @@
       text-align: left;
       vertical-align: middle;
 
-      &::after {
+      &::before {
         @extend .faded-vertical-divider;
         content: "";
         display: block;
@@ -56,6 +56,16 @@
         top: -20px;
       }
 
+      &::after {
+        @extend .faded-vertical-divider-light;
+        content: "";
+        display: block;
+        height: 170px;
+        position: absolute;
+        right: -1px;
+        top: -20px;
+      }
+
       h1 {
         border-bottom: 1px solid rgb(200,200,200);
         margin-bottom: 25px;
@@ -245,9 +255,8 @@
   }
 
   .highlighted-courses {
-    border-bottom: 1px solid rgb(210,210,210);
     @include box-sizing(border-box);
-    margin-bottom: 60px;
+    margin-bottom: 0px;
     position: relative;
     width: flex-grid(12);
     z-index: 1;
@@ -259,6 +268,7 @@
       border-top-color: rgb(190,190,190);
       @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
       color: $lighter-base-font-color;
+      //display: none;
       letter-spacing: 1px;
       margin-bottom: 0px;
       margin-top: -15px;
@@ -275,6 +285,7 @@
   }
 
   .university-partners {
+    //@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(240,240,240)));
     @include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
                                                       rgba(245,245,245, 1) 50%,
                                                       rgba(245,245,245, 0) 100%));
@@ -407,29 +418,101 @@
   }
 
   .more-info {
-    margin-bottom: 60px;
+    //background: rgb(245,245,245);
+    //border-top: 1px solid rgb(200,200,200);
+    padding: 40px 0px 80px;
     width: flex-grid(12);
 
-    h2 {
-      color: $lighter-base-font-color;
-      font: normal 1.4rem/1.8rem $serif;
-      letter-spacing: 1px;
-      margin-bottom: 20px;
+    header {
+      border-bottom: 1px solid rgb(220,220,220);
+      @include clearfix;
+      margin-bottom: 30px;
+
+      h2 {
+        float: left;
+      }
+
+      a {
+        color: $lighter-base-font-color;
+        float: right;
+        font: italic 1.2rem/1.6rem $serif;
+        padding-top: 5px;
+
+        &:hover {
+          color: $base-font-color;
+        }
+      }
     }
 
     .news {
-      font-size: 0em;
+      //border: 1px solid rgb(200,200,200);
+      @include box-sizing(border-box);
+      //padding: 20px;
       width: flex-grid(12);
 
-      > article {
-        background: rgb(240,240,240);
-        @include inline-block;
-        height: 150px;
-        margin-right: flex-gutter();
-        width: flex-grid(3);
+      .blog-posts {
+        @include clearfix;
+        //border-bottom: 1px solid rgb(220,220,220);
+        //margin-bottom: 30px;
+        //padding-bottom: 30px;
 
-        &:last-child {
-          margin-right: 0px;
+        > article {
+          //background: rgb(250,250,250);
+          border-left: 1px dotted rgb(220,220,220);
+          @include box-sizing(border-box);
+          //@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.1));
+          @include clearfix;
+          float: left;
+          margin-right: flex-gutter();
+          padding: 10px 0px 10px 20px;
+          width: flex-grid(4);
+
+          &:last-child {
+            margin-right: 0px;
+          }
+
+          .post-graphics {
+            border: 1px solid rgb(190,190,190);
+            @include box-sizing(border-box);
+            float: left;
+            height: 65px;
+            margin-right: flex-gutter();
+            overflow: hidden;
+            width: flex-grid(4);
+            vertical-align: top;
+
+            img {
+              min-height: 100%;
+              max-width: 100%;
+            }
+          }
+
+          .post-name {
+            float: left;
+            width: flex-grid(8);
+            vertical-align: top;
+
+            h3 {
+              font: 700 1.2rem/1.6rem $sans-serif;
+              margin-bottom: 5px;
+
+              a {
+                color: $base-font-color;
+                font: 700 1.2rem/1.6rem $sans-serif;
+
+                &:hover {
+                  color: $blue;
+                  text-decoration: underline;
+                }
+              }
+            }
+
+            .post-date {
+              color: $lighter-base-font-color;
+              font: italic 300 1.2rem/1.6rem $sans-serif;
+              letter-spacing: 1px;
+            }
+          }
         }
       }
     }

lms/templates/index.html

@@ -39,7 +39,7 @@
 
   <section class="container">
     <section class="highlighted-courses">
-    <h2>Explore courses from <span class="lowercase">edX</span> universities</h2>
+      <h2>Explore courses from <span class="lowercase">edX</span> universities</h2>
 
       <section class="university-partners">
         <ol class="partners">
@@ -76,15 +76,48 @@
         %endfor
       </section>
     </section>
+  </section>
 
-    <section class="more-info">
-      <h2>edX News & Announcements</h2>
+  <section class="more-info">
+    <section class="container">
+      <header>
+        <h2>edX News & Announcements</h2>
+        <a href="/t/press.html">Read More &rarr;</a>
+      </header>
       <section class="news">
-        <article></article>
-        <article></article>
-        <article></article>
-        <article></article>
+        <section class="blog-posts">
+          <article>
+            <div class="post-graphics">
+              <img src="${static.url('images/courses/space1.jpg')}" />
+            </div>
+            <div class="post-name">
+              <h3><a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a></h3>
+              <p class="post-date">7/12/2012</p>
+            </div>
+          </article>
+
+          <article>
+            <div class="post-graphics">
+              <img src="${static.url('images/courses/space1.jpg')}" />
+            </div>
+            <div class="post-name">
+              <h3><a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a></h3>
+              <p class="post-date">7/12/2012</p>
+            </div>
+          </article>
+
+          <article>
+            <div class="post-graphics">
+              <img src="${static.url('images/courses/space1.jpg')}" />
+            </div>
+            <div class="post-name">
+              <h3><a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a></h3>
+              <p class="post-date">7/12/2012</p>
+            </div>
+          </article>
+        </section>
       </section>
     </section>
   </section>
+
 </section>

lms/templates/press.html

@@ -11,6 +11,14 @@
   </nav>
 
   <section class="press">
+    <section class="press-resources">
+      <section class="pressreleases">
+        <p>View our <a href="/t/pressrelease.html">Press Release</a></p>
+      </section>
+      <section class="identity-assets">
+        <p>Download our <a href="/t/pressrelease.html">Logos</a></p>
+      </section>
+    </section>
     <article class="press-story">
       <div class="article-cover">
         <img src="${static.url('images/courses/circuits.jpeg')}" />
@@ -18,6 +26,7 @@
       <div class="press-info">
         <header>
           <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
           <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
         </header>
         <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
@@ -31,6 +40,7 @@
       <div class="press-info">
         <header>
           <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
           <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
         </header>
         <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
@@ -44,6 +54,7 @@
       <div class="press-info">
         <header>
           <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
           <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
         </header>
         <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>
@@ -57,6 +68,7 @@
       <div class="press-info">
         <header>
           <h3>Online Classes Cut Costs, But Do They Dilute Brands?</h3>
+          <span class="post-date">7/12/2012</span>
           <a href="http://www.npr.org/2012/07/02/156122748/online-classes-cut-costs-but-do-they-dilute-brands">http://n.pr/Lt5ydM</a>
         </header>
         <p>"You know this is the Wild West. There's a lot of things we have to figure out," Agarwal says. "And you know if anybody says they know exactly what they're doing, I think that would be a far cry from reality."</p>