EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

the learn more section: it toggles. toggle toggle toggle

pull/1/head
Andromeda Yelton 2011-12-20 13:31:20 -05:00
parent 269ebc4789
commit 2432b991b5
11 changed files with 99 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/templates/home.html
View File

@ -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();
</div>
</div>
<div class="user-block-hide">
<p>We all have books we love so much, we'd like to give them to the world.</p>
<p>
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:
</p>
<p>
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.
</p>
<p>
<a href="https://creativecommons.org/">Creative Commons</a> licensing means everyone, everywhere can read and share the unglued book — freely and legally. You've given your favorite book to the world.
</p>
<div class="quicktour"><span class="highlight">We all have books we love so much, we'd like to give them to the world.</span> We want to share them, but also reward their creators. With digital books, it can be hard to do both.</div>
<div class="movingrightalong"></div>
<div class="quicktour"><span class="highlight">Unglue.it offers a win-win solution: Crowdfunding.</span> 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.</div>
<div class="movingrightalong"></div>
<div class="quicktour last"><a href="https://creativecommons.org/">Creative Commons</a> licensing means everyone, everywhere can read and share the unglued book — freely and legally. <span class="highlight">You've given your favorite book to the world.</span></div>
</div>
</div>
</div>

34
static/css/landingpage.css
View File

@ -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;
}

10
static/css/sitewide.css
View File

@ -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;

BIN
static/images/landingpage/quicktour-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 B

BIN
static/images/landingpage/signmeup-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/images/learnmore-downarrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 B

BIN
static/images/learnmore-uparrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 B

2
static/less/book_list.less
View File

@ -200,7 +200,7 @@ ul.navigation {
}
ul.navigation li a:hover, ul.navigation li.active a {
color: #8ac3d7;
color: @bright-blue;
text-decoration:underline;
}

56
static/less/landingpage.less
View File

@ -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;
}
}

15
static/less/sitewide.less
View File

@ -95,7 +95,7 @@ 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;
@ -103,8 +103,13 @@ a.readon {
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;

1
static/less/variables.less
View File

@ -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";