Skip to content

E
edx-platform
Commit 67dea0c3 by David Ormsbee
Options

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

Add media kit page
parents 559bf887 2e6ac2f7
Showing with 412 additions and 8 deletions
lms/static/images/press-kit/anant-agarwal_high-res.jpg.REMOVED.git-id 0 → 100644
b154ce99fb5c8d413ba769e8cc0df94ed674c3f4
\ No newline at end of file
lms/static/images/press-kit/anant-tablet_high-res.jpg.REMOVED.git-id 0 → 100644
2b8c58b098bdb17f9ddcbb2098f94c50fdcedf60
\ No newline at end of file
lms/static/images/press-kit/edx-video-editing_high-res.jpg.REMOVED.git-id 0 → 100644
7d8b9879f7e5b859910edba7249661eedd3fcf37
\ No newline at end of file
lms/static/images/press-kit/piotr-mitros_high-res.jpg.REMOVED.git-id 0 → 100644
caf8b43337faa75cef5da5cd090010215a67b1bd
\ No newline at end of file
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 → 100644
// 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 {
}
}
\ No newline at end of file
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 → 100644
<%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',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment