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 {
padding: 60px 30px 120px;
// vars
$baseline: 20px;
$white: rgb(255,255,255);
.intro {
@include clearfix;
margin-bottom: 20px;
.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;
}
.message {
float: left;
width: flex-grid(7);
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);
p {
margin-left: 0;
line-height: 1.6;
font-size: 1.1em;
color: #666;
.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;
}
}
}
.logo-sidebar {
article {
@include box-sizing(border-box);
border: 3px solid rgb(220,220,220);
width: 500px;
margin-right: $baseline;
float: left;
padding: 20px;
}
img {
height: 200px;
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;
}
}
figcaption {
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%;
}
}
}
}
.media-library {
@include clearfix;
float: left;
width: flex-grid(12);
margin-right: flex-gutter();
// 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%);
> h2 {
display: none;
margin-bottom: 60px;
padding-bottom: 20px;
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;
}
}
}
.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 {
width: flex-grid(4);
border-bottom: 1px solid rgb(220,220,220);
padding: 40px 0px;
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 {
text-align: center;
display: block;
border: 2px solid tint($light-gray,80%);
margin: 0 auto ($baseline*0.75) auto;
}
figcaption {
padding: 10px;
font-size: 0.95em;
color: #666;
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/static_templates/media-kit.html
......@@ -3,61 +3,122 @@
<%block name="title"><title>EdX Media Kit</title></%block>
<section class="container press-kit">
<section class="mediakit">
<h1>EdX Media Kit</h1>
<section class="intro">
<header>
<h2>Welcome to the edX Media Kit</h2>
</header>
<div class="message">
<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 Dan O’Connell Associate Director of Communications via <a href="mailto:oconnell@edx.org">oconnell@edx.org</a>.</p>
</div>
<section class="logo-sidebar">
<h2>The edX Logo</h2>
<figure class="logo">
<img src="${static.url('images/edx.png')}" />
<figcaption> <a href="${static.url('files/edx-identity.zip')}">&gt; download now</a></figcaption>
</figure>
<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>
<section class="media-library">
<header>
<h2>The edX Media Library</h2>
</header>
<div class="media-listing">
<figure>
<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. <a href="${static.url('images/press-kit/anant-agarwal_high-res.jpg')}"> &gt; high-res</a></figcaption>
</figure>
<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. <a href="${static.url('images/press-kit/anant-tablet_high-res.jpg')}"> &gt; high-res</a></figcaption>
</figure>
<figure>
<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. <a href="${static.url('images/press-kit/piotr-mitros_high-res.jpg')}"> &gt; high-res</a></figcaption>
</figure>
<figure>
<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. <a href="${static.url('images/press-kit/edx-video-editing_high-res.jpg')}"> &gt; high-res</a></figcaption>
</figure>
<figure>
<img src="${static.url('images/press-kit/6.002x_x200.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>
</figure>
<figure>
<img src="${static.url('images/press-kit/3.091x_x200.jpg')}"/>
<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>
</figure>
</div>
</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>
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