From 9096a8ed6d4111be741b2c9e2c273798c5e917f1 Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Wed, 7 Mar 2012 13:22:12 -0500 Subject: [PATCH] separating code shared by home.html and supporter.html into own includable files --- static/css/searchandbrowse.css | 196 +++++++++++++++++++++++++++++++ static/js/slideshow.js | 15 +++ static/less/searchandbrowse.less | 104 ++++++++++++++++ 3 files changed, 315 insertions(+) create mode 100644 static/css/searchandbrowse.css create mode 100644 static/js/slideshow.js create mode 100644 static/less/searchandbrowse.less diff --git a/static/css/searchandbrowse.css b/static/css/searchandbrowse.css new file mode 100644 index 00000000..1d7b6941 --- /dev/null +++ b/static/css/searchandbrowse.css @@ -0,0 +1,196 @@ +/* variables and mixins used in multiple less files go here */ +.header-text { + height: 36px; + line-height: 36px; + display: block; + text-decoration: none; + font-weight: bold; + font-size: 13px; + letter-spacing: -0.05em; +} +.panelborders { + border-width: 1px 0px; + border-style: solid none; + border-color: #FFFFFF; +} +.roundedspan { + border: 1px solid #d4d4d4; + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + border-radius: 7px; + padding: 1px; + color: #fff; + margin: 0 8px 0 0; + display: inline-block; +} +.roundedspan > span { + padding: 7px 7px; + min-width: 15px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + text-align: center; + display: inline-block; +} +.roundedspan > span .hovertext { + display: none; +} +.roundedspan > span:hover .hovertext { + display: inline; +} +.mediaborder { + padding: 5px; + border: solid 5px #EDF3F4; +} +.google_signup_div { + padding: 14px 0; +} +.google_signup_div div { + height: 24px; + line-height: 24px; + float: left; + padding-left: 5px; +} +.google_signup_div img { + float: left; + height: 24px; + width: 24px; +} +.actionbuttons { + width: auto; + height: 36px; + line-height: 36px; + background: #8dc63f; + -moz-border-radius: 32px; + -webkit-border-radius: 32px; + border-radius: 32px; + color: white; + cursor: pointer; + font-size: 13px; + font-weight: bold; + padding: 0 15px; + border: none; + margin: 5px 0; +} +.errors { + -moz-border-radius: 32px; + -webkit-border-radius: 32px; + border-radius: 32px; + border: solid #e35351 4px; + width: 90%; + padding: 5px; + font-weight: bold; + padding: 7px 0; + height: 16px; + line-height: 16px; + text-align: center; +} +.errors li { + list-style: none; + border: none; +} +#js-maincontainer-bot-block { + width: 100%; + clear: both; + overflow: hidden; + margin-top: 55px; +} +#js-maincontainer-bot-block #js-search { + -moz-border-radius: 64px; + -webkit-border-radius: 64px; + border-radius: 64px; + background-color: #8dc63f; + width: 628px; + height: 80px; + overflow: hidden; + clear: both; + color: #fff; +} +#js-maincontainer-bot-block #js-search label { + line-height: 80px; + font-size: 18px; + float: left; + padding: 0; + width: auto; + padding: 0 15px 0 30px; +} +#js-maincontainer-bot-block #js-search form { + float: left; + width: 210px; + background: url("/static/images/landingpage/search-box-two.png") 0 0 no-repeat; + height: 36px; + display: block; + overflow: hidden; + margin-top: 22px; +} +#js-slideshow { + padding: 0 30px; + position: relative; +} +#js-slideshow a.prev { + text-indent: -10000px; + font-size: 0; + width: 15px; + height: 22px; + display: block; + position: absolute; + top: 45%; + background: url("/static/images/landingpage/arrow-left.png") 0 0 no-repeat; + left: 0; +} +#js-slideshow a.next { + text-indent: -10000px; + font-size: 0; + width: 15px; + height: 22px; + display: block; + position: absolute; + top: 45%; + background: url("/static/images/landingpage/arrow-right.png") 0 0 no-repeat; + right: 0; +} +.spacer { + float: left; + margin: 0 4px; +} +#js-search input.inputbox { + border: none; + color: #66942e; + height: 26px; + line-height: 26px; + font-size: 13px; + float: left; + padding: 0; + margin: 5px 0 5px 20px; + width: 149px; + outline: none; +} +#js-search input.greenbutton { + background: url("/static/images/landingpage/search-button-two.png") 0 0 no-repeat; + width: 40px; + height: 40px; + padding: 0; + margin: 0; + border: none; + display: block; + float: right; + text-indent: -10000px; + font-size: 0; +} +#js-slide .jsmodule > h3 { + background: url("/static/images/landingpage/bg-slide.png") bottom center no-repeat; + padding-bottom: 7px; + padding-left: 35px; +} +#js-slide .jsmodule > h3 span { + background: #8ac3d7; + color: #fff; + padding: 10px 20px; + -moz-border-radius: 10px 10px 0 0; + -webkit-border-radius: 10px 10px 0 0; + border-radius: 10px 10px 0 0; + font-size: 18px; + overflow: hidden; + display: inline-block; + font-weight: normal; +} diff --git a/static/js/slideshow.js b/static/js/slideshow.js new file mode 100644 index 00000000..e808a02d --- /dev/null +++ b/static/js/slideshow.js @@ -0,0 +1,15 @@ +var $j = jQuery.noConflict(); + $j(function(){ + $j('#js-slideshow').slides({ + preload: true, + preloadImage: '/static/images/landingpage/loading.gif', + hoverPause: true, + generateNextPrev: true, + next: 'next', + prev: 'prev', + pagination: true, + generatePagination: false, + slideSpeed: 600, + autoHeight: true + }); + }); diff --git a/static/less/searchandbrowse.less b/static/less/searchandbrowse.less new file mode 100644 index 00000000..8660c53d --- /dev/null +++ b/static/less/searchandbrowse.less @@ -0,0 +1,104 @@ +@import "variables.less"; + +#js-maincontainer-bot-block { + width:100%; + clear:both; + overflow:hidden; + margin-top:55px; + + #js-search { + .one-border-radius(64px); + background-color: @call-to-action; + width:628px; + height:80px; + overflow:hidden; + clear:both; + color:#fff; + + label { + line-height:80px; + font-size:18px; + float:left; + padding:0; + width:auto; + padding:0 15px 0 30px; + } + + form { + float:left; + width:210px; + background:url("@{image-base}landingpage/search-box-two.png") 0 0 no-repeat; + height:36px; + display:block; + overflow:hidden; + margin-top:22px; + } + } +} + +#js-slideshow { + padding:0 30px; + position:relative; + + a.prev { + .clickyarrows(); + background:url("@{image-base}landingpage/arrow-left.png") 0 0 no-repeat; + left: 0; + } + + a.next { + .clickyarrows(rt); + background:url("@{image-base}landingpage/arrow-right.png") 0 0 no-repeat; + right: 0; + } +} + +.spacer { + float: left; + margin: 0 4px; +} + + +#js-search input { + &.inputbox { + border:none; + color:#66942e; + .height(26px); + font-size:13px; + float:left; + padding:0; + margin:5px 0 5px 20px; + width: 149px; + outline: none; + } + + &.greenbutton { + background:url("@{image-base}landingpage/search-button-two.png") 0 0 no-repeat; + width:40px; + height:40px; + padding:0; + margin:0; + border:none; + display:block; + float: right; + text-indent:-10000px; + font-size:0; + } +} + +#js-slide .jsmodule > h3 { + background:url("@{image-base}landingpage/bg-slide.png") bottom center no-repeat; + padding-bottom:7px; + padding-left:35px; + + span { + background:@bright-blue; + color:#fff; + padding:10px 20px; + .border-radius(10px, 10px, 0, 0); + font-size:18px; + overflow:hidden; + display:inline-block; + font-weight:normal; + } +}