Commit 46c1b526 authored by adhilnv's avatar adhilnv
Browse files

Changed website color scheme. Fixed some spacing issues. Added smooth scroll....

Changed website color scheme. Fixed some spacing issues. Added smooth scroll. Hiding back to top button if it is already on top
parent 025e0350
No preview for this file type
......@@ -9,7 +9,7 @@
Base styles: opinionated defaults
========================================================================== */
html,button,input,select,textarea {
color: #000000;
color: #222222;
}
body {
......@@ -84,7 +84,7 @@ Author's custom styles
========================================================================== */
/* ====Structure and Utility Classes==== */
body {
background: #eee;
background: #F4F4F4;
color: #222;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
......@@ -131,7 +131,8 @@ article.info p {
hgroup h1 {
font-weight: 400;
font-size: 1.5em;
font-size: 2em;
font-family: serif;
margin-bottom: 0;
padding-top: 0;
}
......@@ -146,7 +147,7 @@ hgroup h2 {
/* ====Header==== */
header {
margin-top: 1.8em;
background: #96C8A2;
background: #00b3ff;
height: 2.5em;
}
......@@ -181,7 +182,7 @@ header nav ul li:last-child:after {
}
header nav ul li a {
color: #ffffff;
color: #f2f2f2;
font-size: 0.8em;
padding: 0.20em 0.5em;
line-height: 2.8em;
......@@ -192,35 +193,30 @@ header nav ul li a {
header nav ul li a:hover {
color: #fff;
text-shadow: #f2f2f2 -1px 1px 1px;
}
/* ====Main Body==== */
p.intro {
margin-top: 1.05em;
color: #000000;
color: #76778A;
font-size: 4em;
font-weight: 700;
width: 8em;
}
.text {
color:#222;
}
.red {
color: #c57482;
}
/* ====Meter==== */
#meter {
margin: 5em 3.2em 0 1.5em;
width: 22em;
color: #6D7B8D ;
color: #fff;
font-size: 1em;
}
#meter .wrap {
padding: 1em 2em;
background-color:#E8E8E8 ;
background-color: #76777A;
}
#meter img {
......@@ -228,23 +224,17 @@ p.intro {
padding-bottom: 0.2em;
}
#meter ul li {
width: 22em;
color: #6D7B8D ;
}
.time-left {
text-align: right;
font-weight: 300;
margin: 0;
font-size: 0.9em;
padding: 0;
color: #000000;
color: #f4f4f4;
}
.time-left span.amount {
color: #000;
color: #fff;
font-weight: 700;
}
......@@ -279,20 +269,20 @@ width: 22em;
font-size: 1.3em;
font-weight: 300;
margin-bottom: 0;
color: #000;
color: #eee;
}
.money-goal span {
font-weight: 400;
color: #f70000;
color: #fff;
}
a.donate {
width: 100%;
display: block;
text-align: center;
background-color: #96C8A2;
color: #A34041;
background-color: #00b3ff;
color: #fff;
font-weight: 300;
border: none;
font-size: 1.3em;
......@@ -302,33 +292,18 @@ a.donate {
border-bottom-right-radius: 0.425em;
border-bottom-left-radius: 0.425em;
-webkit-box-shadow: 0 0.1em 0.1em #ddd;
box-shadow: 0 0.1em 0.1em #ddd;
box-shadow: 0 0.1em 0.5em #aaa;
text-decoration: none;
}
a.donate2 {
width: 10em;
height: 5em;
display: block;
text-align: center;
background-color: #96C8A2;
color: #A34041;
font-weight: 300;
border: none;
font-size: 1.3em;
line-height: 5em;
padding: 0.15em 0.15em 0.15em 0.15em;
margin-top: 0em;
border-bottom-right-radius: 0.425em;
border-bottom-left-radius: 0.425em;
border-top-left-radius: 0.425em;
border-top-right-radius: 0.425em;
-webkit-box-shadow: 0 0.1em 0.1em #ddd;
box-shadow: 0 0.1em 0.1em #ddd;
text-decoration: none;
a.donate.variant {
width: 8em;
border-radius: 0.425em;
}
a.donate:hover {
background-color: #acd7ca;
background-color: #33d0ff;
box-shadow: 0 0.1em 0.1em #aaa;
}
/* Video */
......@@ -352,10 +327,10 @@ a.donate:hover {
/* paragraph after who*/
#who .person {
width: 6em;
height: 6em;
width: 7em;
height: 7em;
background: #ddd;
margin: 1em;
margin: 0.5em;
float:left;
}
......@@ -372,8 +347,8 @@ a.donate:hover {
}
#who .person img {
width: 6em;
height: 6em;
width: 100%;
height: 7em;
}
#perks .pull-right{
......@@ -396,7 +371,7 @@ article.info p {
/* Footer*/
footer:before {
margin-top: 5em;
margin-top: 1em;
content: "***";
display: block;
font-size: 2em;
......@@ -528,7 +503,7 @@ Inlined to avoid required HTTP connection: h5bp.com/r
text-shadow: none !important;
}
a,a:visited {
a, a:visited {
text-decoration: underline;
}
......@@ -586,12 +561,12 @@ h2,h3 {
line-height: 20px;
border: 1px solid #e6e6e6;
border-radius: 4px;
}
#gBtn:hover {
background-color: #cc3732;
color: #fff;
border: 1px solid #dd4b39;
}
Website/img/loader.gif

23.3 KB | W: | H:

Website/img/loader.gif

23.4 KB | W: | H:

Website/img/loader.gif
Website/img/loader.gif
Website/img/loader.gif
Website/img/loader.gif
  • 2-up
  • Swipe
  • Onion skin
......@@ -36,7 +36,7 @@
<li><a href="#who">Who are we?</a></li>
<li><a href="#impact">The Impact</a></li>
<li><a href="#needs">What we want?</a></li>
<li><a href="#perks">What you get?</a></li>
<li><a href="#perks">What you get?</a></li>
<li><a href="#spread">Spread the word</a></li>
</ul>
</nav>
......@@ -45,7 +45,7 @@
<section id="main">
<!-- Introduction -->
<article id="intro" class="page-width">
<p class="intro pull-left"><span class="text">Help us keep diaspora live at</span> <span class="red">poddery.com</span></p>
<p class="intro pull-left">Help us keep diaspora live at poddery.com</p>
<aside id="meter" class="pull-right">
<div class="wrap">
<p class="time-left"><i class="icon-time"></i> <span><img src="img/loader.gif" alt="Loading..." /></span></p>
......@@ -110,8 +110,10 @@
</div>
<div class="person">
<wrap>
<wrap>
<a href="https://joindiaspora.com/u/akshayramesh"/><img src="Team/akshay.png" alt="Akshay"></a>
</img>
</wrap>
</div>
......@@ -152,7 +154,7 @@
<a href="https://joindiaspora.com/u/jay_aurabind"><img src="Team/Aurobindonew.png" alt="Aurabindo"></a>
</img>
</wrap>
</div>
</div>
<div class="person">
<wrap>
<a href="https://joindiaspora.com/u/balasankarc"><img src="Team/balu.png" alt="Balasankar"></a>
......@@ -344,7 +346,7 @@
</p>
</div>
<div class="pull-right">
<a href="http://www.indiegogo.com/projects/keep-diaspora-service-at-poddery-com-live" class="donate2" width=30>Donate Now</a>
<a href="http://www.indiegogo.com/projects/keep-diaspora-service-at-poddery-com-live" class="donate variant">Donate Now</a>
</div>
<div class="clearfix"></div>
<div id="smc">
......@@ -410,7 +412,7 @@
</img>
</a>
</aside>
<hgroup>
<h1>Share</h1>
......@@ -419,8 +421,8 @@
</p>
<a href="http://sharetodiaspora.github.com/?title=Save Poddery Campaign&url=http://www.savepoddery.com/ #savepoddery" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
......@@ -432,23 +434,23 @@
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
src="images/g+.jpg" alt="Share on Google+"/></a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwww.savepoddery.com%2F&related=savepoddery&text=Help%20us%20keep%20diaspora%20live%20at%20poddery.com%20-%20%20Join%20us%20at%20www.savepoddery.com%20%20%23savepoddery&tw_p=tweetbutton&url=www.savepoddery.com" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
src="images/t.jpg" alt="Share on Twitter"/></a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.facebook.com/sharer.php?u=www.savepoddery.com&t=Join Save Poddery Campaign" onclick="javascript:window.open(this.href,
'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><img
src="images/facebook.jpg" alt="Share on Facebook"/></a>
<br />
&nbsp;&nbsp;&nbsp;&nbsp;
<br />
......@@ -469,23 +471,33 @@
</article>
<div class="clearfix"></div>
<hr class="divide" />
</section>
<footer>
<p>an initiative by diaspora community and supported by <a href="http://helloinfinity.com">HelloInfinity</a></p><br/>
</footer>
<footer>
<p>an initiative by diaspora community and supported by <a href="http://helloinfinity.com">HelloInfinity</a></p><br/>
</footer>
</section>
<a style="position: fixed; bottom:5px;right:5px;" id="backtotop" href="#" title="Back to Top"><img style="border: none;" src="images/backtotop.jpg"/></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/vendor/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function(){
$("#video").fitVids();
$('a').smoothScroll();
$(window).scroll(function(){
if($(window).scrollTop()>100) {
$('#backtotop').show();
}
else {
$('#backtotop').hide();
}
})
});
</script>
......@@ -498,6 +510,5 @@
// g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
// s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<a style="position: fixed; bottom:5px;right:5px;" href="#" title="Back to Top"><img style="border: none;" src="images/backtotop.jpg"/></a>
</body>
</html>
(function($) {
var version = '1.4.10',
defaults = {
exclude: [],
excludeWithin:[],
offset: 0,
// one of 'top' or 'left'
direction: 'top',
// jQuery set of elements you wish to scroll (for $.smoothScroll).
// if null (default), $('html, body').firstScrollable() is used.
scrollElement: null,
// only use if you want to override default behavior
scrollTarget: null,
// fn(opts) function to be called before scrolling occurs.
// `this` is the element(s) being scrolled
beforeScroll: function() {},
// fn(opts) function to be called after scrolling occurs.
// `this` is the triggering element
afterScroll: function() {},
easing: 'swing',
speed: 400,
// coefficient for "auto" speed
autoCoefficent: 2
},
getScrollable = function(opts) {
var scrollable = [],
scrolled = false,
dir = opts.dir && opts.dir == 'left' ? 'scrollLeft' : 'scrollTop';
this.each(function() {
if (this == document || this == window) { return; }
var el = $(this);
if ( el[dir]() > 0 ) {
scrollable.push(this);
} else {
// if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
el[dir](1);
scrolled = el[dir]() > 0;
if ( scrolled ) {
scrollable.push(this);
}
// then put it back, of course
el[dir](0);
}
});
// If no scrollable elements, fall back to <body>,
// if it's in the jQuery collection
// (doing this because Safari sets scrollTop async,
// so can't set it to 1 and immediately get the value.)
if (!scrollable.length) {
this.each(function(index) {
if (this.nodeName === 'BODY') {
scrollable = [this];
}
});
}
// Use the first scrollable element if we're calling firstScrollable()
if ( opts.el === 'first' && scrollable.length > 1 ) {
scrollable = [ scrollable[0] ];
}
return scrollable;
},
isTouch = 'ontouchend' in document;
$.fn.extend({
scrollable: function(dir) {
var scrl = getScrollable.call(this, {dir: dir});
return this.pushStack(scrl);
},
firstScrollable: function(dir) {
var scrl = getScrollable.call(this, {el: 'first', dir: dir});
return this.pushStack(scrl);
},
smoothScroll: function(options) {
options = options || {};
var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
locationPath = $.smoothScroll.filterPath(location.pathname);
this
.unbind('click.smoothscroll')
.bind('click.smoothscroll', function(event) {
var link = this,
$link = $(this),
exclude = opts.exclude,
excludeWithin = opts.excludeWithin,
elCounter = 0, ewlCounter = 0,
include = true,
clickOpts = {},
hostMatch = ((location.hostname === link.hostname) || !link.hostname),
pathMatch = opts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) || locationPath ) === locationPath,
thisHash = escapeSelector(link.hash);
if ( !opts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
include = false;
} else {
while (include && elCounter < exclude.length) {
if ($link.is(escapeSelector(exclude[elCounter++]))) {
include = false;
}
}
while ( include && ewlCounter < excludeWithin.length ) {
if ($link.closest(excludeWithin[ewlCounter++]).length) {
include = false;
}
}
}
if ( include ) {
event.preventDefault();
$.extend( clickOpts, opts, {
scrollTarget: opts.scrollTarget || thisHash,
link: link
});
$.smoothScroll( clickOpts );
}
});
return this;
}
});
$.smoothScroll = function(options, px) {
var opts, $scroller, scrollTargetOffset, speed,
scrollerOffset = 0,
offPos = 'offset',
scrollDir = 'scrollTop',
aniProps = {},
aniOpts = {},
scrollprops = [];
if (typeof options === 'number') {
opts = $.fn.smoothScroll.defaults;
scrollTargetOffset = options;
} else {
opts = $.extend({}, $.fn.smoothScroll.defaults, options || {});
if (opts.scrollElement) {
offPos = 'position';
if (opts.scrollElement.css('position') == 'static') {
opts.scrollElement.css('position', 'relative');
}
}
}
opts = $.extend({link: null}, opts);
scrollDir = opts.direction == 'left' ? 'scrollLeft' : scrollDir;
if ( opts.scrollElement ) {
$scroller = opts.scrollElement;
scrollerOffset = $scroller[scrollDir]();
} else {
$scroller = $('html, body').firstScrollable();
}
// beforeScroll callback function must fire before calculating offset
opts.beforeScroll.call($scroller, opts);
scrollTargetOffset = (typeof options === 'number') ? options :
px ||
( $(opts.scrollTarget)[offPos]() &&
$(opts.scrollTarget)[offPos]()[opts.direction] ) ||
0;
aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
speed = opts.speed;
// automatically calculate the speed of the scroll based on distance / coefficient
if (speed === 'auto') {
// if aniProps[scrollDir] == 0 then we'll use scrollTop() value instead
speed = aniProps[scrollDir] || $scroller.scrollTop();
// divide the speed by the coefficient
speed = speed / opts.autoCoefficent;
}
aniOpts = {
duration: speed,
easing: opts.easing,
complete: function() {
opts.afterScroll.call(opts.link, opts);
}
};
if (opts.step) {
aniOpts.step = opts.step;
}
if ($scroller.length) {
$scroller.stop().animate(aniProps, aniOpts);
} else {
opts.afterScroll.call(opts.link, opts);
}
};
$.smoothScroll.version = version;
$.smoothScroll.filterPath = function(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
};
// default options
$.fn.smoothScroll.defaults = defaults;
function escapeSelector (str) {
return str.replace(/(:|\.)/g,'\\$1');
}
})(jQuery);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment