Merge pull request #1224 from MITx/content/rocha/media-kit

Add media kit page

lms/static/images/press-kit/anant-agarwal_high-res.jpg.REMOVED.git-id

@@ -0,0 +1 @@
+b154ce99fb5c8d413ba769e8cc0df94ed674c3f4

lms/static/images/press-kit/anant-tablet_high-res.jpg.REMOVED.git-id

@@ -0,0 +1 @@
+2b8c58b098bdb17f9ddcbb2098f94c50fdcedf60

lms/static/images/press-kit/edx-video-editing_high-res.jpg.REMOVED.git-id

@@ -0,0 +1 @@
+7d8b9879f7e5b859910edba7249661eedd3fcf37

lms/static/images/press-kit/piotr-mitros_high-res.jpg.REMOVED.git-id

@@ -0,0 +1 @@
+caf8b43337faa75cef5da5cd090010215a67b1bd

lms/static/sass/application.scss

@@ -22,6 +22,7 @@
 @import 'multicourse/courses';
 @import 'multicourse/course_about';
 @import 'multicourse/jobs';
+@import 'multicourse/media-kit';
 @import 'multicourse/about_pages';
 @import 'multicourse/press_release';
 @import 'multicourse/password_reset';

lms/static/sass/multicourse/_home.scss

@@ -336,6 +336,7 @@
       border-bottom: 1px solid rgb(200,200,200);
       @include clearfix;
       padding: 10px 20px 8px;
+      position: relative;
 
       h2 {
         float: left;
@@ -343,16 +344,22 @@
         text-shadow: 0 1px rgba(255,255,255, 0.6);
       }
 
-      a {
-        color: $lighter-base-font-color;
+      .action.action-mediakit {
         float: right;
-        font-style: italic;
-        font-family: $serif;
-        padding-top: 3px;
+        position: relative;
+        top: 5px;
+        font-family: $sans-serif;
+        font-size: 14px;
+        text-transform: uppercase;
         text-shadow: 0 1px rgba(255,255,255, 0.6);
 
-        &:hover {
-          color: $base-font-color;
+        &:after {
+          position: relative;
+          top: -1px;
+          display: inline-block;
+          margin: 0 0 0 5px;
+          content: "➤";
+          font-size: 11px;
         }
       }
     }

lms/static/sass/multicourse/_media-kit.scss

@@ -0,0 +1,260 @@
+// vars
+$baseline: 20px;
+$white: rgb(255,255,255);
+
+.mediakit {
+  @include box-sizing(border-box);
+  margin: 0 auto;
+  padding: ($baseline*3) 0;
+  width: 980px;
+
+  .wrapper-mediakit {
+    @include border-radius(4px);
+    @include box-sizing(border-box);
+    @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.1));
+    margin: ($baseline*3) 0 0 0;
+    border: 1px solid $border-color;
+    padding: ($baseline*2) ($baseline*3);
+
+    > section {
+      margin: 0 0 ($baseline*2) 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      header {
+        
+      }
+    }
+  }
+
+  h1 {
+    margin: 0 0 $baseline 0;
+    position: relative;
+    font-size: 36px;
+  }
+
+  hr {
+    @extend .faded-hr-divider-light;
+    border: none;
+    margin: 0px;
+    position: relative;
+    z-index: 2;
+
+    &::after {
+      @extend .faded-hr-divider;
+      bottom: 0px;
+      content: "";
+      display: block;
+      position: absolute;
+      top: -1px;
+    }
+  }
+
+  // general
+  a.action-download {
+    position: relative;
+    color: $blue;
+    font-family: $sans-serif;
+    text-decoration: none;
+    @include transition(all, 0.1s, linear);
+
+    .note {
+      position: relative;
+      color: $blue;
+      font-family: $sans-serif;
+      font-size: 13px;
+      text-decoration: none;
+      @include transition(all, 0.1s, linear);
+
+      &:before {
+        position: relative;
+        top: -1px;
+        margin: 0 5px 0 0;
+        content: "➤";
+        font-size: 11px;
+      }
+    }
+
+    &:hover {
+
+      .note {
+        color: shade($blue, 25%);
+      }
+    }
+  }
+
+  // introduction section
+  .introduction {
+    @include clearfix();
+
+    header {
+      margin: 0 0 ($baseline*1.5) 0;
+
+      h2 {
+        margin: 0;
+        color: rgb(178, 181, 185);
+        font-size: 32px;
+
+        .org-name {
+          color: rgb(178, 181, 185);
+          font-family: $serif;
+          text-transform: none;
+        }
+      }
+    }
+
+    article {
+      @include box-sizing(border-box);
+      width: 500px;
+      margin-right: $baseline;
+      float: left;
+    }
+
+    aside {
+      @include border-radius(2px);
+      @include box-sizing(border-box);
+      @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2));
+      width: 330px;
+      float: left;
+      border: 3px solid tint(rgb(96, 155, 216), 35%);
+      background: tint(rgb(96, 155, 216), 35%);
+
+      h3 {
+        padding: ($baseline/2) ($baseline*0.75);
+        font-family: $sans-serif;
+        font-weight: bold;
+        font-size: 16px;
+        letter-spacing: 0;
+        color: $white;
+        text-transform: uppercase;
+
+        .org-name {
+          color: $white !important;
+          font-weight: bold;
+          text-transform: none;
+        }
+      }
+
+      a.action-download {
+
+        .note {
+          width: 100%;
+          display: inline-block;
+          text-align: center;        
+        }
+      }
+
+      figure {
+        @include box-sizing(border-box);
+        background: $white;
+        width: 100%;
+
+        figcaption {
+          display: none;
+        }
+
+        a {
+          display: block;
+          padding: ($baseline/2);
+        }
+
+        img {
+          display: block;
+          margin: 0 auto;
+          width: 60%;
+        }
+      }
+    }
+  }
+
+  // library section
+  .library {
+    @include border-radius(2px);
+    @include box-sizing(border-box);
+    @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2));
+    border: 3px solid tint($light-gray,50%);
+    padding: 0;
+    background: tint($light-gray,50%);
+
+    header {
+      padding: ($baseline*0.75) $baseline;
+
+      h2 {
+        margin: 0;
+        padding: 0;
+        color: $dark-gray;
+        font-size: 16px;
+        font-family: $sans-serif;
+        font-weight: bold;
+        letter-spacing: 0;
+
+        .org-name {
+          color: $dark-gray !important;
+          font-weight: bold;
+          text-transform: none;
+        }
+      }
+    }
+
+    .listing {
+      @include clearfix();
+      background: $white;
+      margin: 0;
+      padding: ($baseline*2);
+      list-style: none;
+
+      li {
+        @include box-sizing(border-box);
+        overflow-y: auto;
+        float: left;
+        width: 350px;
+        margin: 0 0 $baseline 0;
+
+        &:nth-child(odd) {
+          margin-right: ($baseline*3.5);
+        }
+      }
+
+      figure {
+
+        a {
+          @include border-radius(2px);
+          @include box-sizing(border-box);
+          @include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1));
+          display: block;
+          min-height: 400px;
+          border: 2px solid tint($light-gray,75%);
+          padding: $baseline;
+
+          &:hover {
+            border-color: $blue;
+          }
+        }
+
+        img {
+          display: block;
+          border: 2px solid tint($light-gray,80%);
+          margin: 0 auto ($baseline*0.75) auto;
+        }
+
+        figcaption {
+          font-size: 13px;
+          line-height: 18px;
+          color: $text-color;
+        }
+
+        .note {
+          display: inline-block;
+          margin-top: ($baseline/2);
+        }
+      }
+    }
+  }
+
+  // share
+  .share {
+
+  }
+}

lms/templates/footer.html

@@ -6,7 +6,7 @@
   <nav>
     <section class="top">
       <section class="primary">
-        <a href="https://www.edx.org" class="logo"></a>
+        <a href="${reverse('root')}" class="logo"></a>
         <a href="${reverse('courses')}">Find Courses</a>
         <a href="${reverse('about_edx')}">About</a>
         <a href="http://blog.edx.org/">Blog</a>

lms/templates/index.html

@@ -121,6 +121,7 @@
     <section class="more-info">
       <header>
         <h2><span class="edx">edX</span> News &amp; Announcements</h2>
+        <a class="action action-mediakit" href="${reverse('media-kit')}"> edX Media Kit</a>
       </header>
       <section class="news">
         <section class="blog-posts">

lms/templates/static_templates/media-kit.html

@@ -0,0 +1,124 @@
+<%namespace name='static' file='../static_content.html'/>
+<%inherit file="../main.html" />
+
+<%block name="title"><title>EdX Media Kit</title></%block>
+
+<section class="mediakit">
+  <h1>EdX Media Kit</h1>
+
+  <hr />
+
+  <div class="wrapper wrapper-mediakit">
+    <section class="introduction">
+      <header>
+        <h2>Welcome to the <span class="org-name">edX</span> Media Kit</h2>
+      </header>
+
+      <article>
+        <p>Need images for a news story?  Feel free to download high-resolution versions of the photos below by clicking on the thumbnail.  Please credit edX in your use.</p>
+        <p>We’ve included visual guidelines on how to use the edX logo within the download zip which also includes Adobe Illustrator and eps versions of the logo. </p>
+        <p>For more information about edX, please contact <strong>Dan O&apos;Connell Associate Director of Communications</strong> via <a href="mailto:oconnell@edx.org?subject=edX Information Request (from Media Kit)">oconnell@edx.org</a>.</p>
+      </article>
+
+      <aside>
+        <h3>The <span class="org-name">edX</span> Logo</h3>
+        <figure class="logo">
+          <a class="action action-download" href="${static.url('files/edx-identity.zip')}">
+            <img src="${static.url('images/edx.png')}" />
+            <figcaption>.zip file containing Adobe Illustrator and .eps formats of logo alongside visual guidelines for use</figcaption>
+            <span class="note">Download</span>
+          </a>
+        </figure>
+      </aside>
+
+    </section>
+
+    <section class="library">
+      <header>
+        <h2>The <span class="org-name">edX</span> Media Library</h2>
+      </header>
+
+      <article>
+        <ul class="listing listing-media-items">
+          <li>
+            <figure>
+              <a class="action action-download" href="${static.url('images/press-kit/anant-agarwal_high-res.jpg')}">
+                <img src="${static.url('images/press-kit/anant-agarwal_x200.jpg')}"/>
+                <figcaption>Ananat Agarwal, President of edX, in his office in Cambridge, MA. The computer screen behind him shows a portion of a video lecture from 6.002x, Circuits &amp; Electronics, the MITx course taught by Agarwal.</figcaption>
+                <span class="note">High Resolution Photo</span>
+              </a>
+            </figure>
+          </li>
+          <li>
+            <figure>
+              <a class="action action-download" href="${static.url('images/press-kit/anant-tablet_high-res.jpg')}">
+                <img src="${static.url('images/press-kit/anant-tablet_x200.jpg')}"/>
+                <figcaption>Anant Agarwal creating a tablet-based lecture for 6.002x, Circuits & Electronics.</figcaption>
+                <span class="note">High Resolution Photo</span>
+              </a>
+            </figure>
+          </li>
+          <li>
+            <figure>
+              <a class="action action-download" href="${static.url('images/press-kit/piotr-mitros_high-res.jpg')}">
+                <img src="${static.url('images/press-kit/piotr-mitros_x200.jpg')}"/>
+                <figcaption>Piotr Mitros, Chief Scientist at edX, uses a Rostrum camera to create an overhead camera-based lecture. During this process, voice and video are recorded for an interactive tutorial.</figcaption>
+                <span class="note">High Resolution Photo</span>
+              </a>
+            </figure>
+          </li>
+          <li>
+            <figure>
+              <a class="action action-download" href="${static.url('images/press-kit/edx-video-editing_high-res.jpg')}">
+                <img src="${static.url('images/press-kit/edx-video-editing_x200.jpg')}"/>
+                <figcaption>One of edX’s video editors edits a lecture in a video suite.</figcaption>
+                <span class="note">High Resolution Photo</span>
+              </a>
+            </figure>
+          </li>
+          <li>
+            <figure>
+              <a class="action action-download" href="${static.url('images/press-kit/6.002x_high-res.png')}')}">
+                <img src="${static.url('images/press-kit/6.002x_x200.jpg')}"/>
+                <figcaption>Screenshot of 6.002x Circuits and Elecronics course.</figcaption>
+                <span class="note">High Resolution Photo</span>
+              </a>
+            </figure>
+          </li>
+          <li>
+            <figure>
+              <a class="action action-download" href="${static.url('images/press-kit/3.091x_high-res.png')}">
+                <img src="${static.url('images/press-kit/3.091x_x200.jpg')}"/>
+          <figcaption>Screenshot of 6.00x: Introduction to Computer Science and Programming.</figcaption>
+                <span class="note">High Resolution Photo</span>
+              </a>
+            </figure>
+          </li>
+        </ul>
+      </article>
+    </section>
+
+    <!-- <section class="share">
+      <header>
+        <h2>Share with friends and family:</h2>
+      </header>
+
+      <article>
+        <ul class="listing listing-share">
+          <li class="action action-twitter">
+            <a href="">
+
+            </a>
+          </li>
+          <li class="action action-email">
+            <a href="">
+
+            </a>
+          </li>
+          <li class="action action-facebook">
+          </li>
+        </ul>
+      </article>
+    </section> -->
+  </div>
+</section>

lms/urls.py

@@ -77,6 +77,8 @@ urlpatterns = ('',
     url(r'^contact$', 'static_template_view.views.render',
         {'template': 'contact.html'}, name="contact"),
     url(r'^press$', 'student.views.press', name="press"),
+    url(r'^media-kit$', 'static_template_view.views.render',
+        {'template': 'media-kit.html'}, name="media-kit"),
     url(r'^faq$', 'static_template_view.views.render',
         {'template': 'faq.html'}, name="faq_edx"),
     url(r'^help$', 'static_template_view.views.render',