Skip to content

E
edx-platform
Commit a67b54bf by Brian Talbot
Options

media kit - added initial styles to media kit page

parent e10e87e6
Showing with 346 additions and 92 deletions
lms/static/sass/multicourse/_media-kit.scss
.container.press-kit { // vars
padding: 60px 30px 120px; $baseline: 20px;
$white: rgb(255,255,255);
.intro { .mediakit {
@include clearfix; @include box-sizing(border-box);
margin-bottom: 20px; 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; position: relative;
font-size: 36px;
}
.message { hr {
float: left; @extend .faded-hr-divider-light;
width: flex-grid(7); 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);
p { .note {
margin-left: 0; position: relative;
line-height: 1.6; color: $blue;
font-size: 1.1em; font-family: $sans-serif;
color: #666; 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;
}
} }
} }
.logo-sidebar { article {
@include box-sizing(border-box); @include box-sizing(border-box);
border: 3px solid rgb(220,220,220); width: 500px;
margin-right: $baseline;
float: left; float: left;
padding: 20px; }
img { aside {
height: 200px; @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;
}
} }
figcaption { figure {
text-align: center; @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%;
}
} }
} }
} }
.media-library { // library section
@include clearfix; .library {
float: left; @include border-radius(2px);
width: flex-grid(12); @include box-sizing(border-box);
margin-right: flex-gutter(); @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%);
> h2 { header {
display: none; padding: ($baseline*0.75) $baseline;
margin-bottom: 60px;
padding-bottom: 20px; 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;
}
}
} }
.media-listing { .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 { figure {
width: flex-grid(4);
border-bottom: 1px solid rgb(220,220,220); a {
padding: 40px 0px; @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 { img {
text-align: center; display: block;
border: 2px solid tint($light-gray,80%);
margin: 0 auto ($baseline*0.75) auto;
} }
figcaption { figcaption {
padding: 10px; font-size: 13px;
font-size: 0.95em; line-height: 18px;
color: #666; color: $text-color;
}
.note {
display: inline-block;
margin-top: ($baseline/2);
} }
} }
} }
} }
}
// share
.share {
}
}
\ No newline at end of file
lms/templates/static_templates/media-kit.html
...@@ -3,61 +3,122 @@ ...@@ -3,61 +3,122 @@
<%block name="title"><title>EdX Media Kit</title></%block> <%block name="title"><title>EdX Media Kit</title></%block>
<section class="container press-kit"> <section class="mediakit">
<h1>EdX Media Kit</h1> <h1>EdX Media Kit</h1>
<section class="intro"> <hr />
<header>
<h2>Welcome to the edX Media Kit</h2> <div class="wrapper wrapper-mediakit">
</header> <section class="introduction">
<div class="message"> <header>
<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> <h2>Welcome to the <span class="org-name">edX</span> Media Kit</h2>
<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> </header>
<p>For more information about edX, please contact Dan O’Connell Associate Director of Communications via <a href="mailto:oconnell@edx.org">oconnell@edx.org</a>.</p>
</div> <article>
<section class="logo-sidebar"> <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>
<h2>The edX Logo</h2> <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>
<figure class="logo"> <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>
<img src="${static.url('images/edx.png')}" /> </article>
<figcaption> <a href="${static.url('files/edx-identity.zip')}">&gt; download now</a></figcaption>
</figure> <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>
</section>
<section class="library">
<section class="media-library"> <header>
<header> <h2>The <span class="org-name">edX</span> Media Library</h2>
<h2>The edX Media Library</h2> </header>
</header>
<div class="media-listing"> <article>
<figure> <ul class="listing listing-media-items">
<img src="${static.url('images/press-kit/anant-agarwal_x200.jpg')}"/> <li>
<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. <a href="${static.url('images/press-kit/anant-agarwal_high-res.jpg')}"> &gt; high-res</a></figcaption> <figure>
</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')}"/>
<figure> <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>
<img src="${static.url('images/press-kit/anant-tablet_x200.jpg')}"/> <span class="note">High Resolution Photo</span>
<figcaption>Anant Agarwal creating a tablet-based lecture for 6.002x, Circuits & Electronics. <a href="${static.url('images/press-kit/anant-tablet_high-res.jpg')}"> &gt; high-res</a></figcaption> </a>
</figure> </figure>
</li>
<figure> <li>
<img src="${static.url('images/press-kit/piotr-mitros_x200.jpg')}"/> <figure>
<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. <a href="${static.url('images/press-kit/piotr-mitros_high-res.jpg')}"> &gt; high-res</a></figcaption> <a class="action action-download" href="${static.url('images/press-kit/anant-tablet_high-res.jpg')}">
</figure> <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>
<figure> <span class="note">High Resolution Photo</span>
<img src="${static.url('images/press-kit/edx-video-editing_x200.jpg')}"/> </a>
<figcaption>One of edX’s video editors edits a lecture in a video suite. <a href="${static.url('images/press-kit/edx-video-editing_high-res.jpg')}"> &gt; high-res</a></figcaption> </figure>
</figure> </li>
<li>
<figure> <figure>
<img src="${static.url('images/press-kit/6.002x_x200.jpg')}"/> <a class="action action-download" href="${static.url('images/press-kit/piotr-mitros_high-res.jpg')}">
<figcaption>Screenshot of 6.002x Circuits and Elecronics course. <a href="${static.url('images/press-kit/6.002x_high-res.png')}"> &gt; high-res</a></figcaption> <img src="${static.url('images/press-kit/piotr-mitros_x200.jpg')}"/>
</figure> <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>
<figure> </a>
<img src="${static.url('images/press-kit/3.091x_x200.jpg')}"/> </figure>
<figcaption>Screenshot of 6.00x: Introduction to Computer Science and Programming. <a href="${static.url('images/press-kit/3.091x_high-res.png')}"> &gt; high-res</a></figcaption> </li>
</figure> <li>
</div> <figure>
</section> <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> </section>
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