Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - soft landing: further styling and modal set-up - WIP

Browse Source
This commit is contained in:
Brian Talbot
2013-02-04 20:25:58 -05:00
parent db21156d40
commit b654ee4006
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
cms/static/img/hiw-feature1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

36
cms/static/sass/_index.scss
View File

@@ -148,37 +148,35 @@
position: relative;
top: 0;
display: block;
overflow: hidden;
border: 1px solid $gray-l3;
padding: ($baseline/4);
background: $white;
.action-zoom {
@include transition(opacity .15s ease-in-out);
opacity: 0;
@include transition(bottom .50s ease-in-out);
position: absolute;
left: 110px;
top: 110px;
min-height: 300px;
min-width: 300px;
bottom: -30px;
right: ($baseline/2);
opacity: 0;
.ss-icon {
@include font-size(32);
@include border-radius(($baseline));
@include font-size(18);
@include border-radius(2px);
display: inline-block;
padding: ($baseline*1.5) $baseline $baseline $baseline;
padding: ($baseline/4) ($baseline/2);
background: $blue;
color: $white;
text-align: center;
line-height: 2.75rem;
}
}
&:hover {
border-color: $blue;
top: -($baseline/5);
.action-zoom {
opacity: 0.8;
opacity: 1.0;
bottom: -2px;
}
}
}
@@ -207,7 +205,8 @@
}
strong {
font-weight: 700;
color: $pink-l1;
font-weight: 500;
}
.list-proofpoints {
@@ -219,7 +218,7 @@
.proofpoint {
@include box-sizing(border-box);
@include border-radius(($baseline/4));
@include transition(color .15s ease-in-out);
@include transition(color .50s ease-in-out);
position: relative;
top: 0;
float: left;
@@ -238,12 +237,13 @@
}
&:hover {
background: $blue-l5;
color: $blue-l2;
@include box-shadow(0 1px ($baseline/10) $shadow-l1);
background: $blue;
color: $blue-l3;
top: -($baseline/5);
.title {
color: $blue-d1;
.title, strong {
color: $white;
}
}

23
cms/templates/howitworks.html
View File

@@ -24,7 +24,7 @@
<ol class="list-features">
<li class="feature">
<figure class="img zoom">
<a href="/static/img/howitworks-feature1.png">
<a rel="modal" href="#hiw-feature1">
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
<figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
<span class="action-zoom">
@@ -58,7 +58,7 @@
<li class="feature">
<figure class="img zoom">
<a href="/static/img/howitworks-feature2.png">
<a rel="modal" href="#hiw-feature2">
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
<figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
<span class="action-zoom">
@@ -92,7 +92,7 @@
<li class="feature">
<figure class="img zoom">
<a href="/static/img/thumb-hiw-feature3.png">
<a rel="modal" href="#hiw-feature3">
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
<figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
<span class="action-zoom">
@@ -143,12 +143,29 @@
</ul>
</section>
</div>
<!-- <div class="content-modal" id="hiw-feature1">
<h3>Feature #1</h3>
<img src="/static/img/hiw-feature1.png" alt="" />
</div>
<div class="content-modal" id="hiw-feature2">
<h3>Feature #2</h3>
<img src="/static/img/hiw-feature1.png" alt="" />
</div>
<div class="content-modal" id="hiw-feature3">
<h3>Feature #3</h3>
<img src="/static/img/hiw-feature1.png" alt="" />
</div> -->
</%block>
<%block name="jsextra">
<script type="text/javascript">
(function() {
$("a[rel*=modal]").leanModal({closeButton: ".modal_close"});
})(this)
</script>
</%block>