From 2432b991b55a0edc4b6d7b703eec9ce8a15080d7 Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Tue, 20 Dec 2011 13:31:20 -0500 Subject: [PATCH] the learn more section: it toggles. toggle toggle toggle --- frontend/templates/home.html | 16 ++--- static/css/landingpage.css | 34 +++++++++-- static/css/sitewide.css | 10 +++- static/images/landingpage/quicktour-arrow.png | Bin 0 -> 284 bytes static/images/landingpage/signmeup-arrow.png | Bin 0 -> 1083 bytes static/images/learnmore-downarrow.png | Bin 0 -> 566 bytes static/images/learnmore-uparrow.png | Bin 0 -> 537 bytes static/less/book_list.less | 2 +- static/less/landingpage.less | 56 ++++++++++++++---- static/less/sitewide.less | 15 +++-- static/less/variables.less | 1 + 11 files changed, 99 insertions(+), 35 deletions(-) create mode 100644 static/images/landingpage/quicktour-arrow.png create mode 100644 static/images/landingpage/signmeup-arrow.png create mode 100644 static/images/learnmore-downarrow.png create mode 100644 static/images/learnmore-uparrow.png 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 0000000000000000000000000000000000000000..cee3c5c417a64084cd400ba627be2ba7b19a3a13 GIT binary patch literal 284 zcmeAS@N?(olHy`uVBq!ia0vp^JRmj)8<3o<+3y6T7>k44ofy`glX(f`uqAoByDx`7I;J!Gca%qgD@k*tT_@uLG}_)Usv|qJR$<}V%>bjRzRUSo-U3d8t0S$ z{Qv*Ip3S7-^HXa!Ju@-3NJqO8O*S<)od@^-|L57g&OV{y&p+WpsSlY+HkJQx{_vd_8`Dpn;E}+3W%<&gq{!E-_r*^8A?d zBU1xIBcmM|Cxn+X-h8a{Mn{L|PR<&ab|K|$Gxq&^qzopr0PNIh)Bpeg literal 0 HcmV?d00001 diff --git a/static/images/landingpage/signmeup-arrow.png b/static/images/landingpage/signmeup-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..404fff7b81d38be4bdf6b46b94e17c0458e6cba5 GIT binary patch literal 1083 zcmV-B1jPG^P)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipu3 z5H5LvXTnidj)gbJla zAR*w^N{#3ts?-w-RS#9AUMiusxmP(f0;yFFa6lX)g&dF!1huI`Q6sky+$6RVaP7qP z+F574wtEO3vR<$4RC%YJx9jicc{6Y3V~WLM5miFZuVEqi8=kJ*#flbzmPpW+PZgPD9mW zmhX?WeT;tZC+6AL0=2o{z_IpEu}A8*oz1cuLU8d1L{q=h+{5T~FksQ=9k9;qX(EW* zPrjlr2*csMjv)k;({-0{Ha3ns;b9bt2F;z_|1~Ws0RSzR!kzH9CeZnVSGNQLfPiuu z=MP>5VO|w%GCT||mwE-8UK%rPh77}uaHOuAKG4uR} zX^jrGoUw=m7ep}@=6xKKO8Ve`y!L7f(G&N~?WDOOQ;b9Pl!?^?BP*AxZ zPehPLVJA%_*5*w@{-(n(1-Po^DuMh>hfVp-dQyV|qPV(fVm|qcMW`0g4pgqExVk|6 zavx2odJM~IsBU02(6Smb^`&3#1L^eigChb>-dh~0ID>LvHBh+@M+9_w`auNNiJsjT z=!-~d2D7p8sz9EIRY9|{aYRxxblkK10tD8%am8r46h zwFM6%KjLBZx=Fz6eiKLA2W#Hc_ZCM?rK@BOEFL7dFoIu~ezx@>&Eh`rtcYA*LqeOk z^&oGzerUN3Y~9twv+uC^D62PkBI5n7FY0qwrO4>lXf00001b5ch_0Itp) z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipu3 z5*H^CjV)#X00Fj1L_t(o!_C;SO2a@L$MJ7#L=hp2P&!zr4kvv9Yi~C=Irtn3;=O_p zQA7k^!9fs2QRpNQs!kn>LArG*U4(*zVv7!XHLX?@WA1)SNceO4aF-naB;^O;3x7)& zs78(#z`2s*{x^f9Vt@=w8Q51+9GQmbRDe|_#m#p`Y5qTRz_lNQJAM$3n1tx804IJB zPMU@QEWFQ-YZ?MD3mgnClL?5PnJpV204shFmTZ6kY}f)R`9Zj30|a0_sh#yFnXzF; z02Xb5lv0n+otH6ZgtK~+TB|*@vXF7{@>!lbU3RbPaYL%u|Meay+F&+5(ISut`$9WS4y7y(A>W6Wf_)@t_+u9rX~3K_Q#@!j(MB@WOVTmuRj zmuYtbcYHJv1n|&%YX)Z~K?Fdf@AVzTB!mFC{j`rnF$p06E}gHg)>`eP06M2O?5q_f zMZ*TjrVVXCMSp;qhA104v^^!orD;eRST)_n-vP@?impjW87L|#+9tpB_5g3#e-kGG zzzwh#eK3=TRDf+I#o>?pkvMuzK7L(Qfny~_<2M7m0s;S|lf$LxsQ>@~07*qoM6N<$ Eg6W6g1ONa4 literal 0 HcmV?d00001 diff --git a/static/images/learnmore-uparrow.png b/static/images/learnmore-uparrow.png new file mode 100644 index 0000000000000000000000000000000000000000..4fdc7876843949602965c91b77d8c15d8e62920a GIT binary patch literal 537 zcmV+!0_OdRP)>lXf00001b5ch_0Itp) z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipu3 z5*ITISNR(N00EgvL_t(o!_C++OT$1I#_@lnqfn4SajBE&Nq13uql4(;=7(?)qz8V5 z6vToc_yJrL1VJh|Nuq){IEWF7OBN}VLcu}N5|<{3Mn#Nw_bf-aQg(APY_!Vt#A{fcdczU6_jV6(Wu%%%t-bqWkos6H{{15I3zZJ6HGIw7R-5 zLrxl^(R=`)(R|Q`$wg6=e7@&lo3pU}Y0+${z)Y!-JlFiYtQ{Ta`L&n4eHsGbENmxL ziq~hH(3Xa_YeS0%@NIz{*#NmvQiL`@YBn4Ld?m$!4UlykPH6S_w?9*mV_?nnDgG8% z{&@9t3{+xDNzpZV)2joEN{Yv{$w3_rtN$0^^1DU<2{{3_<390IvVg?Dtm5$$I95`0 bezVCNcS?|Vda!Cz00000NkvXXu0mjff|uZ0 literal 0 HcmV?d00001 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";