<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="content" class="content clearfix home">
<section id="section" class="light nopad-t nopad-b">
<div class="row">
<div class="col-12">
<div id="face" class="face">
<a href="/portfolio">
<div id="designer" class="designer">
<div id="designer-desc" class="description">
<h1>designer</h1>
<p>UI/UX Designer with a passion for designing beautiful and functional user experiences. <span class="more">Minimalist who believes that less is more.</span></p>
</div>
</div>
</a>
<a href="/about">
<div id="coder" class="coder">
<div id="coder-desc" class="description">
<h1><coder></h1>
<p>Front End Developer who focuses on writing clean, elegant and efficient code. <span class="more">Love HTML, CSS, WordPress and a touch of jQuery.</span></p>
</div>
</div>
</a>
<img id="face-img" class="face-img" src="http://www.adhamdannaway.com/wp-content/themes/ad/images/adham-dannaway-designer-coder.jpg" alt="adham dannaway ui designer">
<div id="designer-img" class="designer-img"></div>
<div id="coder-img" class="coder-img"></div>
<div id="designer-bg" class="designer-bg"></div>
<div id="coder-bg" class="coder-bg"></div>
</div>
</div>
</div>
</section>
<div>
<section class="dark">
<div class="row">
<div class="col-12">
<div id="content-detail">
<!-- Show 3 random portfolio posts -->
<div class="header-center">
<h3>Some of my latest work</h3></div>
<ul id="thumbs" class="thumbs clearfix">
<li>
<a href="http://www.adhamdannaway.com/portfolio/growth-giant">
<img src="http://www.adhamdannaway.com/wp-content/uploads/2012/12/feature-growth-giant-brand.jpg" class="attachment-post-thumbnail wp-post-image" alt="feature-growth-giant-brand" />
<div class="description">
<span class="arrow-r"></span>
<h4>Growth Giant</h4>
<p>Brand & Website Design</p>
</div>
</a>
</li>
<li>
<a href="http://www.adhamdannaway.com/portfolio/hrhr">
<img src="http://www.adhamdannaway.com/wp-content/uploads/2012/08/feature-hrhr.jpg" class="attachment-post-thumbnail wp-post-image" alt="feature-hrhr" />
<div class="description">
<span class="arrow-r"></span>
<h4>HRHR</h4>
<p>Brand & Website Design</p>
</div>
</a>
</li>
<li>
<a href="http://www.adhamdannaway.com/portfolio/campaign-monitor">
<img src="http://www.adhamdannaway.com/wp-content/uploads/2014/07/feature-subscriber-notifications.jpg" class="attachment-post-thumbnail wp-post-image" alt="feature-subscriber-notifications" />
<div class="description">
<span class="arrow-r"></span>
<h4>Campaign Monitor</h4>
<p>Subscriber Notification Emails</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<!-- / content-detail -->
</div>
<!-- / content -->
/* Reset =================================================== */
/*
Theme Name: Adham Dannaway
Theme URI: http://www.adhamdannaway.com/
Description: Hand crafted portfolio website of Adham Dannaway
Author: Adham Dannaway
Author URI: http://www.adhamdannaway.com/
Version: 2.0
*/
/* Reset =================================================== */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: bottom;
background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
/* Variables =================================================== */
/* Mixins =================================================== */
.clearfix,
section,
.row {
*zoom: 1;
}
.clearfix:before,
section:before,
.row:before,
.clearfix:after,
section:after,
.row:after {
display: table;
content: "";
}
.clearfix:after,
section:after,
.row:after {
clear: both;
}
/* Effects =================================================== */
/* Animate all */
.animate,
.top,
header nav li a,
.thumbs li {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
/* Animate opacity */
.animate-opacity,
.social a,
.logo,
.contact a {
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
/* Rounded corners top only */
.rounded-top,
.bar-chart li {
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
}
/* Text Shadow */
.text-shadow-black,
.bar-chart .percent,
.bar-chart .skill,
a.button,
.submit {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
}
.text-shadow-white,
.bar-chart .label,
.concept,
.header-center h3 {
text-shadow: 0px 1px 1px #ffffff;
}
.shadow {
-webkit-appearance: none;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
/* Helpers =================================================== */
.align-c {
text-align: center !important;
}
.align-l {
text-align: left !important;
}
.align-r {
text-align: right !important;
}
.nopad-t {
padding-top: 0 !important;
}
.nopad-b {
padding-bottom: 0 !important;
}
.nopad {
padding: 0 !important;
}
.margin-b {
margin-bottom: 80px !important;
}
.margin-bs {
margin-bottom: 25px !important;
}
.nomargin {
margin: 0 !important;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
span.text-wide {
display: none;
}
.pad {
text-align: left;
padding: 25px 0px;
padding-bottom: 0px;
}
.pad.side {
padding: 0px;
}
/* Page =================================================== */
html {
background: #FFFFFF;
font-size: 62.5%;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
background-color: transparent;
font-size: 20px;
font-size: 2rem;
color: #555555;
text-rendering: optimizeLegibility;
}
header {
background: #111111 url(images/sprite-mobile.png) repeat-x;
height: 62px;
padding: 0 5%;
width: 90%;
position: absolute;
z-index: 1000;
/* Navigation */
}
header nav {
display: none;
background: #222;
position: absolute;
top: 62px;
right: 0px;
z-index: 1000;
width: 100%;
font-size: 24px;
font-size: 2.4rem;
text-align: center;
}
header nav li {
height: 3em;
list-style: none;
display: block;
border-top: #212121 solid 1px;
border-bottom: #363636 solid 1px;
}
header nav li a {
display: block;
color: #FFF;
line-height: 2.8em;
text-decoration: none;
}
header nav li a:active {
background: #333;
}
.logo {
height: 62px;
width: 40px;
background: url(images/sprite-mobile.png) 0px -63px no-repeat;
display: block;
text-indent: -9999px;
float: left;
}
.logo:hover {
opacity: 0.5;
}
.icon-nav {
width: 27px;
height: 62px;
float: right;
background: url(images/sprite-mobile.png) -42px -63px no-repeat;
display: block;
text-indent: -9999px;
}
.icon-nav.active {
opacity: 0.5;
}
.social {
display: none;
}
.content {
margin-top: 62px;
}
footer {
background: #f8f8f8 url(images/bg-grey-med.png) repeat;
height: 50px;
padding: 40px 5% 0 5%;
color: #888888;
font-size: 16px;
font-size: 1.6rem;
text-align: center;
position: relative;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
footer nav {
display: none;
}
footer .right {
display: none;
}
footer .left {
float: none !important;
}
footer .left a {
text-decoration: none;
}
footer .gradient-white {
position: absolute;
width: 100%;
height: 50px;
top: -50px;
left: 0px;
background-color: rgba(255, 255, 255, 0);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, rgba(255, 255, 255, 0)));
background-image: -ms-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0));
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0));
}
footer a.top {
background: transparent url(images/sprite.png) 0 -217px;
width: 118px;
height: 90px;
display: block;
position: absolute;
left: 50%;
margin-left: -59px;
bottom: -40px;
text-indent: -9999px;
}
footer a:hover.top {
bottom: -35px;
}
h1,
.h1,
h2,
.h2 {
margin: 0;
color: #111111;
text-rendering: optimizelegibility;
font-weight: normal;
}
h1,
.h1 {
margin-bottom: 0.1em;
font-size: 48px;
font-size: 4.8rem;
line-height: 1.2em;
font-family: "neosans regular", "Helvetica Neue", Helvetica, Arial, Sans-serif;
letter-spacing: -0.07em;
}
.portfolio h1 {
font-size: 42px;
font-size: 4.2rem;
font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
border-bottom: #DDD solid 1px;
padding-bottom: 0.3em;
margin-bottom: 0.1em;
letter-spacing: -0.01em;
}
h2,
.h2 {
margin-bottom: 0.5em;
font-size: 29px;
font-size: 2.9rem;
line-height: 1.2em;
}
h3,
.h3 {
padding-top: 1em;
margin-bottom: 0.4em;
text-transform: uppercase;
font-size: 18px;
font-size: 1.8rem;
font-family: "proxima nova", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
p {
margin-bottom: 1.4em;
line-height: 1.4em;
}
p.intro {
font-size: 25px;
font-size: 2.5rem;
color: #888888;
line-height: 1.3em;
margin-bottom: 0.7em;
clear: both;
}
p.quote-author {
color: #888888;
margin-top: -0.5em;
}
p.author {
color: #888888;
font-size: 18px;
font-size: 1.8rem;
}
p.author .date {
display: block;
}
.strong,
strong {
font-family: "proxima nova", "Helvetica Neue", Helvetica, Arial, Sans-serif;
font-weight: 600;
}
a {
text-decoration: underline;
cursor: pointer;
color: #888888;
}
a:hover,
a:active {
color: #626262;
}
/* Centered header with line */
.header-center {
height: 1px;
background: #DDD;
border-bottom: #FFF solid 1px;
margin-bottom: 30px;
position: relative;
}
.header-center h3 {
background: #f8f8f8 url(images/bg-grey.png) repeat;
position: absolute;
top: -10px;
left: 50%;
margin-left: -150px;
width: 300px;
text-align: center;
display: block;
color: #888888;
text-transform: uppercase;
font-size: 14px;
font-size: 1.4rem;
font-weight: normal;
letter-spacing: 1px;
padding: 0px;
}
/* Change default text selection colour */
::selection {
background: #888888;
color: #FFF;
}
::-moz-selection {
background: #888888;
color: #FFF;
}
::-webkit-selection {
background: #888888;
color: #FFF;
}
ul.ul,
ol.ol {
list-style-type: disc;
padding-left: 2em;
margin-bottom: 1.4em;
line-height: 1.4em;
}
ul.ul li,
ol.ol li {
margin-bottom: 0.7em;
}
.text-light {
color: #888888;
}
.text-center {
margin: auto;
margin-bottom: 3em;
max-width: 40em;
}
.text-center.nomargin {
margin: 0 auto 0 auto !important;
}
.text-center p:last-child {
margin-bottom: 0;
}
.line {
width: 100%;
height: 1px;
background: #DDD;
border-bottom: #FFF solid 1px;
clear: both;
margin-bottom: 50px;
}
/* Font Embedding */
@font-face {
font-family: 'proxima nova bold';
src: url('fonts/proximanova-bold-webfont.eot');
src: url('fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-bold-webfont.woff') format('woff'), url('fonts/proximanova-bold-webfont.ttf') format('truetype'), url('fonts/proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima nova regular';
src: url('fonts/proximanova-regular-webfont.eot');
src: url('fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-regular-webfont.woff') format('woff'), url('fonts/proximanova-regular-webfont.ttf') format('truetype'), url('fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima nova light';
src: url('fonts/proximanova-light-webfont.eot');
src: url('fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/proximanova-light-webfont.woff') format('woff'), url('fonts/proximanova-light-webfont.ttf') format('truetype'), url('fonts/proximanova-light-webfont.svg#proxima_nova_ltregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'neosans regular';
src: url('fonts/neosans-medium-webfont.eot');
src: url('fonts/neosans-medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/neosans-medium-webfont.woff') format('woff'), url('fonts/neosans-medium-webfont.ttf') format('truetype'), url('fonts/neosans-medium-webfont.svg#neosansregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Sections */
section.light,
section.main {
overflow: hidden;
border-top: #FFF solid 1px;
padding: 3em 1.5em;
}
section.dark,
section.noise {
background: url(images/bg-grey.png) repeat;
border-bottom: #dddddd solid 1px;
padding: 3em 1.5em;
}
section.dark {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
section.noise {
border: none;
}
section.main {
background: none;
border: none;
}
section.light {
-webkit-box-shadow: inset 0px 30px 30px -30px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0px 30px 30px -30px rgba(0, 0, 0, 0.05);
box-shadow: inset 0px 30px 30px -30px rgba(0, 0, 0, 0.05);
border-bottom: #dddddd solid 1px;
}
.portfolio .content-detail .row {
clear: both;
max-width: 1040px;
margin: 0 auto;
}
.portfolio .content-detail .row.alt [class^="col-"] {
float: right;
margin: 0 0 0 3.84615384615%;
}
.portfolio .content-detail [class^="col-"] {
float: left;
margin: 0 3.84615384615% 0 0;
list-style: none;
position: relative;
}
.portfolio .content-detail [class^="col-"]:last-child,
.portfolio .content-detail .row.alt [class^="col-"]:last-child {
margin-right: 0;
}
.portfolio .content-detail .col-3 {
width: 48.0769230769%;
}
.portfolio .content-detail .col-3:nth-child(2) {
margin-right: 0;
}
.portfolio .content-detail .col-6 {
width: 100%;
margin-right: 0;
}
.portfolio .content-detail .col-12 {
width: 100%;
margin-right: 0;
}
#content-detail section:last-child,
.contact section:last-child {
/*padding-bottom: @padlarge * 2;*/
}
.home section.light {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#content-detail {
position: relative;
}
img {
max-width: 100%;
position: relative;
margin-bottom: 2em;
}
img.major {
margin-top: 2em;
margin-bottom: 0;
}
img.last {
margin-bottom: 3em;
}
img.shadow {
border: #DDD solid 1px;
}
/* snaps */
.snaps {
border-top: #dddddd 1px solid;
padding-top: 3em;
max-width: 540px;
margin: auto;
}
.snaps a {
margin: 2% 3% 2% 3%;
display: inline-block;
text-decoration: none;
position: relative;
padding: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.snaps a img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
width: 100px;
margin-bottom: 0;
}
.snaps a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}
/* Social Disc Icons */
.social-disc {
list-style-type: none;
margin-top: 1.5em;
}
.social-disc li {
height: 50px;
margin-bottom: 0.7em;
}
.social-disc li a {
padding-left: 60px;
line-height: 50px;
display: block;
height: 50px;
background: url(images/sprite.png) no-repeat;
text-decoration: none;
font-size: 18px;
font-size: 1.8rem;
}
.social-disc li a.facebook {
background-position: 0px -547px;
color: #43609c;
}
.social-disc li a.twitter {
background-position: 0px -598px;
color: #5fc5ec;
}
.social-disc li a.dribbble {
background-position: 0px -649px;
color: #eb528d;
}
.social-disc li a.linkedin {
background-position: 0px -700px;
color: #0982c0;
}
.social-disc li a:hover {
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
}
/* Favicons */
.favicons {
padding: 1em 0 0 0;
}
.favicons li {
list-style-type: none;
display: inline-block;
margin: 0 1% 1% 0;
width: 100%;
}
.favicons li a {
padding-left: 26px;
height: 16px;
line-height: 16px;
font-size: 14px;
font-size: 1.4rem;
display: block;
overflow: hidden;
background: url(images/sprite-favicons.png) no-repeat;
}
.favicons li .line-25 {
background-position: 0px 0px;
}
.favicons li .abduzeedo {
background-position: 0px -16px;
}
.favicons li .awwwards {
background-position: 0px -32px;
}
.favicons li .css-mania {
background-position: 0px -48px;
}
.favicons li .design-inspiration {
background-position: 0px -64px;
}
.favicons li .specky-boy {
background-position: 0px -80px;
}
.favicons li .wdl {
background-position: 0px -96px;
}
.favicons li .underworld-mag {
background-position: 0px -112px;
}
.favicons li .onetrapixel {
background-position: 0px -128px;
}
.favicons li .vandelay {
background-position: 0px -144px;
}
.favicons li .two-experts {
background-position: 0px -160px;
}
.favicons li .denzo-mag {
background-position: 0px -176px;
}
.favicons li .six-revisions {
background-position: 0px -192px;
}
.favicons li .smashing-geeks {
background-position: 0px -208px;
}
.favicons li .noupe {
background-position: 0px -224px;
}
.favicons li .womtec {
background-position: 0px -240px;
}
.favicons li .t3n {
background-position: 0px -256px;
}
.favicons li .eyes-on-pixel {
background-position: 0px -272px;
}
.favicons li .q-index {
background-position: 0px -288px;
}
.favicons li .css-wow {
background-position: 0px -304px;
}
.favicons li .css-mayo {
background-position: 0px -320px;
}
.favicons li .most-inspired {
background-position: 0px -336px;
}
.favicons li .css-based {
background-position: 0px -352px;
}
.favicons li .css-perk {
background-position: 0px -368px;
}
.favicons li .css-brigit {
background-position: 0px -384px;
}
.favicons li .css-gallery {
background-position: 0px -400px;
}
.favicons li .siiimple {
background-position: 0px -416px;
}
.favicons li .swd {
background-position: 0px -432px;
}
.favicons li .css-smooth-operator {
background-position: 0px -448px;
}
.favicons li .colorgorize {
background-position: 0px -464px;
}
.favicons li .css-line {
background-position: 0px -480px;
}
.favicons li .folio-focus {
background-position: 0px -496px;
}
.favicons li .css-design-awards {
background-position: 0px -512px;
}
.favicons li .karachi-corner {
background-position: 0px -528px;
}
.favicons li .css-brat {
background-position: 0px -544px;
}
.favicons li .gdj {
background-position: 0px -560px;
}
.favicons li .web-geekly {
background-position: 0px -576px;
}
.favicons li .design-deck {
background-position: 0px -592px;
}
.favicons li .arnaud {
background-position: 0px -608px;
}
.favicons li .underworld-mag {
background-position: 0px -624px;
}
.favicons li .beautiful-2 {
background-position: 0px -640px;
}
.favicons li .web-appers {
background-position: 0px -656px;
}
.favicons li .damn-digital {
background-position: 0px -672px;
}
.favicons li .inspire-first {
background-position: 0px -688px;
}
.favicons li .marked-lines {
background-position: 0px -704px;
}
.favicons li .92-pixels {
background-position: 0px -720px;
}
.favicons li .psd-collector {
background-position: 0px -736px;
}
.favicons li .com-limao {
background-position: 0px -752px;
}
.favicons li .art-spire {
background-position: 0px -768px;
}
.favicons li .acris-design {
background-position: 0px -784px;
}
.favicons li .e-junkie {
background-position: 0px -800px;
}
.favicons li .design-on-stop {
background-position: 0px -816px;
}
.favicons li .design-work {
background-position: 0px -832px;
}
.favicons li .trip-wire-mag {
background-position: 0px -848px;
}
.favicons li .e-consultancy {
background-position: 0px -864px;
}
.favicons li .dj-designer-lab {
background-position: 0px -880px;
}
.favicons li .css-gallery-pro {
background-position: 0px -896px;
}
.favicons li .ildp {
background-position: 0px -912px;
}
.favicons li .omega-imagine {
background-position: 0px -928px;
}
.favicons li .3lancer {
background-position: 0px -944px;
}
.favicons li .curiosando {
background-position: 0px -960px;
}
.favicons li .dwdb {
background-position: 0px -976px;
}
.favicons li .fish-be-cat {
background-position: 0px -992px;
}
.favicons li .kachibito {
background-position: 0px -1008px;
}
.favicons li .artatm {
background-position: 0px -1024px;
}
.favicons li .blue-blots {
background-position: 0px -1040px;
}
.favicons li .super-dit {
background-position: 0px -1056px;
}
.favicons li .css-awards {
background-position: 0px -1072px;
}
.favicons li .diego-burmudez {
background-position: 0px -1088px;
}
.favicons li .my-desy {
background-position: 0px -1104px;
}
.favicons li .edumac {
background-position: 0px -1120px;
}
.favicons li .demortalz {
background-position: 0px -1136px;
}
.favicons li .down-graf {
background-position: 0px -1152px;
}
.favicons li .noil {
background-position: 0px -1168px;
}
.favicons li .land-of-web {
background-position: 0px -1184px;
}
.favicons li .iguoguo {
background-position: 0px -1200px;
}
.favicons li .land-of-web {
background-position: 0px -1216px;
}
.favicons li .i-am-designing {
background-position: 0px -1232px;
}
.favicons li .smashing-journal {
background-position: 0px -1248px;
}
.favicons li .tuts-list {
background-position: 0px -1264px;
}
.favicons li .web-rockets-mag {
background-position: 0px -1280px;
}
.favicons li .andres-zenteno {
background-position: 0px -1296px;
}
.favicons li .top-design-mag {
background-position: 0px -1312px;
}
.favicons li .inspiration-mix {
background-position: 0px -1328px;
}
.favicons li .farbwolke {
background-position: 0px -1344px;
}
.favicons li .design-relexion {
background-position: 0px -1360px;
}
.favicons li .design-idol {
background-position: 0px -1376px;
}
.favicons li .design-your-way {
background-position: 0px -1392px;
}
.favicons li .wdc {
background-position: 0px -1408px;
}
.favicons li .design-beep {
background-position: 0px -1424px;
}
.favicons li .creattica {
background-position: 0px -1440px;
}
/* Pie Chart */
.pie-chart {
text-align: center;
}
.pie-chart ul {
list-style-type: none;
padding: 0;
}
.pie-chart .designer,
.pie-chart .coder {
float: none;
margin-bottom: 3em;
}
/* Bar Chart */
#bar-chart {
display: none;
}
/* Ten things list */
.ten-things {
text-align: center;
}
.ten-things ul {
list-style-type: none;
padding: 0;
}
/* Portfolio Thumbs */
.thumbs {
list-style: none;
position: relative;
padding: 0;
/* Show the 3rd item at the bottom of the page */
}
.thumbs li {
float: none;
margin: 0 0 1.5em 0;
background: #FFF;
padding: 5% 5% 0 5%;
position: relative;
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.thumbs li a {
text-decoration: none;
display: block;
position: relative;
color: #555555;
}
.thumbs li a img {
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin: 0;
}
.thumbs li:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}
.thumbs .description {
padding: 0.5em;
position: relative;
overflow: hidden;
}
.thumbs h4,
.thumbs .h4 {
/*font-family: @basefont-regular;*/
font-weight: normal;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.2em;
text-align: center;
}
.thumbs p {
display: none;
}
.thumbs .arrow-r {
display: none;
}
.thumbs .home .thumbs li:nth-child(3n),
.thumbs .portfolio .thumbs li:nth-child(3n),
.thumbs .error404 .thumbs li:nth-child(3n) {
display: block;
}
/* Button */
a.button,
button,
.submit {
color: #FFF;
border-style: solid;
border-width: 1px;
/*border-color: #8dc5be #8dc5be #669d95; */
border-color: #111;
background-repeat: repeat-x;
font-size: 16px;
font-size: 1.6rem;
font-weight: bold;
vertical-align: middle;
height: 36px;
display: inline-block;
line-height: 36px;
padding: 0 2em;
text-decoration: none;
cursor: pointer;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
/*.gradient(#b0dbd6, #5fb2a8, #b0dbd6);*/
background-color: #333333;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #111111), color-stop(1, #333333));
background-image: -ms-linear-gradient(bottom, #111111, #333333);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #111111 0%, #333333 100%);
background-image: -o-linear-gradient(bottom, #111111, #333333);
}
a.button.green,
button.green,
.submit.green {
background-color: #9bd465;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #56b101), color-stop(1, #9bd465));
background-image: -ms-linear-gradient(bottom, #56b101, #9bd465);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #56b101 0%, #9bd465 100%);
background-image: -o-linear-gradient(bottom, #56b101, #9bd465);
border-color: #56b101 #56b101 #469000;
margin-right: 10px;
}
a.button.red,
button.red,
.submit.red {
background-color: #cf3b3b;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #a90000), color-stop(1, #cf3b3b));
background-image: -ms-linear-gradient(bottom, #a90000, #cf3b3b);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #a90000 0%, #cf3b3b 100%);
background-image: -o-linear-gradient(bottom, #a90000, #cf3b3b);
border-color: #a90000 #a90000 #890000;
margin-right: 10px;
}
a.button.disabled,
button.disabled,
.submit.disabled {
-webkit-box-shadow: 0 1px 1px #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(0, 0, 0, 0.02), inset 1px 0 0 rgba(0, 0, 0, 0.02), inset -1px 0 0 rgba(0, 0, 0, 0.02) !important;
-moz-box-shadow: 0 1px 1px #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(0, 0, 0, 0.02), inset 1px 0 0 rgba(0, 0, 0, 0.02), inset -1px 0 0 rgba(0, 0, 0, 0.02) !important;
box-shadow: 0 1px 1px #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 2px 0 rgba(0, 0, 0, 0.02), inset 1px 0 0 rgba(0, 0, 0, 0.02), inset -1px 0 0 rgba(0, 0, 0, 0.02) !important;
-webkit-animation-name: none!important;
background: #f2f2f2!important;
background: rgba(0, 0, 0, 0.06) !important;
border-color: #cfcfcf!important;
filter: none!important;
border-top-color: #bfbfbf!important;
color: #b4b4b4!important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 6px rgba(0, 0, 0, 0.05) !important;
position: static;
cursor: auto;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 6px rgba(0, 0, 0, 0.05) !important;
}
a:hover.button,
button:hover,
.submit:hover {
background-position: 0 15px;
}
a:active.button,
button:active,
.submit:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Concept Only Label */
.concept {
padding: 0px 10px;
font-size: 12px;
font-size: 1.2rem;
background: #e8e8e8;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
margin-left: 5px;
border-bottom: #FFF solid 1px;
color: #888888;
font-weight: normal;
display: inline-block;
}
/* Previous and Next buttons */
.next,
.prev {
display: none;
}
/* jQuery Preloader */
#jpreOverlay,
#qLoverlay {
background-color: #FFF;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 11;
}
#jpreSlide {
font-size: 22px;
font-weight: bold;
color: #FFF;
text-align: center;
width: 100%;
}
#jpreLoader,
#qLloader {
width: 100px;
height: 100px;
background: url(images/loader.png) 0 100% no-repeat;
position: fixed;
top: 43%;
left: 50%;
margin-left: -50px;
display: none;
}
#jpreBar,
#qLbar {
width: 100px;
height: 0%;
position: absolute;
bottom: 0px;
background: url(images/loader.png) -100px 100% no-repeat;
}
#jprePercentage,
#qLpercentage {
color: #888888;
text-align: center;
position: absolute;
height: 30px;
width: 100px;
bottom: -30px;
}
/* Eliminate FOUC - by hiding content inside .js class initially */
.js #content,
.js #content-detail,
.js .js #coder-img,
.js #designer-img,
.js #coder,
.js #designer,
.js #coder-bg,
.js #designer-bg,
.js #img-main,
.js #text-main,
.js #snaps,
.js #snaps-1,
.js #snaps-2,
.js #snaps-3,
.js #snaps-4,
.js #snaps-5,
.js #snaps-6,
.js #img-0,
.js #img-1,
.js #img-2,
.js #icons,
.js #aqua,
.js #pink,
.js #yellow,
.js #brown,
.js #red,
.js #footer,
.js #face-img,
.js .portfolio-main .thumbs li,
.js .thumbs .arrow-r,
.js #navi {
opacity: 0;
}
.js #header {
top: -92px;
opacity: 0;
}
.js .thumbs .arrow-r {
opacity: 0;
right: 0;
}
/* Homepage Half Face */
.face {
width: 100%;
position: relative;
/* Show default image */
/* Descriptions */
/* Inline media queries */
}
.face .face-img {
display: block;
margin: 0px;
}
.face a {
color: #888888;
text-decoration: none;
}
.face .coder,
.face .designer {
position: absolute;
width: 40%;
display: block;
z-index: 10;
height: 15%;
margin: auto;
top: 0;
bottom: 0;
}
.face .coder h1,
.face .designer h1 {
font-size: 22px;
font-size: 2.2rem;
}
.face .designer {
left: 0;
}
.face .coder {
right: 0;
text-align: right;
}
.face .designer-img,
.face .coder-img,
.face .designer-bg,
.face .coder-bg,
.face .coder p,
.face .designer p {
display: none;
}
@media only screen and (min-width: 321px) {
.face .coder h1,
.face .designer h1 {
font-size: 26px;
font-size: 2.6rem;
}
}
@media only screen and (min-width: 376px) {
.face .coder h1,
.face .designer h1 {
font-size: 30px;
font-size: 3rem;
}
}
@media only screen and (min-width: 500px) {
.face .coder h1,
.face .designer h1 {
font-size: 42px;
font-size: 4.2rem;
}
}
@media only screen and (min-width: 600px) {
.face .coder h1,
.face .designer h1 {
font-size: 47px;
font-size: 4.7rem;
}
}
@media only screen and (min-width: 750px) {
.face .coder,
.face .designer {
width: 25%;
height: 35%;
}
.face .coder h1,
.face .designer h1 {
font-size: 45px;
font-size: 4.5rem;
}
.face .coder .more,
.face .designer .more {
display: none;
}
.face .coder p,
.face .designer p {
display: block;
font-size: 16px;
font-size: 1.6rem;
margin: 0px;
}
}
@media only screen and (min-width: 860px) {
.face .coder,
.face .designer {
width: 30%;
height: 30%;
}
.face .coder h1,
.face .designer h1 {
font-size: 58px;
font-size: 5.8rem;
}
.face .coder p,
.face .designer p {
font-size: 17px;
font-size: 1.7rem;
}
}
@media only screen and (min-width: 1024px) {
.face .coder,
.face .designer {
height: 40%;
}
.face .coder h1,
.face .designer h1 {
font-size: 70px;
font-size: 7rem;
}
.face .coder .more,
.face .designer .more {
display: inline;
}
}
@media only screen and (min-width: 1140px) {
.face {
width: 1040px;
height: 600px;
position: relative;
/* Face images */
/* Background images */
/* Hide default image with no effects */
}
.face .coder,
.face .designer {
width: 520px;
height: 600px;
top: 0px;
position: absolute;
}
.face .coder .description,
.face .designer .description {
position: absolute;
top: 160px;
width: 270px;
}
.face .coder .arrow,
.face .designer .arrow {
width: 85px;
height: 140px;
background: url(images/sprite.png) no-repeat;
display: block;
position: absolute;
top: 20px;
}
.face .coder p,
.face .designer p {
font-size: 18px;
font-size: 1.8rem;
line-height: 1.4em;
}
.face .coder {
text-align: left;
right: 0px;
}
.face .coder .description {
right: 0px;
}
.face .coder .arrow {
right: 0px;
background-position: 0px -751px;
}
.face .designer {
left: 0px;
}
.face .designer .description {
left: 0px;
}
.face .designer .arrow {
left: 0px;
background-position: 0px -892px;
}
.face .designer-img,
.face .coder-img {
width: 420px;
height: 600px;
position: absolute;
top: 0;
background: url(images/sprite-home.png) 0 0 no-repeat;
display: block;
z-index: 1;
}
.face .designer-img {
background-position: 0px -600px;
left: 100px;
}
.face .coder-img {
background-position: 100% 0px;
right: 100px;
}
.face .designer-bg,
.face .coder-bg {
width: 420px;
height: 200px;
position: absolute;
bottom: 0px;
background: url(images/sprite-home.png) 0 -1300px no-repeat;
display: block;
}
.face .designer-bg {
left: 100px;
}
.face .coder-bg {
right: 100px;
background-position: 100% -1300px;
}
.face .face-img {
display: none;
}
}
/* Contact Form Styles */
.contact {
/* Error/warning/success messages */
/* Didn't Send */
/* Some Errors */
/* Sent successfully */
}
.contact input[type="text"],
.contact input[type="email"],
.contact textarea {
border: #CCC solid 1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.1);
width: 98%;
color: #888888;
font-size: 16px;
font-size: 1.6rem;
font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
padding: 0px;
}
.contact input[type="text"],
.contact input[type="email"] {
height: 30px;
line-height: 30px;
}
.contact textarea {
height: 104px;
}
.contact .submit {
float: left;
width: 99%;
outline: none;
}
.contact .ajax-loader {
float: right;
padding: 8px 10px 0px 0px;
}
.contact .wpcf7-response-output {
clear: both;
text-align: center;
padding: 1em;
margin: 1em 0;
}
.contact .wpcf7-mail-sent-ng {
border: #ffd7d7 1px solid;
background: #f8efef;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #e27070;
}
.contact .wpcf7-validation-errors {
border: #f7e1ad 1px solid;
background: #faf6ec;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #e3b150;
}
.contact .wpcf7-mail-sent-ok {
border: #bce68a 1px solid;
background: #ebf9dd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #94d646;
}
.contact .wpcf7-not-valid-tip,
.contact .screen-reader-response {
display: none;
}
/* Mobile Blog Styles */
.blog {
padding: 3em 5%;
}
.blog h1,
.blog .h1 {
font-size: 42px;
font-size: 4.2rem;
font-family: "proxima nova light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
border-bottom: #DDD solid 1px;
padding-bottom: 0.3em;
margin-bottom: 0.1em;
letter-spacing: -0.01em;
}
.blog h1 a,
.blog .h1 a {
text-decoration: none;
color: #111111;
}
.blog h1 a:hover,
.blog .h1 a:hover {
color: #888888;
}
.blog h2,
.blog .h2 {
padding-top: 1em;
margin-bottom: 0.4em;
font-size: 29px;
font-size: 2.9rem;
}
.blog h2.margin-small,
.blog .h2.margin-small {
margin-bottom: 0.2em;
}
.blog h2 a,
.blog .h2 a {
color: #111111;
}
.blog h2 a:hover,
.blog .h2 a:hover {
color: #888888;
}
.blog h3,
.blog .h3 {
padding-top: 1em;
margin-bottom: 0.4em;
text-transform: uppercase;
font-size: 18px;
font-size: 1.8rem;
font-family: "proxima nova", "Helvetica Neue", Helvetica, Arial, Sans-serif;
}
.blog h3 a,
.blog .h3 a {
color: #111111;
}
.blog h3 a:hover,
.blog .h3 a:hover {
color: #888888;
}
.blog article {
padding-bottom: 1.4em;
border-bottom: #DDD solid 1px;
/* Hack for 5th blog post */
}
.blog article p {
font-size: 20px;
font-size: 2rem;
line-height: 1.4em;
margin-bottom: 1.4em;
}
.blog article p.author {
font-size: 18px;
font-size: 1.8rem;
color: #888888;
float: left;
}
.blog article p.author .date {
display: block;
float: none;
}
.blog article p.small {
font-size: 18px;
font-size: 1.8rem;
}
.blog article p.light {
color: #888888;
}
.blog article p.margin-small {
margin-bottom: 0.7em;
}
.blog article p.margin-top {
padding-top: 2em;
}
.blog article ul,
.blog article .ul,
.blog article ol,
.blog article .ol {
padding-left: 2em;
margin-bottom: 1.8em;
}
.blog article ul li,
.blog article .ul li,
.blog article ol li,
.blog article .ol li {
margin-bottom: 0.3em;
}
.blog article:nth-child(5) {
border-bottom: 0px !important;
}
.blog article img {
margin-bottom: 0px;
}
.blog .share {
display: none;
float: right;
list-style: none;
}
.blog .share li {
float: right;
}
.blog .share #fb-root {
padding-top: 2px;
}
.blog p.intro {
padding-top: 20px;
}
.blog .sidebar li {
list-style: none;
float: left;
margin-bottom: 2em;
}
.blog .sidebar .ads {
padding: 10px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.blog .sidebar h2,
.blog .sidebar .h2 {
padding-top: 0px;
}
.blog .recent-posts {
border-bottom: #DDD solid 1px;
padding-bottom: 2.1em;
margin-top: 1em;
}
.blog .recent-posts ul {
list-style: none;
}
.blog .recent-posts ul li {
margin-bottom: 0.8em;
}
.blog .recent-posts ul li a {
font-size: 18px;
font-size: 1.8rem;
}
.blog .comments {
margin-bottom: 2.5em;
margin-top: 2.5em;
}
.blog .comments h2 {
padding-top: 0px;
}
.blog .attachment-post-thumbnail {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
margin: 0.25em 0em 1.5em 0em;
}
.blog .col-8 {
margin: auto !important;
float: none;
}
.blog-index article {
padding-bottom: 2.7em;
margin-bottom: 2em;
}
/* Hide syntax highlighter plugin toolbar */
.syntaxhighlighter .toolbar {
display: none !important;
}
@media only screen and (min-width: 376px) {
h1 {
font-size: 60px;
font-size: 6rem;
}
/* Portfolio Thumbs */
.thumbs li {
float: left;
width: 44.16666666666%;
margin: 0 5% 5% 0;
background: #FFF;
padding: 1.6666666666% 1.6666666666% 0 1.6666666666%;
}
.thumbs li:nth-child(2n) {
margin-right: 0;
}
/* Hide the 3rd item at the bottom of the page */
.home .thumbs li:nth-child(3n),
.portfolio .thumbs li:nth-child(3n),
.error404 .thumbs li:nth-child(3n) {
display: none;
}
.favicons li {
width: 48%;
}
.favicons li:nth-child(2n) {
margin-right: 0;
}
.favicons li:nth-child(5n) {
margin-right: 1%;
}
.snaps a {
margin: 2% 1% 2% 0;
}
.snaps a img {
width: auto;
}
p.author .date {
float: right;
}
}
@media only screen and (min-width: 668px) {
.margin-b {
margin-bottom: 150px !important;
}
.margin-bs {
margin-bottom: 50px !important;
}
.line {
margin-bottom: 100px;
}
.pad {
padding: 50px 0px;
padding-bottom: 0px;
}
header {
background: #111111 url(images/sprite.png) repeat-x;
height: 92px;
}
.logo {
height: 92px;
width: 62px;
background: url(images/sprite.png) 0px -93px no-repeat;
}
header nav {
float: right;
display: block;
font-size: 18px;
font-size: 1.8rem;
position: static;
background: transparent;
width: auto;
}
header nav li {
display: inline-block;
float: left;
position: relative;
height: 92px;
border: 0px;
}
header nav li a {
display: block;
color: #FFF;
line-height: 92px;
padding: 0 1em;
text-decoration: none;
}
header nav li a:active {
background: none;
}
header nav li:hover a,
header nav .current_page_item a,
header nav .current_page_parent a {
color: #888888;
}
header nav .portfolio .current_page_parent a {
color: #FFF;
}
header nav .portfolio .page-item-7 a {
color: #888888;
}
header .icon-nav {
display: none;
}
footer .left {
float: left !important;
}
footer .right {
display: block;
}
.content {
margin-top: 92px;
}
h1,
.h1 {
font-size: 70px;
font-size: 7rem;
}
.portfolio h1,
.portfolio .h1 {
font-size: 48px;
font-size: 4.8rem;
}
p.intro {
font-size: 24px;
font-size: 2.4rem;
}
span.text-wide {
display: inline;
}
.portfolio .content-detail .col-3 {
width: 22.1153846154%;
}
.portfolio .content-detail .col-3:nth-child(2) {
margin-right: 3.84615384615%;
}
.portfolio .content-detail .col-3:last-child {
margin-right: 0;
}
.portfolio .content-detail .col-6 {
width: 48.0769230769%;
}
.portfolio .content-detail .col-6:first-child {
margin-right: 3.84615384615%;
}
.portfolio .content-detail .col-12 {
width: 100%;
margin-right: 0;
}
section.light,
section.dark,
section.noise,
section.main {
padding: 4.5em 5%;
}
#content-detail section:last-child,
.contact section:last-child {
/*padding-bottom: 8% !important;*/
}
/* snaps */
.snaps a {
margin-right: 2em;
}
.snaps a:nth-child(3n) {
margin: 0;
}
/* Portfolio Thumbs */
.thumbs li {
float: left;
/* width:314px; */
width: 30.1923076923%;
/* height:214px; */
/* margin: 0 25px 25px 0; */
margin: 0 2.4038461538% 2.4038461538% 0;
background: #FFF;
/* padding: 8px; */
padding: 0.7692307692% 0.7692307692% 0 0.7692307692%;
}
.thumbs li:nth-child(2n) {
margin-right: 2.4038461538%;
}
.thumbs h4 {
text-align: left;
font-size: 18px;
font-size: 1.8rem;
}
.thumbs p {
display: block;
margin: 0;
font-size: 16px;
font-size: 1.6rem;
color: #888888;
line-height: 1.2em;
padding-top: 0.2em;
height: 1.3em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Show the 3rd item at the bottom of the page */
.home .thumbs li:nth-child(3n),
.portfolio .thumbs li:nth-child(3n),
.portfolio-main .thumbs li:nth-child(3n),
.error404 .thumbs li:nth-child(3n) {
display: block;
margin-right: 0px;
}
.favicons li {
width: 30%;
}
.favicons li:nth-child(3n) {
margin-right: 0;
}
.favicons li:nth-child(2n) {
margin-right: 1%;
}
/* Bar Chart */
#bar-chart {
display: block;
}
.bar-chart {
list-style: none;
height: 450px;
position: relative;
background: url(images/axis.png) repeat-x;
padding: 0;
margin: 0px;
/* Y Axis */
}
.bar-chart li {
display: inline-block;
width: 16%;
height: 100%;
background-color: #CCC;
text-align: center;
font-weight: bold;
color: #FFF;
position: relative;
font-size: 18px;
font-size: 1.8rem;
margin: 0 1.8% 0 0;
border: #BBB solid 1px;
vertical-align: bottom;
border-bottom: #BBB solid 1px;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}
.bar-chart li:nth-child(6n) {
margin-right: 0;
}
.bar-chart .percent {
opacity: 0.3;
position: absolute;
bottom: 50px;
font-size: 45px;
font-size: 4.5rem;
width: 100%;
line-height: 1em;
}
.bar-chart .percent span {
font-size: 24px;
font-size: 2.4rem;
padding-left: 3px;
}
.bar-chart .skill {
position: absolute;
bottom: 20px;
width: 100%;
font-size: 12px;
font-size: 1.2rem;
}
.bar-chart .p-40 {
height: 40%;
}
.bar-chart .p-75 {
height: 75%;
}
.bar-chart .p-80 {
height: 80%;
}
.bar-chart .p-90 {
height: 90%;
}
.bar-chart .p-95 {
height: 95%;
}
.bar-chart .aqua {
border-color: #8dc5be;
background-color: #b0dbd6;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5fb2a8), color-stop(1, #b0dbd6));
background-image: -ms-linear-gradient(bottom, #5fb2a8, #b0dbd6);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #5fb2a8 0%, #b0dbd6 100%);
background-image: -o-linear-gradient(bottom, #5fb2a8, #b0dbd6);
}
.bar-chart .pink {
border-color: #ebc0b5;
background-color: #f4dcd6;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e1ae9e), color-stop(1, #f4dcd6));
background-image: -ms-linear-gradient(bottom, #e1ae9e, #f4dcd6);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #e1ae9e 0%, #f4dcd6 100%);
background-image: -o-linear-gradient(bottom, #e1ae9e, #f4dcd6);
}
.bar-chart .yellow {
border-color: #e7af30;
background-color: #efc563;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfae36), color-stop(1, #efc563));
background-image: -ms-linear-gradient(bottom, #dfae36, #efc563);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #dfae36 0%, #efc563 100%);
background-image: -o-linear-gradient(bottom, #dfae36, #efc563);
}
.bar-chart .brown {
border-color: #dcb386;
background-color: #dcba83;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #bc8e5b), color-stop(1, #dcba83));
background-image: -ms-linear-gradient(bottom, #bc8e5b, #dcba83);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #bc8e5b 0%, #dcba83 100%);
background-image: -o-linear-gradient(bottom, #bc8e5b, #dcba83);
}
.bar-chart .red {
border-color: #e14949;
background-color: #da6d6c;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ca4544), color-stop(1, #da6d6c));
background-image: -ms-linear-gradient(bottom, #ca4544, #da6d6c);
/*background-image: -webkit-linear-gradient(bottom, @start, @stop);*/
background-image: -moz-linear-gradient(center bottom, #ca4544 0%, #da6d6c 100%);
background-image: -o-linear-gradient(bottom, #ca4544, #da6d6c);
}
.bar-chart li.axis {
width: 8%;
border: 0;
border-right: #DDD solid 1px;
height: 450px;
background: url(images/bg-grey.png) repeat;
-webkit-box-shadow: inset 0 0 0 0 #ffffff;
-moz-box-shadow: inset 0 0 0 0 #ffffff;
box-shadow: inset 0 0 0 0 #ffffff;
}
.bar-chart .label {
color: #888888;
margin: -0.6em 0 88px 0;
font-size: 12px;
font-size: 1.2rem;
font-weight: normal;
}
img {
margin-bottom: 4em;
}
img.last {
margin-bottom: 4em;
}
img.margin-small {
margin-bottom: 2.4em;
}
/* iPad (portrait) blog styles */
.blog {
padding: 50px 5%;
}
.blog h1,
.blog .h1 {
font-size: 48px;
font-size: 4.8rem;
padding-bottom: 0.3em;
}
.blog h2,
.blog .h2 {
margin-bottom: 0.5em;
}
.blog h3,
.blog .h3 {
margin-bottom: 0.5em;
}
.blog article p {
line-height: 1.6em;
margin-bottom: 1.8em;
}
.blog article p.margin-small {
margin-bottom: 0.9em;
}
.blog article p.author .date {
display: inline-block;
}
.blog .share {
display: block;
}
.blog .attachment-post-thumbnail {
margin: 1em 0em 2.5em 0em;
}
.blog .recent-posts {
margin-top: 0.3em;
}
.blog-index article {
padding-bottom: 4em;
margin-bottom: 3.3em;
}
.contact .submit {
float: right;
width: auto;
}
}
@media only screen and (min-width: 1024px) {
header nav {
font-size: 18px;
font-size: 1.8rem;
margin-right: 10%;
}
.social {
display: block;
float: right;
list-style: none;
margin: 30px 0 0 0;
}
.social li {
display: inline-block;
}
.social li a {
width: 32px;
height: 32px;
display: inline-block;
background: url(images/sprite.png) 0 0 no-repeat;
text-indent: -9999px;
cursor: pointer;
margin-left: 15px;
}
.social li a:hover {
opacity: 0.5;
}
.social .facebook a {
background-position: 0px -186px;
}
.social .twitter a {
background-position: -32px -186px;
}
.social .dribbble a {
background-position: -64px -186px;
}
.social .linkedin a {
background-position: -96px -186px;
}
footer nav {
display: block;
float: left;
margin-left: 100px;
}
footer nav ul {
list-style: none;
}
footer nav li {
float: left;
}
footer nav li a {
float: left;
margin-right: 20px;
text-decoration: none;
font-size: 16px;
font-size: 1.6rem;
color: #888888;
}
footer nav li a:hover {
color: #555555;
}
p {
line-height: 1.4em;
}
p.intro {
font-size: 26px;
font-size: 2.6rem;
}
.row {
clear: both;
max-width: 1040px;
margin: 0 auto;
}
.row.alt [class^="col-"] {
float: right;
margin: 0 0 0 3.84615384615%;
}
[class^="col-"] {
float: left;
margin: 0 3.84615384615% 0 0;
list-style: none;
position: relative;
}
[class^="col-"]:last-child,
.row.alt [class^="col-"]:last-child {
margin: 0;
}
.col-1 {
width: 4.8076923077%;
}
.col-2 {
width: 13.4615384615%;
}
.col-3 {
width: 22.1153846154%;
}
.col-4 {
width: 30.7692307692%;
}
.col-5 {
width: 39.4230769231%;
}
.col-6 {
width: 48.0769230769%;
}
.col-7 {
width: 56.7307692308%;
}
.col-8 {
width: 65.3846153846%;
}
.col-9 {
width: 74.0384615385%;
}
.col-10 {
width: 82.6923076923%;
}
.col-11 {
width: 91.3461538462%;
}
.col-12 {
width: 100%;
margin: 0;
}
/* snaps */
.snaps {
padding-top: 0;
max-width: 920px;
}
.snaps a,
.snaps a:nth-child(3n) {
margin-right: 0.4%;
width: 135px;
}
.snaps a:last-child {
margin-right: 0 !important;
}
/* Pie chart */
.pie-chart .designer,
.pie-chart .coder {
padding-top: 3em;
}
.pie-chart .coder {
float: right;
margin-bottom: 0;
text-align: left;
}
.pie-chart .designer {
float: left;
margin-bottom: 0;
text-align: left;
}
.pie-chart img {
width: auto;
}
.pie-chart ul li {
display: block;
}
.bar-chart .label {
font-size: 16px;
font-size: 1.6rem;
margin: -0.6em 0 92px 0;
}
.bar-chart li {
margin: 0 2% 0 0;
}
.bar-chart .skill {
font-size: 16px;
font-size: 1.6rem;
}
.bar-chart .percent {
font-size: 60px;
font-size: 6rem;
}
img.major {
margin-top: 0;
}
section.light,
section.dark,
section.noise {
padding: 6em 5%;
}
section.main,
.portfolio-main section.noise {
padding: 3em 5%;
}
#content-detail section:last-child,
.contact section:last-child {
padding-bottom: 6em !important;
}
.text-middle {
padding-top: 2em;
}
.text-main {
padding-top: 1.5em;
}
.portfolio .text-main {
padding-top: 3em;
}
.text-center {
margin-bottom: 4em;
}
/* Ten things list */
.ten-things {
text-align: left;
}
.favicons li {
width: 23%;
}
.favicons li:nth-child(4n) {
margin-right: 0;
}
.favicons li:nth-child(3n) {
margin-right: 1%;
}
.pad {
padding: 50px;
}
.pad.side {
padding: 0px 50px;
}
/* Desktop blog styles */
.blog {
padding: 100px 5%;
}
}
@media only screen and (min-width: 1140px) {
.logo {
margin-left: 0;
}
header nav {
margin-right: 14%;
}
footer nav {
margin-left: 150px;
}
p {
line-height: 1.6em;
}
/* snaps */
.snaps {
max-width: 1024px;
}
.snaps a,
.snaps a:nth-child(3n) {
margin-right: 1.9%;
width: 140px;
}
/* Previous and Next buttons */
.next,
.prev {
width: 59px;
height: 118px;
display: block;
background: url(images/sprite.png) no-repeat;
position: fixed;
top: 45%;
text-indent: -9999px;
}
.next {
right: 0px;
background-position: -60px -309px;
}
.prev {
left: 0px;
background-position: 0px -309px;
}
.next a,
.prev a {
position: absolute;
display: block;
background: url(images/sprite.png) no-repeat;
width: 59px;
height: 118px;
z-index: 10;
opacity: 0;
}
.next a {
background-position: -60px -428px;
}
.prev a {
background-position: 0px -428px;
}
/* Portfolio Thumbs */
.thumbs .description {
padding: 0.7em 47px 0.6em 0.7em;
}
.thumbs .arrow-r {
width: 32px;
height: 32px;
background: url(images/sprite.png) no-repeat;
display: block;
background-position: -63px -107px;
position: absolute;
top: 20px;
right: 15px;
}
.favicons li {
width: 18%;
}
.favicons li:nth-child(5n) {
margin-right: 0;
}
.favicons li:nth-child(4n) {
margin-right: 1%;
}
#designer-img{
background: url(images/adham-dannaway-sky-people.jpg) top left no-repeat;
}
/* Contact page navi image */
.contact #img-main {
background: url(images/adham-dannaway-sky-people.jpg) top left no-repeat;
display: block;
max-width: 590px;
max-height: 500px;
position: relative;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
/* jQuery Preloader */
#jpreLoader,
#qLloader {
background: url(images/loader@2x.png) 0 100% no-repeat;
background-size: 200px 100px;
}
#jpreBar,
#qLbar {
background: url(images/loader@2x.png) -100px 100% no-repeat;
background-size: 200px 100px;
}
header,
.logo,
.icon-nav {
background-image: url(images/sprite-mobile@2x.png);
background-size: 200px 500px;
}
.social-disc li a {
background-image: url(images/sprite@2x.png);
background-size: 150px 1200px;
}
}
/* Retina iPad */
@media only screen and (min-width: 600px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 600px) and (min--moz-device-pixel-ratio: 1.5), only screen and (min-width: 600px) and (min-device-pixel-ratio: 1.5) {
header {
background: #111111 url(images/sprite.png) repeat-x;
background-size: auto;
height: 92px;
}
.logo {
height: 92px;
width: 62px;
background: url(images/sprite.png) 0px -93px no-repeat;
background-size: auto;
}
}
// jQuery Plugins
/*!
jQuery Waypoints - v1.1.7
Copyright (c) 2011-2012 Caleb Troughton
Dual licensed under the MIT license and GPL license.
https://github.com/imakewebthings/jquery-waypoints/blob/master/MIT-license.txt
https://github.com/imakewebthings/jquery-waypoints/blob/master/GPL-license.txt
*/
/*
Waypoints is a small jQuery plugin that makes it easy to execute a function
whenever you scroll to an element.
GitHub Repository: https://github.com/imakewebthings/jquery-waypoints
Documentation and Examples: https://imakewebthings.github.com/jquery-waypoints
Changelog:
v1.1.7
- Actually fix the post-load bug in Issue #28 from v1.1.3.
v1.1.6
- Fix potential memory leak by unbinding events on empty context elements.
v1.1.5
- Make plugin compatible with Browserify/RequireJS. (Thanks @cjroebuck)
v1.1.4
- Add handler option to give alternate binding method. (Issue #34)
v1.1.3
- Fix cases where waypoints are added post-load and should be triggered
immediately. (Issue #28)
v1.1.2
- Fixed error thrown by waypoints with triggerOnce option that were
triggered via resize refresh.
v1.1.1
- Fixed bug in initialization where all offsets were being calculated
as if set to 0 initially, causing unwarranted triggers during the
subsequent refresh.
- Added onlyOnScroll, an option for individual waypoints that disables
triggers due to an offset refresh that crosses the current scroll
point. (All credit to @knuton on this one.)
v1.1
- Moved the continuous option out of global settings and into the options
object for individual waypoints.
- Added the context option, which allows for using waypoints within any
scrollable element, not just the window.
v1.0.2
- Moved scroll and resize handler bindings out of load. Should play nicer
with async loaders like Head JS and LABjs.
- Fixed a 1px off error when using certain % offsets.
- Added unit tests.
v1.0.1
- Added $.waypoints('viewportHeight').
- Fixed iOS bug (using the new viewportHeight method).
- Added offset function alias: 'bottom-in-view'.
v1.0
- Initial release.
Support:
- jQuery versions 1.4.3+
- IE6+, FF3+, Chrome 6+, Safari 4+, Opera 11
- Other versions and browsers may work, these are just the ones I've looked at.
*/
(function($, wp, wps, window, undefined) {
'$:nomunge';
var $w = $(window),
// Keeping common strings as variables = better minification
eventName = 'waypoint.reached',
/*
For the waypoint and direction passed in, trigger the waypoint.reached
event and deal with the triggerOnce option.
*/
triggerWaypoint = function(way, dir) {
way.element.trigger(eventName, dir);
if (way.options.triggerOnce) {
way.element[wp]('destroy');
}
},
/*
Given a jQuery element and Context, returns the index of that element in the waypoints
array. Returns the index, or -1 if the element is not a waypoint.
*/
waypointIndex = function(el, context) {
if (!context) return -1;
var i = context.waypoints.length - 1;
while (i >= 0 && context.waypoints[i].element[0] !== el[0]) {
i -= 1;
}
return i;
},
// Private list of all elements used as scrolling contexts for waypoints.
contexts = [],
/*
Context Class - represents a scrolling context. Properties include:
element: jQuery object containing a single HTML element.
waypoints: Array of waypoints operating under this scroll context.
oldScroll: Keeps the previous scroll position to determine scroll direction.
didScroll: Flag used in scrolling the context's scroll event.
didResize: Flag used in scrolling the context's resize event.
doScroll: Function that checks for crossed waypoints. Called from throttler.
*/
Context = function(context) {
$.extend(this, {
element: $(context),
oldScroll: 0,
/*
List of all elements that have been registered as waypoints.
Each object in the array contains:
element: jQuery object containing a single HTML element.
offset: The window scroll offset, in px, that triggers the waypoint event.
options: Options object that was passed to the waypoint fn function.
*/
'waypoints': [],
didScroll: false,
didResize: false,
doScroll: $.proxy(function() {
var newScroll = this.element.scrollTop(),
// Are we scrolling up or down? Used for direction argument in callback.
isDown = newScroll > this.oldScroll,
that = this,
// Get a list of all waypoints that were crossed since last scroll move.
pointsHit = $.grep(this.waypoints, function(el, i) {
return isDown ?
(el.offset > that.oldScroll && el.offset <= newScroll) :
(el.offset <= that.oldScroll && el.offset > newScroll);
}),
len = pointsHit.length;
// iOS adjustment
if (!this.oldScroll || !newScroll) {
$[wps]('refresh');
}
// Done with scroll comparisons, store new scroll before ejection
this.oldScroll = newScroll;
// No waypoints crossed? Eject.
if (!len) return;
// If several waypoints triggered, need to do so in reverse order going up
if (!isDown) pointsHit.reverse();
/*
One scroll move may cross several waypoints. If the waypoint's continuous
option is true it should fire even if it isn't the last waypoint. If false,
it will only fire if it's the last one.
*/
$.each(pointsHit, function(i, point) {
if (point.options.continuous || i === len - 1) {
triggerWaypoint(point, [isDown ? 'down' : 'up']);
}
});
}, this)
});
// Setup scroll and resize handlers. Throttled at the settings-defined rate limits.
$(context).bind('scroll.waypoints', $.proxy(function() {
if (!this.didScroll) {
this.didScroll = true;
window.setTimeout($.proxy(function() {
this.doScroll();
this.didScroll = false;
}, this), $[wps].settings.scrollThrottle);
}
}, this)).bind('resize.waypoints', $.proxy(function() {
if (!this.didResize) {
this.didResize = true;
window.setTimeout($.proxy(function() {
$[wps]('refresh');
this.didResize = false;
}, this), $[wps].settings.resizeThrottle);
}
}, this));
$w.load($.proxy(function() {
/*
Fire a scroll check, should the page be loaded at a non-zero scroll value,
as with a fragment id link or a page refresh.
*/
this.doScroll();
}, this));
},
/* Returns a Context object from the contexts array, given the raw HTML element
for that context. */
getContextByElement = function(element) {
var found = null;
$.each(contexts, function(i, c) {
if (c.element[0] === element) {
found = c;
return false;
}
});
return found;
},
// Methods exposed to the effin' object
methods = {
/*
jQuery.fn.waypoint([handler], [options])
handler
function, optional
A callback function called when the user scrolls past the element.
The function signature is function(event, direction) where event is
a standard jQuery Event Object and direction is a string, either 'down'
or 'up' indicating which direction the user is scrolling.
options
object, optional
A map of options to apply to this set of waypoints, including where on
the browser window the waypoint is triggered. For a full list of
options and their defaults, see $.fn.waypoint.defaults.
This is how you register an element as a waypoint. When the user scrolls past
that element it triggers waypoint.reached, a custom event. Since the
parameters for creating a waypoint are optional, we have a few different
possible signatures. Let’s look at each of them.
someElements.waypoint();
Calling .waypoint with no parameters will register the elements as waypoints
using the default options. The elements will fire the waypoint.reached event,
but calling it in this way does not bind any handler to the event. You can
bind to the event yourself, as with any other event, like so:
someElements.bind('waypoint.reached', function(event, direction) {
// make it rain
});
You will usually want to create a waypoint and immediately bind a function to
waypoint.reached, and can do so by passing a handler as the first argument to
.waypoint:
someElements.waypoint(function(event, direction) {
if (direction === 'down') {
// do this on the way down
}
else {
// do this on the way back up through the waypoint
}
});
This will still use the default options, which will trigger the waypoint when
the top of the element hits the top of the window. We can pass .waypoint an
options object to customize things:
someElements.waypoint(function(event, direction) {
// do something amazing
}, {
offset: '50%' // middle of the page
});
You can also pass just an options object.
someElements.waypoint({
offset: 100 // 100px from the top
});
This behaves like .waypoint(), in that it registers the elements as waypoints
but binds no event handlers.
Calling .waypoint on an existing waypoint will extend the previous options.
If the call includes a handler, it will be bound to waypoint.reached without
unbinding any other handlers.
*/
init: function(f, options) {
// Register each element as a waypoint, add to array.
this.each(function() {
var cElement = $.fn[wp].defaults.context,
context,
$this = $(this);
// Default window context or a specific element?
if (options && options.context) {
cElement = options.context;
}
// Find the closest element that matches the context
if (!$.isWindow(cElement)) {
cElement = $this.closest(cElement)[0];
}
context = getContextByElement(cElement);
// Not a context yet? Create and push.
if (!context) {
context = new Context(cElement);
contexts.push(context);
}
// Extend default and preexisting options
var ndx = waypointIndex($this, context),
base = ndx < 0 ? $.fn[wp].defaults : context.waypoints[ndx].options,
opts = $.extend({}, base, options);
// Offset aliases
opts.offset = opts.offset === "bottom-in-view" ?
function() {
var cHeight = $.isWindow(cElement) ? $[wps]('viewportHeight') : $(cElement).height();
return cHeight - $(this).outerHeight();
} : opts.offset;
// Update, or create new waypoint
if (ndx < 0) {
context.waypoints.push({
'element': $this,
'offset': null,
'options': opts
});
} else {
context.waypoints[ndx].options = opts;
}
// Bind the function if it was passed in.
if (f) {
$this.bind(eventName, f);
}
// Bind the function in the handler option if it exists.
if (options && options.handler) {
$this.bind(eventName, options.handler);
}
});
// Need to re-sort+refresh the waypoints array after new elements are added.
$[wps]('refresh');
return this;
},
/*
jQuery.fn.waypoint('remove')
Passing the string 'remove' to .waypoint unregisters the elements as waypoints
and wipes any custom options, but leaves the waypoint.reached events bound.
Calling .waypoint again in the future would reregister the waypoint and the old
handlers would continue to work.
*/
remove: function() {
return this.each(function(i, el) {
var $el = $(el);
$.each(contexts, function(i, c) {
var ndx = waypointIndex($el, c);
if (ndx >= 0) {
c.waypoints.splice(ndx, 1);
if (!c.waypoints.length) {
c.element.unbind('scroll.waypoints resize.waypoints');
contexts.splice(i, 1);
}
}
});
});
},
/*
jQuery.fn.waypoint('destroy')
Passing the string 'destroy' to .waypoint will unbind all waypoint.reached
event handlers on those elements and unregisters them as waypoints.
*/
destroy: function() {
return this.unbind(eventName)[wp]('remove');
}
},
/*
Methods used by the jQuery object extension.
*/
jQMethods = {
/*
jQuery.waypoints('refresh')
This will force a recalculation of each waypoint’s trigger point based on
its offset option and context. This is called automatically whenever the window
(or other defined context) is resized, new waypoints are added, or a waypoint’s
options are modified. If your project is changing the DOM or page layout without
doing one of these things, you may want to manually call this refresh.
*/
refresh: function() {
$.each(contexts, function(i, c) {
var isWin = $.isWindow(c.element[0]),
contextOffset = isWin ? 0 : c.element.offset().top,
contextHeight = isWin ? $[wps]('viewportHeight') : c.element.height(),
contextScroll = isWin ? 0 : c.element.scrollTop();
$.each(c.waypoints, function(j, o) {
/* $.each isn't safe from element removal due to triggerOnce.
Should rewrite the loop but this is way easier. */
if (!o) return;
// Adjustment is just the offset if it's a px value
var adjustment = o.options.offset,
oldOffset = o.offset;
// Set adjustment to the return value if offset is a function.
if (typeof o.options.offset === "function") {
adjustment = o.options.offset.apply(o.element);
}
// Calculate the adjustment if offset is a percentage.
else if (typeof o.options.offset === "string") {
var amount = parseFloat(o.options.offset);
adjustment = o.options.offset.indexOf("%") ?
Math.ceil(contextHeight * (amount / 100)) : amount;
}
/*
Set the element offset to the window scroll offset, less
all our adjustments.
*/
o.offset = o.element.offset().top - contextOffset + contextScroll - adjustment;
/*
An element offset change across the current scroll point triggers
the event, just as if we scrolled past it unless prevented by an
optional flag.
*/
if (o.options.onlyOnScroll) return;
if (oldOffset !== null && c.oldScroll > oldOffset && c.oldScroll <= o.offset) {
triggerWaypoint(o, ['up']);
} else if (oldOffset !== null && c.oldScroll < oldOffset && c.oldScroll >= o.offset) {
triggerWaypoint(o, ['down']);
}
/* For new waypoints added after load, check that down should have
already been triggered */
else if (!oldOffset && c.element.scrollTop() > o.offset) {
triggerWaypoint(o, ['down']);
}
});
// Keep waypoints sorted by offset value.
c.waypoints.sort(function(a, b) {
return a.offset - b.offset;
});
});
},
/*
jQuery.waypoints('viewportHeight')
This will return the height of the viewport, adjusting for inconsistencies
that come with calling $(window).height() in iOS. Recommended for use
within any offset functions.
*/
viewportHeight: function() {
return (window.innerHeight ? window.innerHeight : $w.height());
},
/*
jQuery.waypoints()
This will return a jQuery object with a collection of all registered waypoint
elements.
$('.post').waypoint();
$('.ad-unit').waypoint(function(event, direction) {
// Passed an ad unit
});
console.log($.waypoints());
The example above would log a jQuery object containing all .post and .ad-unit
elements.
*/
aggregate: function() {
var points = $();
$.each(contexts, function(i, c) {
$.each(c.waypoints, function(i, e) {
points = points.add(e.element);
});
});
return points;
}
};
/*
fn extension. Delegates to appropriate method.
*/
$.fn[wp] = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === "function" || !method) {
return methods.init.apply(this, arguments);
} else if (typeof method === "object") {
return methods.init.apply(this, [null, method]);
} else {
$.error('Method ' + method + ' does not exist on jQuery ' + wp);
}
};
/*
The default options object that is extended when calling .waypoint. It has the
following properties:
context
string | element | jQuery*
default: window
The context defines which scrollable element the waypoint belongs to and acts
within. The default, window, means the waypoint offset is calculated with relation
to the whole viewport. You can set this to another element to use the waypoints
within that element. Accepts a selector string, *but if you use jQuery 1.6+ it
also accepts a raw HTML element or jQuery object.
continuous
boolean
default: true
If true, and multiple waypoints are triggered in one scroll, this waypoint will
trigger even if it is not the last waypoint reached. If false, it will only
trigger if it is the last waypoint.
handler
function
default: undefined
An alternative way to bind functions to the waypoint, without using the function
as the first argument to the waypoint function.
offset
number | string | function
default: 0
Determines how far the top of the element must be from the top of the browser
window to trigger a waypoint. It can be a number, which is taken as a number
of pixels, a string representing a percentage of the viewport height, or a
function that will return a number of pixels.
onlyOnScroll
boolean
default: false
If true, this waypoint will not trigger if an offset change during a refresh
causes it to pass the current scroll point.
triggerOnce
boolean
default: false
If true, the waypoint will be destroyed when triggered.
An offset of 250 would trigger the waypoint when the top of the element is 250px
from the top of the viewport. Negative values for any offset work as you might
expect. A value of -100 would trigger the waypoint when the element is 100px above
the top of the window.
offset: '100%'
A string percentage will determine the pixel offset based on the height of the
window. When resizing the window, this offset will automatically be recalculated
without needing to call $.waypoints('refresh').
// The bottom of the element is in view
offset: function() {
return $.waypoints('viewportHeight') - $(this).outerHeight();
}
Offset can take a function, which must return a number of pixels from the top of
the window. The this value will always refer to the raw HTML element of the
waypoint. As with % values, functions are recalculated automatically when the
window resizes. For more on recalculating offsets, see $.waypoints('refresh').
An offset value of 'bottom-in-view' will act as an alias for the function in the
example above, as this is a common usage.
offset: 'bottom-in-view'
You can see this alias in use on the Scroll Analytics example page.
The triggerOnce flag, if true, will destroy the waypoint after the first trigger.
This is just a shortcut for calling .waypoint('destroy') within the waypoint
handler. This is useful in situations such as scroll analytics, where you only
want to record an event once for each page visit.
The context option lets you use Waypoints within an element other than the window.
You can define the context with a selector string and the waypoint will act within
the nearest ancestor that matches this selector.
$('.something-scrollable .waypoint').waypoint({
context: '.something-scrollable'
});
You can see this in action on the Dial Controls example.
The handler option gives authors an alternative way to bind functions when
creating a waypoint. In place of:
$('.item').waypoint(function(event, direction) {
// make things happen
});
You may instead write:
$('.item').waypoint({
handler: function(event, direction) {
// make things happen
}
});
*/
$.fn[wp].defaults = {
continuous: true,
offset: 0,
triggerOnce: false,
context: window
};
/*
jQuery object extension. Delegates to appropriate methods above.
*/
$[wps] = function(method) {
if (jQMethods[method]) {
return jQMethods[method].apply(this);
} else {
return jQMethods['aggregate']();
}
};
/*
$.waypoints.settings
Settings object that determines some of the plugin’s behavior.
resizeThrottle
number
default: 200
For performance reasons, the refresh performed during resizes is
throttled. This value is the rate-limit in milliseconds between resize
refreshes. For more information on throttling, check out Ben Alman’s
throttle / debounce plugin.
http://benalman.com/projects/jquery-throttle-debounce-plugin/
scrollThrottle
number
default: 100
For performance reasons, checking for any crossed waypoints during a
scroll event is throttled. This value is the rate-limit in milliseconds
between scroll checks. For more information on throttling, check out Ben
Alman’s throttle / debounce plugin.
http://benalman.com/projects/jquery-throttle-debounce-plugin/
*/
$[wps].settings = {
resizeThrottle: 200,
scrollThrottle: 100
};
$w.load(function() {
// Calculate everything once on load.
$[wps]('refresh');
});
})(jQuery, 'waypoint', 'waypoints', window);
/*
* hoverFlow - A Solution to Animation Queue Buildup in jQuery
* Version 1.00
*
* Copyright (c) 2009 Ralf Stoltze, http://www.2meter3.de/code/hoverFlow/
*/
(function($) {
$.fn.hoverFlow = function(type, prop, speed, easing, callback) {
// only allow hover events
if ($.inArray(type, ['mouseover', 'mouseenter', 'mouseout', 'mouseleave']) == -1) {
return this;
}
// build animation options object from arguments
// based on internal speed function from jQuery core
var opt = typeof speed === 'object' ? speed : {
complete: callback || !callback && easing || $.isFunction(speed) && speed,
duration: speed,
easing: callback && easing || easing && !$.isFunction(easing) && easing
};
// run immediately
opt.queue = false;
// wrap original callback and add dequeue
var origCallback = opt.complete;
opt.complete = function() {
// execute next function in queue
$(this).dequeue();
// execute original callback
if ($.isFunction(origCallback)) {
origCallback.call(this);
}
};
// keep the chain intact
return this.each(function() {
var $this = $(this);
// set flag when mouse is over element
if (type == 'mouseover' || type == 'mouseenter') {
$this.data('jQuery.hoverFlow', true);
} else {
$this.removeData('jQuery.hoverFlow');
}
// enqueue function
$this.queue(function() {
// check mouse position at runtime
var condition = (type == 'mouseover' || type == 'mouseenter') ?
// read: true if mouse is over element
$this.data('jQuery.hoverFlow') !== undefined :
// read: true if mouse is _not_ over element
$this.data('jQuery.hoverFlow') === undefined;
// only execute animation if condition is met, which is:
// - only run mouseover animation if mouse _is_ currently over the element
// - only run mouseout animation if the mouse is currently _not_ over the element
if (condition) {
$this.animate(prop, opt);
// else, clear queue, since there's nothing more to do
} else {
$this.queue([]);
}
});
});
};
})(jQuery);
/*
* jPreLoader - jQuery plugin
* Create a Loading Screen to preload images and content for you website
*
* Name: jPreLoader.js
* Author: Kenny Ooi - http://www.inwebson.com
* Date: January 01, 2012
* Version: 1.0
* Modified: Only preloads images with class of "preload"
*
*/
(function($) {
var items = new Array(),
errors = new Array(),
onComplete = function() {},
current = 0;
var jpreOptions = {
splashVPos: '35%',
loaderVPos: '75%',
splashID: '#jpreContent',
showSplash: true,
showPercentage: true,
debugMode: false,
splashFunction: function() {}
};
var getImages = function(element) {
$(element).find('*:not(script)').each(function() {
var url = "";
if ($(this).css('background-image').indexOf('none') == -1) {
url = $(this).css('background-image');
if (url.indexOf('url') != -1) {
var temp = url.match(/url\((.*?)\)/);
url = temp[1].replace(/\"/g, '');
}
} else if ($(this).get(0).nodeName.toLowerCase() == 'img' && typeof($(this).attr('src')) != 'undefined' && $(this).hasClass('preload')) {
url = $(this).attr('src');
// console.log('image-preload');
}
if (url.length > 0) {
items.push(url);
}
});
};
var preloading = function() {
for (var i = 0; i < items.length; i++) {
loadImg(items[i]);
}
};
var loadImg = function(url) {
var imgLoad = new Image();
$(imgLoad)
.load(function() {
completeLoading();
})
.error(function() {
errors.push($(this).attr('src'));
completeLoading();
})
.attr('src', url);
};
var completeLoading = function() {
current++;
var per = Math.round((current / items.length) * 100);
$(jBar).stop().animate({
height: per + '%'
}, 0, 'linear'); // changed duration from 500 to zero
if (jpreOptions.showPercentage) {
$(jPer).text(per + "%");
}
if (current >= items.length) {
current = items.length;
if (jpreOptions.debugMode) {
var error = debug();
}
loadComplete();
}
};
var loadComplete = function() {
$(jBar).stop().animate({
height: '100%'
}, 0, 'linear', function() { // changed duration from 500 to zero
$(jOverlay).animate({
opacity: '0'
}, 0, function() { // changed duration from 500 to zero
$(jOverlay).remove();
onComplete();
});
});
};
var debug = function() {
if (errors.length > 0) {
var str = 'ERROR - IMAGE FILES MISSING!!!\n\r';
str += errors.length + ' image files cound not be found. \n\r';
str += 'Please check your image paths and filenames:\n\r';
for (var i = 0; i < errors.length; i++) {
str += '- ' + errors[i] + '\n\r';
}
return true;
} else {
return false;
}
};
// create the splash screen overlay
var createContainer = function(tar) {
jOverlay = $('<div></div>')
.attr('id', 'jpreOverlay')
.appendTo('body');
if (jpreOptions.showSplash) {
jContent = $('<div></div>')
.attr('id', 'jpreSlide')
.appendTo(jOverlay);
var conWidth = $(window).width() - $(jContent).width();
$(jContent).html($(jpreOptions.splashID).wrap('<div/>').parent().html());
$(jpreOptions.splashID).remove();
jpreOptions.splashFunction();
}
jLoader = $('<div></div>')
.attr('id', 'jpreLoader')
.appendTo(jOverlay);
jBar = $('<div></div>')
.attr('id', 'jpreBar')
.appendTo(jLoader);
if (jpreOptions.showPercentage) {
jPer = $('<div></div>')
.attr('id', 'jprePercentage')
.appendTo(jLoader)
.html('Loading...');
}
};
$.fn.jpreLoader = function(options, callback) {
if (options) {
$.extend(jpreOptions, options);
}
if (typeof callback == 'function') {
onComplete = callback;
}
createContainer(this);
getImages(this);
preloading();
return this;
};
})(jQuery);
/*
* jQuery Easing v1.3 - https://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend(jQuery.easing, {
def: 'easeOutQuad',
swing: function(x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function(x, t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOutQuad: function(x, t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOutQuad: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInCubic: function(x, t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOutCubic: function(x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOutCubic: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
},
easeInQuart: function(x, t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOutQuart: function(x, t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOutQuart: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
easeInQuint: function(x, t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOutQuint: function(x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOutQuint: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
},
easeInSine: function(x, t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: function(x, t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOutSine: function(x, t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
},
easeInExpo: function(x, t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOutExpo: function(x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOutExpo: function(x, t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function(x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOutCirc: function(x, t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOutCirc: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
},
easeInElastic: function(x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOutElastic: function(x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
easeInOutElastic: function(x, t, b, c, d) {
var s = 1.70158;
var p = 0;
var a = c;
if (t == 0) return b;
if ((t /= d / 2) == 2) return b + c;
if (!p) p = d * (.3 * 1.5);
if (a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
},
easeInBack: function(x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOutBack: function(x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOutBack: function(x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
easeInBounce: function(x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b;
},
easeOutBounce: function(x, t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOutBounce: function(x, t, b, c, d) {
if (t < d / 2) return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
});
/*
* ImageLens
* A jQuery plug-in for Lens Effect Image Zooming
* http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx
*/
(function($) {
$.fn.imageLens = function(options) {
var defaults = {
lensSize: 180,
borderSize: 0,
borderColor: "#FFF"
};
var options = $.extend(defaults, options);
var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize) + "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize) + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor + ";background-repeat: no-repeat;position: absolute;";
return this.each(function() {
var obj = $(this);
var offset = $(this).offset();
//console.log('offset left: ' + offset.left + ', offset top: ' + offset.top);
// Creating lens
var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent());
var targetSize = target.size();
// Calculating actual size of image
var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";
var widthRatio = 0;
var heightRatio = 0;
$(imageTag).load(function() {
widthRatio = $(this).width() / obj.width();
heightRatio = $(this).height() / obj.height();
}).appendTo($(this).parent());
target.css({
backgroundImage: "url('" + imageSrc + "')"
});
target.mousemove(setPosition);
$(this).mousemove(setPosition);
// Hide when user moves quickly off image
target.mouseout(hideLens);
$(this).mouseout(hideLens);
$(window).scroll(hideLens);
function hideLens() {
target.hide();
}
function setPosition(e) {
var offset = obj.offset();
var leftPos = parseInt(e.pageX - offset.left);
var topPos = parseInt(e.pageY - offset.top);
//console.log('leftPos: ' + leftPos + ', topPos: ' + topPos);
if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
target.hide();
} else {
target.show();
// position background image inside target
leftPos = String(((e.pageX - offset.left) * widthRatio - (target.width() + options.borderSize * 2) / 2) * (-1));
topPos = String(((e.pageY - offset.top) * heightRatio - (target.height() + options.borderSize * 2) / 2) * (-1));
target.css({
backgroundPosition: leftPos + 'px ' + topPos + 'px'
});
// position the target
leftPos = String((e.pageX - offset.left) - target.width() / 2);
topPos = String((e.pageY - offset.top) - target.height() / 2);
target.css({
left: leftPos + 'px',
top: topPos + 'px'
});
}
}
});
};
})(jQuery);
/*
* Function to fade in image sprites on hover
*/
$.fn.fadeSprite = function() {
this.mouseenter(function(e) {
$(this).find('a').hoverFlow(e.type, {
opacity: 1
}, 300);
}).mouseleave(function(e) {
$(this).find('a').hoverFlow(e.type, {
opacity: 0
}, 300);
});
};
/*
* Function to animate image thumbnail arrows on hover
*/
$.fn.hoverThumb = function() {
// only animate for large desktop browsers
if ($(window).width() >= 1140) {
this.mouseenter(function(e) {
$(this).find('.arrow-r').hoverFlow(e.type, {
opacity: 1,
right: 15
}, 500);
//$(this).hoverFlow(e.type, {opacity:1}, 300).siblings().hoverFlow(e.type, {opacity:0.3}, 300);
$(this).stop().animate({
'opacity': '1'
}, 300).siblings().stop().animate({
'opacity': '0.4'
}, 500);
}).mouseleave(function(e) {
$(this).find('.arrow-r').hoverFlow(e.type, {
opacity: 0,
right: 0
}, 500);
});
// once the mouse leaves the whole thumbs div
$('#thumbs').mouseleave(function(e) {
// we reset the thumbs
$('#thumbs li').stop().animate({
'opacity': '1'
}, 500);
});
}
};
/*
* Function to bring in portfolio gallery items one by one
*/
$.fn.animateGallery = function() {
$(this).each(function(i) {
$(this).delay(i * 150).animate({
'opacity': '1'
}, 300, 'easeOutExpo');
});
};
/*
* Function to animate leaving a page
*/
$.fn.leavePage = function() {
this.click(function(event) {
event.preventDefault();
linkLocation = this.href;
$('#header').animate({
'opacity': '0',
'top': '-92px'
}, 500, 'easeOutExpo');
$('body').fadeOut(500, function() {
window.location = linkLocation;
});
});
};
/*
* Function to animate content details
*/
function animateContent() {
// show the rest of the content
$('#content-detail').css({
'opacity': '0',
'top': '50px'
}).stop().animate({
'opacity': '1',
'top': '0px'
}, 500, 'easeOutExpo');
$('#footer').css({
'opacity': '0',
'top': '50px'
}).stop().animate({
'opacity': '1',
'top': '0px'
}, 500, 'easeOutExpo');
}
/*
* Function to switch face on browser resize
*/
$.fn.resizeFace = function() {
$(window).resize(function() {
// Show large face
if ($(window).width() >= 1140) {
$('#designer-img').css({
'opacity': '1'
});
$('#coder-img').css({
'opacity': '1'
});
$('#designer-bg').css({
'opacity': '1'
});
$('#coder-bg').css({
'opacity': '1'
});
$('#designer').css({
'opacity': '1'
});
$('#coder').css({
'opacity': '1'
});
} else { // Show smaller face image
$('#face-img').css({
'opacity': '1'
});
$('#designer').css({
'opacity': '1'
});
$('#coder').css({
'opacity': '1'
});
}
});
};
/*
* Function to animate home page
*/
$.fn.animateHome = function() {
// only animate for large desktop browsers
if ($(window).width() >= 1140) {
$('#content').animate({
'opacity': '1'
}, 500, 'easeOutExpo');
$('#designer-img').css({
'left': '-500px'
}).stop().animate({
'opacity': '1',
'left': '100px'
}, 1000, 'easeOutExpo');
$('#coder-img').css({
'right': '-500px'
}).stop().animate({
'opacity': '1',
'right': '100px'
}, 1000, 'easeOutExpo');
$('#designer-bg').css({
'left': '-500px'
}).stop().animate({
'opacity': '1',
'left': '100px'
}, 1500, 'easeOutBack');
$('#coder-bg').css({
'right': '-500px'
}).stop().animate({
'opacity': '1',
'right': '100px'
}, 1500, 'easeOutBack');
$('#designer').delay(1500).animate({
'opacity': '1'
}, 500, 'easeOutExpo');
$('#coder').delay(1500).animate({
'opacity': '1'
}, 500, 'easeOutExpo', function() {
animateFace();
});
} else {
$('#content').animate({
'opacity': '1'
}, 500, 'easeOutExpo');
$('#face-img').animate({
'opacity': '1'
}, 2000, 'easeOutExpo');
$('#designer').delay(1000).animate({
'opacity': '1'
}, 500, 'easeOutExpo');
$('#coder').delay(1000).animate({
'opacity': '1'
}, 500, 'easeOutExpo', function() {
animateContent();
});
}
};
/*
* Function to animate main section
*/
function animateMain() {
$('#text-main').css({
'visibility': 'visible',
'right': '50%'
}).stop().animate({
'opacity': '1',
'right': '0%'
}, 1000, 'easeOutExpo');
$('#img-main').css({
'visibility': 'visible',
'left': '50%'
}).stop().delay(100).animate({
'opacity': '1',
'left': '0%'
}, 1000, 'easeOutExpo');
$('#snaps').css({
'visibility': 'visible',
'opacity': '1'
});
$('#snaps-1').css({
'visibility': 'visible',
'top': '50px'
}).stop().delay(300).animate({
'opacity': '1',
'top': '0px'
}, 200, 'easeOutBack');
$('#snaps-2').css({
'visibility': 'visible',
'top': '50px'
}).stop().delay(500).animate({
'opacity': '1',
'top': '0px'
}, 200, 'easeOutBack');
$('#snaps-3').css({
'visibility': 'visible',
'top': '50px'
}).stop().delay(700).animate({
'opacity': '1',
'top': '0px'
}, 200, 'easeOutBack');
$('#snaps-4').css({
'visibility': 'visible',
'top': '50px'
}).stop().delay(900).animate({
'opacity': '1',
'top': '0px'
}, 200, 'easeOutBack');
$('#snaps-5').css({
'visibility': 'visible',
'top': '50px'
}).stop().delay(1100).animate({
'opacity': '1',
'top': '0px'
}, 200, 'easeOutBack');
$('#snaps-6').css({
'visibility': 'visible',
'top': '50px'
}).stop().delay(1300).animate({
'opacity': '1',
'top': '0px'
}, 200, 'easeOutBack', function() {
animateContent();
});
}
/*
* Function to animate pages (e.g. single-portfolio.php)
*/
function animatePage() {
$('#text-main').css({
'visibility': 'visible',
'right': '50%'
}).stop().animate({
'opacity': '1',
'right': '0%'
}, 1000, 'easeOutExpo');
$('#img-main').css({
'visibility': 'visible',
'left': '50%'
}).stop().delay(100).animate({
'opacity': '1',
'left': '0%'
}, 1000, 'easeOutExpo', function() {
animateContent();
});
}
/*
* Function to animate contact page
*/
function animateContact() {
var navi = $('#navi');
navi.stop().delay(2000).animate({
'opacity': '1'
}, 1000, 'easeOutQuad', function() {
if ($(window).width() >= 1140) {
navi.imageLens({
imageSrc: "http://v2.adhamdannaway.com/wp-content/themes/ad/images/adham-dannaway-sky-people.jpg"
});
}
});
}
/*
* Function to animate about page
*/
function animateAbout() {
// Animate section 0 (if window height is small enough)
if ($(window).height() <= 880) {
$('#img-0').waypoint(function(event, direction) {
$('#img-0').css({
'visibility': 'visible',
'top': '500px'
}).stop().animate({
'opacity': '1',
'top': '0px'
}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
} else {
$('#img-0').css({
'visibility': 'visible',
'opacity': '1'
});
}
// Animate Section 1
$('#img-1').waypoint(function(event, direction) {
$('#img-1').css({
'visibility': 'visible',
'right': '50%'
}).stop().animate({
'opacity': '1',
'right': '0%'
}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
// Animate Chart
$('.bar-chart').waypoint(function(event, direction) {
$('#aqua').css({
'visibility': 'visible',
'height': '0%'
}).stop().delay(200).animate({
'opacity': '1',
'height': '95%'
}, 1000, 'easeOutExpo');
$('#pink').css({
'visibility': 'visible',
'height': '0%'
}).stop().delay(400).animate({
'opacity': '1',
'height': '90%'
}, 1000, 'easeOutExpo');
$('#yellow').css({
'visibility': 'visible',
'height': '0%'
}).stop().delay(600).animate({
'opacity': '1',
'height': '80%'
}, 1000, 'easeOutExpo');
$('#brown').css({
'visibility': 'visible',
'height': '0%'
}).stop().delay(800).animate({
'opacity': '1',
'height': '75%'
}, 1000, 'easeOutExpo');
$('#red').css({
'visibility': 'visible',
'height': '0%'
}).stop().delay(1000).animate({
'opacity': '1',
'height': '40%'
}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
// Animate Featured in
$('#img-2').waypoint(function(event, direction) {
$('#img-2').css({
'visibility': 'visible',
'left': '50%'
}).stop().animate({
'opacity': '1',
'left': '0%'
}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
}
/*
* Function to animate featured page
*/
function animateFeatured() {
// Animate section 0 (if window height is small enough)
if ($(window).height() <= 880) {
$('#img-0').waypoint(function(event, direction) {
$('#img-0').css({
'visibility': 'visible',
'right': '50%'
}).stop().animate({
'opacity': '1',
'right': '0%'
}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
} else {
$('#img-0').css({
'visibility': 'visible',
'opacity': '1'
});
}
// Animate section 1
$('#img-1').waypoint(function(event, direction) {
$('#img-1').css({
'visibility': 'visible',
'left': '50%'
}).stop().animate({
'opacity': '1',
'left': '0%'
}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
// Animate section 2
$('#icons').waypoint(function(event, direction) {
$('#icons').css({
'visibility': 'visible',
'top': '250px'
}).stop().animate({
'opacity': '1',
'top': '0px'
}, 1000, 'easeOutExpo');
}, {
offset: '80%',
triggerOnce: true
});
}
/*
* Function to animate face
*/
function animateFace() {
var designerImg = $('#designer-img');
var coderImg = $('#coder-img');
var designerHover = $('#designer');
var coderHover = $('#coder');
var designerDesc = $('#designer-desc');
var coderDesc = $('#coder-desc');
var designerArrow = $('#designer-arrow');
var coderArrow = $('#coder-arrow');
var designerBg = $('#designer-bg');
var coderBg = $('#coder-bg');
var face = $('#face');
var section = $('#section');
var duration = 500;
var mouseX = 0;
var relMouseX = 520;
var xp = 520;
frameRate = 30;
timeInterval = Math.round(1000 / frameRate);
// Firstly animate the bottom content onto the page
animateContent();
section.mouseenter(function(e) {
// Get mouse position
section.mousemove(function(e) {
// raw mouse position
mouseX = e.pageX;
// mouse position relative to face div
relMouseX = mouseX - face.offset().left;
});
// Animate the face based on mouse movement
loop = setInterval(function() {
// zeno's paradox dampens the movement
xp += (relMouseX - xp) / 12;
designerImg.css({
width: 420 + (520 - xp) * 0.5,
left: 100 + (520 - xp) * 0.1
});
coderImg.css({
width: 420 + (xp - 520) * 0.5,
right: 100 - (520 - xp) * 0.1
});
designerBg.css({
left: 100 + (520 - xp) * 0.05,
opacity: ((1040 - xp) / 520)
});
coderBg.css({
right: 100 + (xp - 520) * 0.05,
opacity: (xp / 520)
});
designerDesc.css({
opacity: ((1040 - xp) / 520)
});
coderDesc.css({
opacity: (xp / 520)
});
}, timeInterval);
}).mouseleave(function(e) {
// reset the face to initial state
clearInterval(loop);
xp = 520;
mouseX = 0;
relMouseX = 520;
designerImg.hoverFlow(e.type, {
width: 420,
left: 100
}, duration, 'easeOutQuad');
coderImg.hoverFlow(e.type, {
width: 420,
right: 100
}, duration, 'easeOutQuad');
coderDesc.hoverFlow(e.type, {
opacity: 1
}, duration, 'easeOutQuad');
designerDesc.hoverFlow(e.type, {
opacity: 1
}, duration, 'easeOutQuad');
coderBg.hoverFlow(e.type, {
right: 100,
opacity: 1
}, duration, 'easeOutQuad');
designerBg.hoverFlow(e.type, {
left: 100,
opacity: 1
}, duration, 'easeOutQuad');
});
}
/*
* Function to detect IE
*/
// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------
// UPDATE: Now using Live NodeList idea from @jdalton
var ie = (function() {
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
/*
* Function to print IE page
*/
function ieMessage() {
// define the HTML of the page
var page = "<div id='ie' class='clearfix'>";
page += "<section class='main nopad-b'>";
page += "<div class='row'>";
page += "<div class='col-5'>";
page += "<h1>Ummm ...</h1>";
page += "<p class='intro'>Well this is awkward. It looks like you're using an old browser.</p>";
page += "<p>Old browsers including Internet Explorer 6, 7 and 8 can't handle some of the new stuff I've packed into this website. If you'd like to see the full website you'll need to download one of the nice new browsers below. It will also make your life much easier when browsing the net later on.</p>";
page += "<p>";
page += "<a href='https://www.google.com/chrome' target='_blank' class='icon-browser chrome'></a>";
page += "<a href='https://www.mozilla.org/en-US/firefox/new/' target='_blank' class='icon-browser firefox'></a>";
page += "<a href='https://www.apple.com/au/safari/'' target='_blank' class='icon-browser safari'></a>";
page += "</p>";
page += "</div>";
page += "<div class='col-7 last'>";
page += "<img class='major' src='http://v2.adhamdannaway.com/wp-content/themes/ad/images/about-adham-dannaway.jpg' alt='adham dannaway ui designer'>";
page += "</div>";
page += "</div>";
page += "</section>";
page += "</div>";
// Print the page
$('.content').replaceWith(page);
}
//If browser is IE8 or older we show IE specific page
if (ie < 9) {
ieMessage();
}
/*
* Call functions when dom is ready
*/
$(document).ready(function() {
// Hide browser top bar in mobiles
$('body').scrollTop(1);
// Toggle Navigation for mobile devices
$('.icon-nav').on('click', function() {
$('header nav').slideToggle();
$(this).toggleClass('active');
});
// Function to scroll to top
$('a[href=#top]').click(function() {
$('html, body').animate({
scrollTop: 0
}, 1000, 'easeInOutQuad');
return false;
});
// Function to fade in image sprites
$('.sprite').fadeSprite();
//Function for thumbnail hover effect
$('.thumbs li').hoverThumb();
// Function to animate when leaving page
$('.transition, #nav a, #nav-footer a, #thumbs a, #next a, #prev a, #logo, #face a').leavePage();
// Animate the header on first
$('#header').stop().animate({
'opacity': '1',
'top': '0'
}, 1000);
// Preload the page with jPreLoader
$('body').jpreLoader({
showSplash: true
}, function() {
//Show the page once images are loaded
$('#face').animateHome();
$('#face').resizeFace();
});
});
