diff --git a/frontend/templates/home.html b/frontend/templates/home.html index 91182f3f..3c49ad61 100755 --- a/frontend/templates/home.html +++ b/frontend/templates/home.html @@ -18,6 +18,7 @@ function() { $j(this).toggleClass("active"); $j(".user-block-hide").slideToggle(300); + $j("a.readon").toggleClass("down"); } ); }); @@ -79,16 +80,11 @@ var $j = jQuery.noConflict();
-

We all have books we love so much, we'd like to give them to the world.

-

- We want to share them, but also reward their creators. With digital books, it can be hard to do both. Unglue.it offers a win-win solution: -

-

- Crowdfunding. We run pledge campaigns for books; you chip in. When, together, we've reached the goal, we'll reward the book's creators and issue an unglued ebook. -

-

- Creative Commons licensing means everyone, everywhere can read and share the unglued book — freely and legally. You've given your favorite book to the world. -

+
We all have books we love so much, we'd like to give them to the world. We want to share them, but also reward their creators. With digital books, it can be hard to do both.
+
+
Unglue.it offers a win-win solution: Crowdfunding. We run pledge campaigns for books; you chip in. When, together, we've reached the goal, we'll reward the book's creators and issue an unglued ebook.
+
+
Creative Commons licensing means everyone, everywhere can read and share the unglued book — freely and legally. You've given your favorite book to the world.
diff --git a/static/css/landingpage.css b/static/css/landingpage.css index 1822c92e..7f47b556 100644 --- a/static/css/landingpage.css +++ b/static/css/landingpage.css @@ -18,7 +18,7 @@ } #main-container.main-container-fl .js-main { width: 968px; - background: #ffffff url(/static/images/landingpage/container-top.png) top center no-repeat; + background: #ffffff url("/static/images/landingpage/container-top.png") top center no-repeat; } #js-maincol-fl { padding: 30px 30px 0 30px; @@ -49,6 +49,32 @@ float: left; width: 100%; clear: both; + border-top: solid 1px #8ac3d7; + margin-top: 20px; +} +.user-block-hide .quicktour { + width: 270px; + float: left; + font-style: italic; + line-height: 20px; + font-size: 13px; + margin-top: 20px; +} +.user-block-hide .quicktour .highlight { + font-weight: bold; +} +.user-block-hide .quicktour.last { + padding-right: 0px; + width: 270px; + background: url("/static/images/landingpage/signmeup-arrow.png") no-repeat center bottom; + padding-bottom: 42px; +} +.user-block-hide .movingrightalong { + background: url("/static/images/landingpage/quicktour-arrow.png") no-repeat center; + height: 100px; + width: 75px; + float: left; + margin-top: 20px; } .user-block1, .user-block2 { float: left; @@ -281,7 +307,7 @@ h2.page-heading { #js-maincontainer-bot-block #js-search form { float: left; width: 210px; - background: url(/static/images/landingpage/search-box-two.png) 0 0 no-repeat; + background: url("/static/images/landingpage/search-box-two.png") 0 0 no-repeat; height: 36px; display: block; overflow: hidden; @@ -300,7 +326,7 @@ h2.page-heading { outline: none; } #js-search input.greenbutton { - background: url(/static/images/landingpage/search-button-two.png) 0 0 no-repeat; + background: url("/static/images/landingpage/search-button-two.png") 0 0 no-repeat; width: 40px; height: 40px; padding: 0; @@ -329,7 +355,7 @@ h2.page-heading { text-decoration: underline; } #js-slide .jsmodule > h3 { - background: url(/static/images/landingpage/bg-slide.png) bottom center no-repeat; + background: url("/static/images/landingpage/bg-slide.png") bottom center no-repeat; padding-bottom: 7px; padding-left: 35px; } diff --git a/static/css/sitewide.css b/static/css/sitewide.css index ac9b3d85..665a7702 100644 --- a/static/css/sitewide.css +++ b/static/css/sitewide.css @@ -85,7 +85,7 @@ ul.menu { margin: 0; } a.readon { - background: url("/static/images/bg.png") 100% -72px no-repeat; + background: url("/static/images/learnmore-downarrow.png") right center no-repeat; color: #fff; text-transform: capitalize; display: block; @@ -93,8 +93,14 @@ a.readon { font-size: 13px; font-weight: bold; } +a.readon.down { + background: url("/static/images/learnmore-uparrow.png") right center no-repeat; +} a.readon span { - background: url("/static/images/bg.png") -770px -108px no-repeat; + -moz-border-radius: 32px 0 0 32px; + -webkit-border-radius: 32px 0 0 32px; + border-radius: 32px 0 0 32px; + background-color: #8ac3d7; margin-right: 34px; padding: 0 5px 0 20px; height: 36px; diff --git a/static/images/landingpage/quicktour-arrow.png b/static/images/landingpage/quicktour-arrow.png new file mode 100644 index 00000000..cee3c5c4 Binary files /dev/null and b/static/images/landingpage/quicktour-arrow.png differ diff --git a/static/images/landingpage/signmeup-arrow.png b/static/images/landingpage/signmeup-arrow.png new file mode 100644 index 00000000..404fff7b Binary files /dev/null and b/static/images/landingpage/signmeup-arrow.png differ diff --git a/static/images/learnmore-downarrow.png b/static/images/learnmore-downarrow.png new file mode 100644 index 00000000..f28339ff Binary files /dev/null and b/static/images/learnmore-downarrow.png differ diff --git a/static/images/learnmore-uparrow.png b/static/images/learnmore-uparrow.png new file mode 100644 index 00000000..4fdc7876 Binary files /dev/null and b/static/images/learnmore-uparrow.png differ diff --git a/static/less/book_list.less b/static/less/book_list.less index cd043dd9..e28edb02 100755 --- a/static/less/book_list.less +++ b/static/less/book_list.less @@ -200,7 +200,7 @@ ul.navigation { } ul.navigation li a:hover, ul.navigation li.active a { - color: #8ac3d7; + color: @bright-blue; text-decoration:underline; } diff --git a/static/less/landingpage.less b/static/less/landingpage.less index a0f2fc02..3fc51b61 100644 --- a/static/less/landingpage.less +++ b/static/less/landingpage.less @@ -15,7 +15,7 @@ #main-container.main-container-fl .js-main { width:968px; - background:#fff url(/static/images/landingpage/container-top.png) top center no-repeat; + background:#fff url("@{image-base}landingpage/container-top.png") top center no-repeat; } #js-maincol-fl, { padding:30px 30px 0 30px; @@ -52,6 +52,36 @@ float: left; width:100%; clear:both; + border-top: solid 1px @bright-blue; + margin-top: 20px; + + .quicktour { + width: 270px; + float: left; + font-style: italic; + line-height:20px; + font-size:13px; + margin-top: 20px; + + .highlight { + font-weight: bold; + } + + &.last { + padding-right:0px; + width:270px; + background: url("@{image-base}landingpage/signmeup-arrow.png") no-repeat center bottom; + padding-bottom: 42px; + } + } + + .movingrightalong { + background: url("@{image-base}landingpage/quicktour-arrow.png") no-repeat center; + height: 100px; + width: 75px; + float: left; + margin-top: 20px; + } } .user-block1, .user-block2 { @@ -147,7 +177,7 @@ h3.heading { } input.signup { - background: url("/static/images/landingpage/button.png") no-repeat 0 0; + 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); @@ -225,7 +255,7 @@ div.signup_btn { overflow:hidden; a { - background: url("/static/images/bg.png") no-repeat scroll right top transparent; + background: url("@{image-base}bg.png") no-repeat scroll right top transparent; color: #fff; display: block; font-size: 13px; @@ -237,7 +267,7 @@ div.signup_btn { float:left; span { - background: url("/static/images/bg.png") no-repeat scroll -770px -36px transparent; + background: url("@{image-base}bg.png") no-repeat scroll -770px -36px transparent; display: block; margin-right: 29px; padding: 0 5px 0 15px; @@ -251,7 +281,7 @@ div.signup_btn { width:364px; font-size:14px; height: 132px; - border-bottom:7px solid #8ac3d7; + border-bottom:7px solid @bright-blue; p { margin-bottom:20px; @@ -271,7 +301,7 @@ div.signup_btn { float:right; h3 { - color:#8ac3d7; + color:@bright-blue; text-transform:uppercase; font-size:24px; font-weight:normal; @@ -295,7 +325,7 @@ h2.page-heading { margin-top:55px; #js-search { - //background:url(/static/images/landingpage/bg-search.png) 0 0 no-repeat; + //background:url("@{image-base}andingpage/bg-search.png") 0 0 no-repeat; .border-radius(64px, 64px, 64px, 64px); background-color: @call-to-action; width:628px; @@ -316,7 +346,7 @@ h2.page-heading { form { float:left; width:210px; - background:url(/static/images/landingpage/search-box-two.png) 0 0 no-repeat; + background:url("@{image-base}landingpage/search-box-two.png") 0 0 no-repeat; height:36px; display:block; overflow:hidden; @@ -339,7 +369,7 @@ h2.page-heading { } &.greenbutton { - background:url(/static/images/landingpage/search-button-two.png) 0 0 no-repeat; + background:url("@{image-base}landingpage/search-button-two.png") 0 0 no-repeat; width:40px; height:40px; padding:0; @@ -374,12 +404,12 @@ h2.page-heading { } #js-slide .jsmodule > h3 { - background:url(/static/images/landingpage/bg-slide.png) bottom center no-repeat; + background:url("@{image-base}landingpage/bg-slide.png") bottom center no-repeat; padding-bottom:7px; padding-left:35px; span { - background:#8ac3d7; + background:@bright-blue; color:#fff; padding:10px 20px; .border-radius(10px, 10px, 0, 0); @@ -414,13 +444,13 @@ h3.module-title { a.prev { .clickyarrows(); - background:url("/static/images/landingpage/arrow-left.png") 0 0 no-repeat; + background:url("@{image-base}landingpage/arrow-left.png") 0 0 no-repeat; left: 0; } a.next { .clickyarrows(rt); - background:url("/static/images/landingpage/arrow-right.png") 0 0 no-repeat; + background:url("@{image-base}landingpage/arrow-right.png") 0 0 no-repeat; right: 0; } } diff --git a/static/less/sitewide.less b/static/less/sitewide.less index ab32f023..0c7f2782 100644 --- a/static/less/sitewide.less +++ b/static/less/sitewide.less @@ -95,16 +95,21 @@ ul.menu{ } a.readon { - background:url(@background-header) 100% -72px no-repeat; + background:url("@{image-base}learnmore-downarrow.png") right center no-repeat; color:#fff; text-transform:capitalize; display:block; float:right; font-size:13px; font-weight:bold; + + &.down { + background:url("@{image-base}learnmore-uparrow.png") right center no-repeat; + } span { - background:url(@background-header) -770px -108px no-repeat; + .border-radius(32px, 0, 0, 32px); + background-color: @bright-blue; margin-right:34px; padding:0 5px 0 20px; .height(36px); @@ -177,9 +182,9 @@ a.readon { .inputbox { padding:0 0 0 15px; margin:0; - border-top: solid 4px #8ac3d7; - border-left: solid 4px #8ac3d7; - border-bottom: solid 4px #8ac3d7; + border-top: solid 4px @bright-blue; + border-left: solid 4px @bright-blue; + border-bottom: solid 4px @bright-blue; border-right: none; .border-radius(50px, 0, 0, 50px); outline: none; diff --git a/static/less/variables.less b/static/less/variables.less index eeaebc40..ea86a295 100644 --- a/static/less/variables.less +++ b/static/less/variables.less @@ -7,6 +7,7 @@ @dark-green: #73a334; @dark-blue: #37414d; @blue-grey: #d6dde0; +@bright-blue: #8ac3d7; @image-base: "/static/images/"; @background-header: "@{image-base}bg.png"; @background-body: "@{image-base}bg-body.png";