updating look of campaign and landing page to match latest from Stefan

pull/1/head
Andromeda Yelton 2011-12-20 15:33:20 -05:00
parent 10fdf1f90a
commit c7293e253a
14 changed files with 133 additions and 98 deletions

View File

@ -29,7 +29,7 @@ jQuery(document).ready(function(){
<div class="jsmodule rounded">
{% if work.last_campaign %}
{% if status == 'ACTIVE' %}
<div class="jsmod-content active {{ work.percent_unglued}}">
<div class="jsmod-content active{{ work.percent_unglued}}">
<span>
Campaign in Progress: <br />${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }}
{% else %}

View File

@ -86,6 +86,9 @@ div.book-list.listview div.create-account span {
div.book-list.listview div.add-wishlist span, div.book-list.listview div.create-account span {
background: url("/static/images/booklist/add-wishlist.png") left center no-repeat;
}
div.book-list.listview div.remove-wishlist span {
background: url("/static/images/booklist/remove-wishlist-blue.png") left center no-repeat;
}
div.book-list.listview div > span.on-wishlist {
background: url("/static/images/checkmark_small.png") left center no-repeat;
}

View File

@ -37,6 +37,24 @@
border: none;
margin: 0;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active0, #js-leftcol .jsmodule.rounded .jsmod-content.active1 {
background: #e35351;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active2 {
background: #e18551;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active3 {
background: #e5a956;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active4 {
background: #efd45e;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active5 {
background: #bbcf67;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active6 {
background: #8dc63f;
}
#js-leftcol .jsmodule.rounded .jsmod-content span {
display: inline-block;
vertical-align: middle;
@ -44,24 +62,6 @@
#js-leftcol .jsmodule.rounded .jsmod-content span.spacer {
visibility: none;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active.0, #js-leftcol .jsmodule.rounded .jsmod-content.active.1 {
background: #e35351;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active.2 {
background: #e18551;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active.3 {
background: #e5a956;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active.4 {
background: #efd45e;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active.5 {
background: #bbcf67;
}
#js-leftcol .jsmodule.rounded .jsmod-content.active.6 {
background: #8dc63f;
}
.book-detail {
float: left;
width: 100%;
@ -190,7 +190,7 @@ ul.tabs li a:hover, ul.tabs li.active a {
margin-bottom: 20px;
}
#js-rightcol h3.jsmod-title {
background: #3d4e53;
background: #a7c1ca;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
@ -307,21 +307,19 @@ ul.social li.embed:hover span {
}
ul.support li {
border-bottom: 1px solid #d6dde0;
padding: 10px 0 10px 0;
margin-right: 15px;
padding: 10px 5px 10px 10px;
background: url("/static/images/icons/pledgearrow.png") 98% center no-repeat;
}
ul.support li span {
display: block;
padding-right: 10px;
}
ul.support li span.menu-item-price {
font-size: 18px;
}
ul.support li:hover {
background-color: #8dc63f;
color: #fff;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #8dc63f url("/static/images/icons/pledgearrow-hover.png") 98% center no-repeat;
}
ul.support li:hover a {
color: #fff;
@ -374,6 +372,9 @@ a {
.add-wishlist span, .create-account span {
background: url("/static/images/booklist/add-wishlist.png") left center no-repeat;
}
.remove-wishlist span {
background: url("/static/images/booklist/remove-wishlist-blue.png") left center no-repeat;
}
.editions {
clear: both;
}

View File

@ -143,6 +143,29 @@
border-bottom: none;
padding-bottom: 10px;
}
#js-rightcol .jsmodule input, #js-rightcol2 .jsmodule input {
-moz-border-radius: 32px 32px 32px 32px;
-webkit-border-radius: 32px 32px 32px 32px;
border-radius: 32px 32px 32px 32px;
border: none;
height: 36px;
line-height: 36px;
width: 90%;
outline: none;
padding-left: 16px;
}
#js-rightcol .jsmodule input.signup, #js-rightcol2 .jsmodule input.signup {
background: url("/static/images/landingpage/button.png") no-repeat 0 0;
border: medium none;
color: #FFF;
cursor: pointer;
display: inline-block;
font-weight: bold;
font-size: 13px;
overflow: hidden;
padding: 0 31px 0 11px;
width: 111px;
}
#js-rightcol div.button, #js-rightcol2 div.button {
padding-top: 10px;
}
@ -159,20 +182,6 @@ h3.heading {
color: #3d4e53;
font-weight: bold;
}
input.signup {
background: url("/static/images/landingpage/button.png") no-repeat 0 0;
border: medium none;
color: #FFF;
cursor: pointer;
display: inline-block;
font-weight: bold;
font-size: 13px;
height: 36px;
line-height: 36px;
overflow: hidden;
padding: 0 31px 0 11px;
width: 111px;
}
ul.ungluingwhat {
list-style: none;
padding: 0;
@ -373,6 +382,8 @@ h2.page-heading {
}
h3.module-title {
padding: 14px 0;
font-size: 17px;
font-weight: normal;
}
.google_signup {
padding: 14px 0;

View File

@ -58,14 +58,18 @@ h2.content-heading span {
font-style: italic;
}
h3.jsmod-title {
background: url("/static/images/bg.png") 0 0 no-repeat;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #a7c1ca;
padding: 0;
margin: 0;
height: 73px;
}
h3.jsmod-title span {
font-size: 17px;
color: #fff;
font-size: 19px;
font-style: italic;
color: #3d4e53;
padding: 26px 40px 27px 20px;
display: block;
}
@ -215,7 +219,6 @@ a.readon span {
}
#js-leftcol .jsmod-content {
border: solid 1px #edf3f4;
margin-left: 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 762 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 809 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 B

View File

@ -80,6 +80,7 @@ div.book-list.listview{
}
&.remove-wishlist span {
background:url("@{image-base}booklist/remove-wishlist-blue.png") left center no-repeat;
}
> span.on-wishlist {

View File

@ -34,7 +34,7 @@
margin-bottom:10px;
&.rounded .jsmod-content {
.border-radius(20px, 20px, 20px, 20px);
.border-radius(20px, 20px, 20px, 20px);
background:@pale-blue;
color: @text-blue;
padding:10px 20px;
@ -42,6 +42,30 @@
border:none;
margin:0;
&.active0, &.active1 {
background: #e35351;
}
&.active2 {
background: #e18551;
}
&.active3 {
background: #e5a956;
}
&.active4 {
background: #efd45e;
}
&.active5 {
background: #bbcf67;
}
&.active6 {
background: @green;
}
span {
display: inline-block;
vertical-align: middle;
@ -49,32 +73,7 @@
span.spacer {
visibility: none;
}
&.active.0, &.active.1 {
background: #e35351;
}
&.active.2 {
background: #e18551;
}
&.active.3 {
background: #e5a956;
}
&.active.4 {
background: #efd45e;
}
&.active.5 {
background: #bbcf67;
}
&.active.6 {
background: @green;
}
}
}
}
@ -226,7 +225,7 @@ ul.tabs {
margin-bottom: 20px;
h3.jsmod-title {
background:@text-blue;
background:@medium-blue-grey;
.border-radius(10px, 10px, 10px, 10px);
padding:10px;
height:auto;
@ -312,11 +311,12 @@ ul.social li {
ul.support li {
border-bottom:1px solid @blue-grey;
padding:10px 0 10px 0;
margin-right: 15px;
padding:10px 5px 10px 10px;
background:url("@{image-base}icons/pledgearrow.png") 98% center no-repeat;
span {
display:block;
padding-right:10px;
&.menu-item-price {
font-size:18px;
@ -324,9 +324,8 @@ ul.support li {
}
&:hover {
background-color: @call-to-action;
color: #fff;
.border-radius(10px, 10px, 10px, 10px);
background:@call-to-action url("@{image-base}icons/pledgearrow-hover.png") 98% center no-repeat;
a {
color: #fff;
}
@ -376,6 +375,10 @@ a{ color:#3d4e53; font-size:12px;}
background:url("@{image-base}booklist/add-wishlist.png") left center no-repeat;
}
.remove-wishlist span {
background:url("@{image-base}booklist/remove-wishlist-blue.png") left center no-repeat;
}
.editions {
clear: both;

View File

@ -153,6 +153,33 @@
border-bottom:none;
padding-bottom:10px;
}
input {
.border-radius(32px, 32px, 32px, 32px);
border: none;
.height(36px);
width:90%;
outline: none;
padding-left: 16px;
}
input.signup {
background: url("@{image-base}landingpage/button.png") no-repeat 0 0;
//the following are part of what we need to move this from graphics to css
// which we will need if we institute a call-to-action color separately from green
//.border-radius(32px, 0, 0, 32px);
//background-color: @call-to-action;
border: medium none;
color: #FFF;
cursor: pointer;
display: inline-block;
font-weight: bold;
font-size: 13px;
overflow: hidden;
padding: 0 31px 0 11px;
width: 111px;
}
}
div.button {
@ -176,24 +203,6 @@ h3.heading {
font-weight:bold;
}
input.signup {
background: url("@{image-base}landingpage/button.png") no-repeat 0 0;
//the following are part of what we need to move this from graphics to css
// which we will need if we institute a call-to-action color separately from green
//.border-radius(32px, 0, 0, 32px);
//background-color: @call-to-action;
border: medium none;
color: #FFF;
cursor: pointer;
display: inline-block;
font-weight: bold;
font-size: 13px;
.height(36px);
overflow: hidden;
padding: 0 31px 0 11px;
width: 111px;
}
ul.ungluingwhat {
list-style: none;
padding:0;
@ -422,6 +431,8 @@ h2.page-heading {
h3.module-title {
padding: 14px 0;
font-size:17px;
font-weight: normal;
}
.google_signup {

View File

@ -62,14 +62,16 @@ h2 {
h3 {
&.jsmod-title {
background:url(@background-header) 0 0 no-repeat;
.border-radius(8px, 8px, 0, 0);
background: @medium-blue-grey;
padding:0;
margin:0;
height:73px;
span {
font-size:17px;
color:#fff;
font-size:19px;
font-style: italic;
color:@text-blue;
padding:26px 40px 27px 20px;
display:block;
}
@ -231,7 +233,6 @@ a.readon {
.jsmod-content {
border: solid 1px @pale-blue;
margin-left:10px;
.border-radius(0, 0, 10px, 10px);
}

View File

@ -1,6 +1,7 @@
/* variables and mixins used in multiple less files go here */
@text-blue: #3d4e53;
@medium-blue: #6994a3;
@medium-blue-grey: #a7c1ca;
@pale-blue: #edf3f4;
@green: #8dc63f;
@call-to-action: #8dc63f;