David A. Windham
david
/
daw
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

home

windhamdavid 10 years ago
parent
996191e0b1
commit
ff71cf18ad
5 changed files with 338 additions and 284 deletions
Unified View Show Diff Stats
  1. 13 12
      header-home.php
  2. 29 68
      index.php
  3. 68 47
      js/init.js
  4. 98 0
      js/scripts.js
  5. 130 157
      style.css

+ 13 - 12
header-home.php
View File 

@@ -15,18 +15,17 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <?php get_template_part('loader') ?>
 
 <?php get_template_part('loader') ?>
 
-<div class="intro collapse in" data-toggle="collapse" data-parent="body">
 
-	<div class="container-full">
 
-		<div class="container">
 
-			<div class="row">
 
-				<div class="col-lg-8 col-lg-offset-2 centered">
 
-					<div class="welcome"></div>
 
-					<div class="screen-reader">
 
-						<h1>Hello,</h1>
 
-						<h3>Welcome to my little corner of the internet.</h3>		
-						<h4>It's very nice to have you here!</h4>
 
-					</div>
 
+<div class="modal fade terminal-welcome" tabindex="-1" role="dialog" aria-labelledby="welcome" aria-hidden="true">
 
+	<div class="modal-dialog modal-lg">
 
+		<div class="modal-content">
 
+			<div class="welcome-back">
 
+				<div class="screen-reader">
 
+					<h1>Hello,</h1>
 
+					<h3>Welcome to my little corner of the internet.</h3>		
+					<h4>It's very nice to have you here!</h4>
 
 				</div>
 
 				</div>
 
+				<div class="welcome"></div>
 
+				<div class="thermo"></div>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
@@ -36,7 +35,7 @@
 
 		<div class="modal-content">
 
 		<div class="modal-content">
 
 			<div class="welcome-back">
 
 			<div class="welcome-back">
 
 				<div class="welcome-back-text"></div>
 
 				<div class="welcome-back-text"></div>
 
-				<div class="thermo"></div>	
+				<div class="thermo"></div>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
@@ -45,6 +44,8 @@
 
 	<div id="nav">
 
 	<div id="nav">
 
 		<div class="navbar navbar-fixed-top">
 
 		<div class="navbar navbar-fixed-top">
 
 			<div class="container">
 
 			<div class="container">
 
+				<img class="navbar-brand" src="<?php echo get_bloginfo('template_directory');?>/img/daw.png" width="70" class="logo" alt="David Windham"/>
 
+
 
 				<div class="site-title">
 
 				<div class="site-title">
 
 					<a href="#" class="navbar-brand navbar-right"  data-toggle="offcanvas" data-target=".navmenu" title="David A. Windham" rel="home">David A. Windham</a>			
 					<a href="#" class="navbar-brand navbar-right"  data-toggle="offcanvas" data-target=".navmenu" title="David A. Windham" rel="home">David A. Windham</a>			
 				</div>
 
 				</div>

+ 29 - 68
index.php
View File 

@@ -1,79 +1,40 @@
 
 <?php get_header('home'); ?>
 
 <?php get_header('home'); ?>
 
-	<div class="container-full leader">
 
-		<div class="container">
 
-			<div class="row">
 
-				<div class="col-xs-5">
 
-					<h1 class="didot">David A. Windham</h1>
 
-					
-					<svg class="logo" width="250px" height="0px">
 
-					</svg>
 
-				</div>
 
-				<div class="col-xs-4">
 
-					<img src="<?php echo get_bloginfo('template_directory');?>/img/daw.png" width="100" class="logo" alt="David Windham"/>
 
-				</div>
 
-				<div class="col-xs-3 front-nav">
 
-					<div class="col-sm-6">
 
-						<ul>
 
-							<li><a href="notebook">Notebook</a></li>
 
-							<li><a href="studio">Studio</a></li>
 
-							<li><a href="bio">Bio</a></li>
 
-						</ul>
 
-					</div>
 
-					<div class="col-sm-6">
 
-						<ul>
 
-							<li><a href="contact">Contact</a></li>
 
-							<li><a href="archives">Archives</a></li>
 
-							<li><a href="essays">Essays</a></li>
 
-							<li></li>
 
-							<li></li>
 
-						</ul>
 
-					</div>
 
-				</div>
 
-			</div>
 
-		</div>
 
-	</div>
 
-	<video id="tv" class="sat" preload="auto" autoplay="true" loop="loop" poster="wp-content/themes/dw/img/tv.jpg">
 
+	<video id="tv" preload="auto" loop="loop" poster="wp-content/themes/dw/img/tv.jpg">
 
 	     <source src="<?php echo get_bloginfo('template_directory');?>/img/tv.mp4" type="video/mp4">
 
 	     <source src="<?php echo get_bloginfo('template_directory');?>/img/tv.mp4" type="video/mp4">
 
 	     <source src="<?php echo get_bloginfo('template_directory');?>/img/tv.webm" type="video/webm">
 
 	     <source src="<?php echo get_bloginfo('template_directory');?>/img/tv.webm" type="video/webm">
 
 	</video>
 
 	</video>
 
-	<div class="container-full">
 
-		<div id="caro-lead" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
 
+	<div class="container-full leader">
 
+		<div id="caro-lead" class="carousel slide carousel-fade">
 
 			<div class="carousel-inner">
 
 			<div class="carousel-inner">
 
-				<div class="item active">
 
-					<div class="container">
 
+				<div class="item active" data-id="1">
 
+					<div class="container first-slide">
 
 						<h1 class="light super cm-sans">Computer Modern Sans 1</h1>
 
 						<h1 class="light super cm-sans">Computer Modern Sans 1</h1>
 
 						<h3 class="light cm-concrete">The First tagline about that article</h3>
 
 						<h3 class="light cm-concrete">The First tagline about that article</h3>
 
-					</div>
 
-					<div class="carousel-caption">
 
-						<p>Some sort of captions</p>
 
+						<div class="carousel-caption">
 
+							<p>Some sort of captions</p>
 
+						</div>
 
 					</div>
 
 					</div>
 
 				</div>
 
 				</div>
 
-			    <div class="item">
 
+			    <div class="item constellation" data-id="2">
 
 					<div class="container">
 
 					<div class="container">
 
 						<h1 class="light super cm-sans wow fadeIn" data-wow-duration="4s">This Is Another Title - 2</h1>
 
 						<h1 class="light super cm-sans wow fadeIn" data-wow-duration="4s">This Is Another Title - 2</h1>
 
-						<h3 class="light cm-concrete">Another line about that Essay</h3>
 
-					</div>
 
-					<div class="carousel-caption">
 
-						<p>Some sort of captions</p>
 
-					</div>
 
-			    </div>
 
-			    <div class="item bg1">
 
-					<div class="container">
 
-						
-						<h1 class="light super cm-sans">And A Third Title - 3</h1>
 
-						<h3 class="light cm-concrete">A Third byline about an Artwork</h3>
 
-					</div>
 
-					<div class="carousel-caption">
 
-						<p>Some sort of captions</p>
 
+						<h3 class="light cm-concrete">Another line about that...</h3>
 
+						<div class="carousel-caption">
 
+							<p>Some sort of captions</p>
 
+						</div>
 
+						<svg id="stars" width="300" viewBox="0 0 300 200">
 
+							<path fill="none" stroke="#777" stroke-width="1px" stroke-miterlimit="10" d="M23.6,3.7l155.1,37.4L295,8.3l-7.6,174.4l-9.3-146.9L171.9,159.6l-24.9-97L36.2,137.1l24.1-59.4l-49.7,8l7.4-80.3"/>
 
+						</svg>
 
 					</div>
 
 					</div>
 
+
 
 			    </div>
 
 			    </div>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
-	<div class="container-fluid posts">
 
+	<div class="container-fluid posts-front">
 
 		<div class="container">
 
 		<div class="container">
 
 			<div class="row">
 
 			<div class="row">
 
-				<div class="col-sm-4 wow fadeInLeft">
 
+				<div class="col-sm-4 wow fadeInLeft" data-wow-offset="600">
 
 					<article id="main" class="home">
 
 					<article id="main" class="home">
 
 						<?php query_posts('showposts=1'); ?>
 
 						<?php query_posts('showposts=1'); ?>
 
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
@@ -89,7 +50,7 @@
 
 						<?php endwhile; ?>
 
 						<?php endwhile; ?>
 
 					</article>
 
 					</article>
 
 				</div>
 
 				</div>
 
-				<div class="col-sm-4 wow fadeInUp" data-wow-duration="1s">
 
+				<div class="col-sm-4 wow fadeInUp" data-wow-offset="600">
 
 					<article id="main" class="home">
 
 					<article id="main" class="home">
 
 						<?php query_posts('showposts=1&offset=1'); ?>
 
 						<?php query_posts('showposts=1&offset=1'); ?>
 
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
@@ -105,7 +66,7 @@
 
 						<?php endwhile; ?>
 
 						<?php endwhile; ?>
 
 					</article>
 
 					</article>
 
 				</div>
 
 				</div>
 
-				<div class="col-sm-4 wow fadeInRight">
 
+				<div class="col-sm-4 wow fadeInRight" data-wow-offset="600">
 
 					<article id="main" class="home">
 
 					<article id="main" class="home">
 
 						<?php query_posts('showposts=1&offset=2'); ?>
 
 						<?php query_posts('showposts=1&offset=2'); ?>
 
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 
@@ -124,29 +85,29 @@
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
-	<div class="container-full dark">
 
+	<div class="container-fluid dark">
 
 		<div class="container">
 
 		<div class="container">
 
 			<div class="row">
 
 			<div class="row">
 
-				<div class="col-xs-5">
 
+				<div class="col-sm-6">
 
+					<h3 class="dim">About</h3>
 
+						<p class="dim"><img class="me" src="wp-content/themes/dw/img/me.png">
 
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie quis urna sit amet vulputate. Pellentesque non venenatis dolor, ut commodo eros. Suspendisse a ultricies nisi, vitae blandit mauris. Sed leo magna, hendrerit ut eleifend eu, rhoncus id lorem. Pellentesque est nunc, venenatis a elementum at, euismod placerat dui. Cras et enim ultrices, accumsan quam in, eleifend sapien.</p>
 
 					<p>&nbsp;</p>
 
 					<p>&nbsp;</p>
 
 					<p>&nbsp;</p>
 
 					<p>&nbsp;</p>
 
-					<p>&nbsp;</p>
 
-				</div>
 
-				<div class="col-xs-4">
 
-					
 				</div>
 
 				</div>
 
-				<div class="col-xs-2">
 
+				<div class="col-xs-6">
 
 					
 					
 				</div>
 
 				</div>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
-	<div class="container-full top-lead">
 
+	<div class="container-fluid caro-grad">
 
 		<div id="caro" class="carousel slide">
 
 		<div id="caro" class="carousel slide">
 
 			<ol class="carousel-indicators">
 
 			<ol class="carousel-indicators">
 
 			    <li data-target="#caro" data-slide-to="0" class="active"></li>
 
 			    <li data-target="#caro" data-slide-to="0" class="active"></li>
 
 			    <li data-target="#caro" data-slide-to="1"></li>
 
 			    <li data-target="#caro" data-slide-to="1"></li>
 
 			    <li data-target="#caro" data-slide-to="2"></li>
 
 			    <li data-target="#caro" data-slide-to="2"></li>
 
+				<li data-target="#caro" data-slide-to="3"></li>
 
 			  </ol>
 
 			  </ol>
 
 			<div class="carousel-inner">
 
 			<div class="carousel-inner">
 
 				<div class="item active">
 
 				<div class="item active">

+ 68 - 47
js/init.js
View File 

@@ -3,7 +3,7 @@ new WOW().init();
 
 jQuery(document).ready(function($) {
 
 jQuery(document).ready(function($) {
 
 	
 	
 $(window).bind('load', function() {
 
 $(window).bind('load', function() {
 
-	$('#loader').fadeOut(70);
 
+	$('#loader').fadeOut(700);
 
 });
 
 });
 
 
 
 
 
@@ -15,62 +15,54 @@ $(function dw_set_cookie() {
 
 	var COOKIE = 'windhamdavid-cookie';
 
 	var COOKIE = 'windhamdavid-cookie';
 
 	var dwcookie = $.cookie(COOKIE);
 
 	var dwcookie = $.cookie(COOKIE);
 
 	if (dwcookie == null) {
 
 	if (dwcookie == null) {
 
-		$.cookie(COOKIE, 'yum-cookies', { expires: 7, path: '/'});	
+		$.cookie(COOKIE, 'yum-cookies', { expires: 7, path: '/'});
 
+		$('.terminal-welcome').modal('show');	
 		$('.welcome').typed({
 
 		$('.welcome').typed({
 
-			strings: ['Hey,', 'Hello,\n^10Welcome to ^10my domain ^10...^10', 'Hello, \nWelcome to my little corner of the internet. \n^10It is nice to ', 'Hello, \nWelcome to my little corner of the internet. \nIt is very nice to have you here!^10\n'],
 
-			typeSpeed: -40,
 
-			backSpeed: -70,
 
+			strings: ['Hey,', 'Hello,\n^10Welcome to ^10my domain ^10...^10', 'Hello, \nWelcome to my little corner of the internet. \n^10It is nice to ', 'Hello, \nWelcome to my little corner of the internet. \nIt is very nice to have you here!^200\n'],
 
+			typeSpeed: 30,
 
+			backSpeed: 50,
 
 			startDelay: 0,
 
 			startDelay: 0,
 
 			backDelay: 0,
 
 			backDelay: 0,
 
 			loop: false,
 
 			loop: false,
 
 			loopCount: false,
 
 			loopCount: false,
 
 			attr: null,
 
 			attr: null,
 
 			callback: function(){
 
 			callback: function(){
 
-			 	dw_shift();
 
+				dw_shift();
 
 			 }
 
 			 }
 
-		});	
+		});
 
+		$('.first-slide').css('visibility','hidden');	
 	}
 
 	}
 
 	else {
 
 	else {
 
-		$('.intro').collapse('hide');
 
 		$('.terminal').modal('show');
 
 		$('.terminal').modal('show');
 
 		$('.welcome-back-text').typed({
 
 		$('.welcome-back-text').typed({
 
-			strings: ['Hello...', 'Welcome back'],
 
-			typeSpeed: 10,
 
-			backSpeed: 70,
 
+			strings: ['...', 'Welcome back'],
 
+			typeSpeed: 30,
 
+			backSpeed: 50,
 
 			startDelay: 0,
 
 			startDelay: 0,
 
 			backDelay: 0,
 
 			backDelay: 0,
 
 			loop: false,
 
 			loop: false,
 
 			loopCount: false,
 
 			loopCount: false,
 
 			attr: null,
 
 			attr: null,
 
 			callback: function(){	
 			callback: function(){	
-				dw_terminal();
 
-				dw_collapse();
 
+				dw_terminal();	
 			 }
 
 			 }
 
-		});	
+		});
 
+		$('.first-slide').css('visibility','hidden');
 
+		$('.terminal').on('hidden.bs.modal', function () {
 
+		    dw_caro();
 
+			$('.first-slide').css('visibility','visible');
 
+		})	
 	}
 
 	}
 
 });
 
 });
 
 	
 	
 function dw_shift() {
 
 function dw_shift() {
 
-	var collapseh = $('.intro').height();
 
-	$('.leader').ScrollTo({
 
-		offset: -(collapseh),
 
-	    duration: 1500,
 
-		easing: 'linear',
 
-		callback: function(){
 
-			dw_collapse();
 
-		}
 
-	});
 
-	$('.intro').slideToggle({
 
-		duration: 1000,
 
-		easing: 'linear'
 
-	});
 
+	$('.terminal-welcome').modal('hide');
 
+	$('.terminal-welcome').on('hidden.bs.modal', function () {
 
+	    dw_caro();
 
+		$('.first-slide').css('visibility','visible');
 
+	})
 
 }
 
 }
 
 
 
-function dw_collapse() {
 
-	$('.welcome-back-text').addClass('.welcome-back-text:after');
 
-	//$('.intro').collapse('hide');
 
-	//$('.terminal').modal('hide');
 
-}
 
 
 
 /*============================================
 
 /*============================================
 
 		      Terminal
 
 		      Terminal
 
@@ -104,7 +96,7 @@ function dw_collapse() {
 
 
 
 function dw_terminal(){
 
 function dw_terminal(){
 
 	function type(text){
 
 	function type(text){
 
-		var span = $('<span>').appendTo(this).after('<span id="blinker" style="background: green">&nbsp;&nbsp;</span>');
 
+		var span = $('<span>').appendTo(this).after('<span id="blinker" style="background:green">&nbsp;&nbsp;</span>');
 
 		var style = $('<style>p.input {visibility: hidden} p.input.old {visibility: visible}</style>').appendTo('head');
 
 		var style = $('<style>p.input {visibility: hidden} p.input.old {visibility: visible}</style>').appendTo('head');
 
 		$('p.input').addClass('old');
 
 		$('p.input').addClass('old');
 
 		var progress = 0;
 
 		var progress = 0;
 
@@ -153,7 +145,7 @@ $('.nav-toggle').on('touchstart click', function(e) {
 
 });
 
 });
 
 
 
 $('#nav').affix({
 
 $('#nav').affix({
 
-	offset: {top: $('.intro').height()-$('.navbar').height()}
 
+	//offset: {top: $('.intro').height()-$('.navbar').height()}
 
 });	
 });	
 
 
 $(function dw_hidenav() {
 
 $(function dw_hidenav() {
 
@@ -182,23 +174,53 @@ $(function dw_hidenav() {
 
 		      Carousel 
 		      Carousel 
 ==============================================*/
 
 ==============================================*/
 
 
 
-$('.carousel').carousel({
 
-	interval: false
 
-});
 
+function dw_caro(){
 
+	$('#caro-lead').carousel({
 
+		interval: 7777, 
+		pause: false
 
+	});
 
+	var vidout = document.getElementById('tv');
 
+    vidout.play();
 
+	$('.posts-front').show();
 
+}
 
 
 
-$('#caro-lead').on('slide.bs.carousel', function() {
 
+$('#caro-lead').on('slide.bs.carousel', function(event) {
 
 	$('.carousel-caption').fadeIn(600);
 
 	$('.carousel-caption').fadeIn(600);
 
-	//$('#tv').removeClass('invert');
 
+	var consta = $(event.target);
 
+	setTimeout(function() {
 
+		if (consta.find('.item.active').data('id') === 1) {	
+			$('#tv').removeClass('unblur').addClass('blur');
 
+			var anistars = new DrawFillSVG({elementId: 'stars'});
 
+			anistars.replay();
 
+			$('#tv').delay(100).queue(function(pauseit){
 
+				var vidin = document.getElementById('tv');
 
+			    vidin.pause();
 
+			    pauseit();
 
+			});
 
+		}
 
+	}, 10);
 
 });
 
 });
 
 
 
 $('#caro-lead').on('slid.bs.carousel', function() {
 
 $('#caro-lead').on('slid.bs.carousel', function() {
 
 	$('.carousel-caption').fadeOut(600);
 
 	$('.carousel-caption').fadeOut(600);
 
-	//$('#tv').addClass('invert');
 
+	$('#tv').delay(3200).queue(function(playit){
 
+		$('#tv').addClass('unblur').removeClass('blur');
 
+		var vidout = document.getElementById('tv');
 
+	    vidout.play();
 
+	    playit();
 
+	});
 
 });
 
 });
 
 
 
-$('.caro').carousel({
 
-	interval: 9000
 
-});
 
+$('.caro-grad').appear();
 
+$('.caro-grad').one('appear', dw_appear);
 
+function dw_appear() {
 
+	$('#caro').carousel({
 
+		interval: 5555,
 
+		pause: false
 
+	});
 
+	var anima = new DrawFillSVG({elementId: 'sv'});
 
+	anima.replay();
 
+};
 
 
 
 $(document).bind('keyup', function(e) {
 
 $(document).bind('keyup', function(e) {
 
     if(e.which === 39){
 
     if(e.which === 39){
 
@@ -211,13 +233,11 @@ $(document).bind('keyup', function(e) {
 
     }
 
     }
 
 });
 
 });
 
 
 
+
 
+
 
 /*============================================
 
 /*============================================
 
 		      SVG Animate
 
 		      SVG Animate
 
 ==============================================*/
 
 ==============================================*/
 
-(function() {
 
-	var myAnimation = new DrawFillSVG({elementId: 'sv'});
 
-})();
 
-
 
 
 
 $('#caro').on('slid.bs.carousel', function() {
 
 $('#caro').on('slid.bs.carousel', function() {
 
 	$('.active .animac').removeClass('hide-svg fade-svg');
 
 	$('.active .animac').removeClass('hide-svg fade-svg');
 
@@ -236,6 +256,7 @@ $('#caro').on('slide.bs.carousel', function() {
 
 	    hideit();
 
 	    hideit();
 
 	});
 
 	});
 
 });
 
 });
 
+
 
 $('#caro').on('slid.bs.carousel', function() {
 
 $('#caro').on('slid.bs.carousel', function() {
 
 	$('.active #svg-imac.screen').delay(2500).queue(function(screenit){
 
 	$('.active #svg-imac.screen').delay(2500).queue(function(screenit){
 
 	    $(this).attr('class', 'bg');
 
 	    $(this).attr('class', 'bg');

+ 98 - 0
js/scripts.js
View File 

@@ -1,3 +1,101 @@
 
+// ------------- JQUERY APPEAR ---------------------------------------------- //
 
+// ============ https://github.com/morr/jquery.appear ====================== //
 
+// -------------------------------------------------------------------------- //
 
+
 
+(function($) {
 
+  var selectors = [];
 
+
 
+  var check_binded = false;
 
+  var check_lock = false;
 
+  var defaults = {
 
+    interval: 250,
 
+    force_process: false
 
+  }
 
+  var $window = $(window);
 
+
 
+  var $prior_appeared;
 
+
 
+  function process() {
 
+    check_lock = false;
 
+    for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
 
+      var $appeared = $(selectors[index]).filter(function() {
 
+        return $(this).is(':appeared');
 
+      });
 
+
 
+      $appeared.trigger('appear', [$appeared]);
 
+
 
+      if ($prior_appeared) {
 
+        var $disappeared = $prior_appeared.not($appeared);
 
+        $disappeared.trigger('disappear', [$disappeared]);
 
+      }
 
+      $prior_appeared = $appeared;
 
+    }
 
+  }
 
+
 
+  // "appeared" custom filter
 
+  $.expr[':']['appeared'] = function(element) {
 
+    var $element = $(element);
 
+    if (!$element.is(':visible')) {
 
+      return false;
 
+    }
 
+
 
+    var window_left = $window.scrollLeft();
 
+    var window_top = $window.scrollTop();
 
+    var offset = $element.offset();
 
+    var left = offset.left;
 
+    var top = offset.top;
 
+
 
+    if (top + $element.height() >= window_top &&
 
+        top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
 
+        left + $element.width() >= window_left &&
 
+        left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
 
+      return true;
 
+    } else {
 
+      return false;
 
+    }
 
+  }
 
+
 
+  $.fn.extend({
 
+    // watching for element's appearance in browser viewport
 
+    appear: function(options) {
 
+      var opts = $.extend({}, defaults, options || {});
 
+      var selector = this.selector || this;
 
+      if (!check_binded) {
 
+        var on_check = function() {
 
+          if (check_lock) {
 
+            return;
 
+          }
 
+          check_lock = true;
 
+
 
+          setTimeout(process, opts.interval);
 
+        };
 
+
 
+        $(window).scroll(on_check).resize(on_check);
 
+        check_binded = true;
 
+      }
 
+
 
+      if (opts.force_process) {
 
+        setTimeout(process, opts.interval);
 
+      }
 
+      selectors.push(selector);
 
+      return $(selector);
 
+    }
 
+  });
 
+
 
+  $.extend({
 
+    // force elements's appearance check
 
+    force_appear: function() {
 
+      if (check_binded) {
 
+        process();
 
+        return true;
 
+      };
 
+      return false;
 
+    }
 
+  });
 
+})(jQuery);
 
+
 
+
 
+
 
 // ------------- DRAW FILL SVG ---------------------------------------------- //
 
 // ------------- DRAW FILL SVG ---------------------------------------------- //
 
 // ============ https://github.com/callmenick/Draw-Fill-SVG ================= //
 
 // ============ https://github.com/callmenick/Draw-Fill-SVG ================= //
 
 // -------------------------------------------------------------------------- //
 
 // -------------------------------------------------------------------------- //

+ 130 - 157
style.css
View File 

@@ -153,7 +153,6 @@ h1.super {
 
 	margin: 40px 0 0;
 
 	margin: 40px 0 0;
 
 	font-size: 39px;
 
 	font-size: 39px;
 
 	font-weight: bold;
 
 	font-weight: bold;
 
-	//font-family: Andale Mono, monospace;
 
 	letter-spacing: -2px;
 
 	letter-spacing: -2px;
 
 }
 
 }
 
 .conq {
 
 .conq {
 
@@ -174,10 +173,6 @@ h1.super {
 
   margin-right: auto;
 
   margin-right: auto;
 
   margin-left: auto;
 
   margin-left: auto;
 
 }
 
 }
 
-.container-full {
 
-  margin: 0 auto;
 
-  width: 100%;
 
-}
 
 
 
 @media (max-width: 768px) {
 
 @media (max-width: 768px) {
 
   .offcanvas {
 
   .offcanvas {
 
@@ -420,30 +415,59 @@ h1.super {
 
 										Intro 
 										Intro 
 ==============================================*/
 
 ==============================================*/
 
 
 
-.intro {
 
-	width: 100%;
 
-	height: 100%;
 
-	min-height: 1000px;
 
-	padding: 250px 0 0;
 
-	background: #222; 
-	-webkit-background-size: cover;
 
-	-moz-background-size: cover;
 
-	-o-background-size: cover;
 
-	background-size: cover;
 
-	color: #cecece;
 
+.screen-reader {
 
+	text-indent: -10000px;
 
+	top:auto;
 
+	width:1px;
 
+	height:1px;
 
+	overflow:hidden;
 
 }
 
 }
 
-.welcome {
 
-	padding: 10px;
 
-	max-width: 100%;
 
-	display: block;
 
-	white-space: pre;
 
-	font-size: 27px;
 
+
 
+@keyframes blink {
 
+  0% { opacity: 0; }
 
+  25% { opacity: 1; }
 
+  50% { opacity: 1; }
 
+  100% { opacity: 0; }
 
+}
 
+@-webkit-keyframes blink {
 
+  0% { opacity: 0; }
 
+  25% { opacity: 1; }
 
+  50% { opacity: 1; }
 
+  100% { opacity: 0; }
 
+}
 
+@-ms-keyframes blink {
 
+  0% { opacity: 0; }
 
+  25% { opacity: 1; }
 
+  50% { opacity: 1; }
 
+  100% { opacity: 0; }
 
 }
 
 }
 
-.welcome:after {
 
+@-moz-keyframes blink {
 
+  0% { opacity: 0; }
 
+  25% { opacity: 1; }
 
+  50% { opacity: 1; }
 
+  100% { opacity: 0; }
 
+}
 
+.welcome::after {
 
+  visibility: visible;
 
+  content: '';
 
+  background-color:green;
 
+  opacity: 0;
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 0.5em;
 
+  height: 1em;
 
+  top: 5px;
 
+  margin-left: 0;
 
+  margin-bottom: 2px;
 
+	-webkit-animation: blink 1s 20;
 
+	-moz-animation: blink 1s 20;
 
+	animation: blink 1s 20;
 
+}
 
+.welcome-back-text::after {
 
   visibility: visible;
 
   visibility: visible;
 
   content: '';
 
   content: '';
 
-  background-color: #d4f8e3;
 
-  opacity: .5;
 
+  background-color:green;
 
+  opacity: 0;
 
   display: inline-block;
 
   display: inline-block;
 
   position: relative;
 
   position: relative;
 
   width: 0.5em;
 
   width: 0.5em;
 
@@ -451,9 +475,9 @@ h1.super {
 
   top: 5px;
 
   top: 5px;
 
   margin-left: 0;
 
   margin-left: 0;
 
   margin-bottom: 2px;
 
   margin-bottom: 2px;
 
-	-webkit-animation: blink 1s 30;
 
-	-moz-animation: blink 1s 30;
 
-	animation: blink 1s 30;
 
+	-webkit-animation: blink 1s 3;
 
+	-moz-animation: blink 1s 3;
 
+	animation: blink 1s 3;
 
 }
 
 }
 
 .welcome-back {
 
 .welcome-back {
 
 	min-height: 500px;
 
 	min-height: 500px;
 
@@ -464,31 +488,19 @@ h1.super {
 
 	background-size: cover;
 
 	background-size: cover;
 
   border-radius: 1px;
 
   border-radius: 1px;
 
 }
 
 }
 
+.terminal-welcome .modal-content {
 
+	margin: 0 0 100px;
 
+	border: none;
 
+	box-shadow:none;
 
+	background-color: transparent !important;
 
+}
 
 .terminal .modal-content {
 
 .terminal .modal-content {
 
 	margin: 0 0 100px;
 
 	margin: 0 0 100px;
 
 	border: none;
 
 	border: none;
 
 	box-shadow:none;
 
 	box-shadow:none;
 
 	background-color: transparent !important;
 
 	background-color: transparent !important;
 
 }
 
 }
 
-
 
 [contenteditable] {outline: none;}
 
 [contenteditable] {outline: none;}
 
-
 
-.welcome-back-text::after {
 
-  visibility: visible;
 
-  content: '';
 
-  background-color: #d4f8e3;
 
-  opacity: .5;
 
-  display: inline-block;
 
-  position: relative;
 
-  width: 0.5em;
 
-  height: 1em;
 
-  top: 5px;
 
-  margin-left: 0;
 
-  margin-bottom: 2px;
 
-	-webkit-animation: blink 1s 30;
 
-	-moz-animation: blink 1s 30;
 
-	animation: blink 1s 30;
 
-}
 
 .typed-cursor{
 
 .typed-cursor{
 
 	display: none;
 
 	display: none;
 
 }
 
 }
 
@@ -513,28 +525,8 @@ h1.super {
 
 .thermo span.mee {
 
 .thermo span.mee {
 
 	color: #389436;
 
 	color: #389436;
 
 }
 
 }
 
-@keyframes blink{
 
-    0% { opacity:1; }
 
-    50% { opacity:0; }
 
-    100% { opacity:1; }
 
-}
 
-@-webkit-keyframes blink{
 
-    0% { opacity:1; }
 
-    50% { opacity:0; }
 
-    100% { opacity:1; }
 
-}
 
-@-moz-keyframes blink{
 
-    0% { opacity:1; }
 
-    50% { opacity:0; }
 
-    100% { opacity:1; }
 
-}
 
-.screen-reader {
 
-	text-indent: -10000px;
 
-	top:auto;
 
-	width:1px;
 
-	height:1px;
 
-	overflow:hidden;
 
-}
 
+
 
+
 
 
 
 .big-top {
 
 .big-top {
 
 	height: auto;  
 	height: auto;  
@@ -544,7 +536,7 @@ h1.super {
 
 	box-shadow: 0 0 50px rgba(0,0,0,0.8);
 
 	box-shadow: 0 0 50px rgba(0,0,0,0.8);
 
 	padding: 100px 0;
 
 	padding: 100px 0;
 
 }
 
 }
 
-.top-lead {
 
+.caro-grad {
 
 	background: #5E7A9B;
 
 	background: #5E7A9B;
 
 	background: -webkit-linear-gradient(top, #355069 0, #5e7a9b 100%);
 
 	background: -webkit-linear-gradient(top, #355069 0, #5e7a9b 100%);
 
 	background: -moz-linear-gradient(top, #355069 0, #5e7a9b 100%);
 
 	background: -moz-linear-gradient(top, #355069 0, #5e7a9b 100%);
 
@@ -625,7 +617,6 @@ h1.super {
 
 }
 
 }
 
 
 
 .bg1 {
 
 .bg1 {
 
-	//background: url(img/desk.jpg) no-repeat left center;
 
 	background-size: cover;
 
 	background-size: cover;
 
 	-webkit-background-size: cover;
 
 	-webkit-background-size: cover;
 
 	-moz-background-size: cover;
 
 	-moz-background-size: cover;
 
@@ -648,40 +639,40 @@ h1.super {
 
 	width: auto; 
 	width: auto; 
 	height: auto; 
 	height: auto; 
 	z-index: -100;
 
 	z-index: -100;
 
-	background: url(img/tv.gif) no-repeat;
 
+	/*background: url(img/tv.gif) no-repeat;*/
 
 	background-size: cover;
 
 	background-size: cover;
 
 	-webkit-background-size: cover;
 
 	-webkit-background-size: cover;
 
 	-moz-background-size: cover;
 
 	-moz-background-size: cover;
 
 	-o-background-size: cover;
 
 	-o-background-size: cover;
 
-	filter: saturate(10%);
 
-	-webkit-filter: saturate(10%);
 
+	filter: saturate(0);
 
+	-webkit-filter: saturate(0);
 
 	transform-origin: 50% 50%;
 
 	transform-origin: 50% 50%;
 
 	-webkit-transform-origin: 50% 50%;
 
 	-webkit-transform-origin: 50% 50%;
 
 	border: none;
 
 	border: none;
 
 }
 
 }
 
-#tv.invert {
 
-	-webkit-filter: invert(100%);
 
+@-webkit-keyframes vidblur {
 
+	0% {-webkit-filter: blur(0px) saturate(0) hue-rotate(0deg);}
 
+	100% {-webkit-filter: blur(4px) saturate(2) hue-rotate(100deg);}
 
 }
 
 }
 
-#tv.contrast {
 
-	-webkit-filter: contrast(100%);
 
+@-webkit-keyframes vidunblur {
 
+	0% {-webkit-filter: blur(4px) saturate(2) hue-rotate(100deg);;}
 
+	100% {-webkit-filter: blur(0px) saturate(0) hue-rotate(0deg);}
 
 }
 
 }
 
 #tv.blur {
 
 #tv.blur {
 
-	-webkit-filter: blur(0px);
 
-}
 
-#tv.sat {
 
-	-webkit-filter: saturate(10%);
 
+	-webkit-animation: vidblur 4s;
 
+	animation: vidblur 4s;
 
 }
 
 }
 
-#tv.scale {
 
-	-webkit-filter: scale(1.5);
 
+#tv.unblur {
 
+	-webkit-animation: vidunblur 4s;
 
+	animation: vidunblur 4s;
 
 }
 
 }
 
 
 
+
 
 /*============================================
 
 /*============================================
 
 										Navbar 
 										Navbar 
 ==============================================*/
 
 ==============================================*/
 
 
 
-
 
 .navbar {
 
 .navbar {
 
-	background-color: rgba(237, 237, 237, 0.7);
 
   -webkit-transition: background-color 0.3s;
 
   -webkit-transition: background-color 0.3s;
 
   -moz-transition: background-color 0.3s;
 
   -moz-transition: background-color 0.3s;
 
   transition: background-color 0.3s;
 
   transition: background-color 0.3s;
 
@@ -694,10 +685,9 @@ h1.super {
 
 .navbar.fixed {
 
 .navbar.fixed {
 
   position: fixed;
 
   position: fixed;
 
   top: -81px;
 
   top: -81px;
 
-  background-color: rgba(237, 237, 237, 0.7);
 
-  -webkit-transition: -webkit-transform 0.3s;
 
-  -moz-transition: -moz-transform 0.3s;
 
-  transition: transform 0.3s;
 
+	-webkit-transition: all .3s ease-in-out;
 
+	-moz-transition: all .3s ease-in-out;
 
+	transition: all .3s ease-in-out;
 
 }
 
 }
 
 .navbar.visible {
 
 .navbar.visible {
 
   -webkit-transform: translate3d(0, 100%, 0);
 
   -webkit-transform: translate3d(0, 100%, 0);
 
@@ -705,17 +695,25 @@ h1.super {
 
   -ms-transform: translate3d(0, 100%, 0);
 
   -ms-transform: translate3d(0, 100%, 0);
 
   -o-transform: translate3d(0, 100%, 0);
 
   -o-transform: translate3d(0, 100%, 0);
 
   transform: translate3d(0, 100%, 0);
 
   transform: translate3d(0, 100%, 0);
 
+  background-color: rgba(237, 237, 237, 0.7);
 
 }
 
 }
 
 #nav {
 
 #nav {
 
   width: 100%;
 
   width: 100%;
 
-  background-color: rgba(237, 237, 237, 0.7);
 
 }
 
 }
 
 #nav.affix-top {
 
 #nav.affix-top {
 
-	visibility: collapse;
 
+  width: 100%;
 
+  background-color: rgba(237, 237, 237, 0.0);
 
+
 
+}
 
+#nav.affix-top {
 
+	visibility: visible;
 
 	position: absolute;
 
 	position: absolute;
 
 	top:0;
 
 	top:0;
 
 	left:0;
 
 	left:0;
 
 	height:80px;
 
 	height:80px;
 
+	-webkit-transition: all .3s ease-in-out;
 
+	-moz-transition: all .3s ease-in-out;
 
+	transition: all .3s ease-in-out;
 
 }
 
 }
 
 #nav.affix {
 
 #nav.affix {
 
 	position: fixed;
 
 	position: fixed;
 
@@ -797,7 +795,6 @@ h1.super {
 
   -webkit-transform: rotate(-45deg);
 
   -webkit-transform: rotate(-45deg);
 
   -o-transform: rotate(-45deg);
 
   -o-transform: rotate(-45deg);
 
 }
 
 }
 
-
 
 ul.social {
 
 ul.social {
 
 	padding: 5px 15px;
 
 	padding: 5px 15px;
 
 }
 
 }
 
@@ -859,7 +856,7 @@ img.dw {
 
 	color: #1d8;
 
 	color: #1d8;
 
 }
 
 }
 
 .leader {
 
 .leader {
 
-	padding: 50px 0 0;
 
+	padding: 80px 0 0;
 
 }
 
 }
 
 .dark {
 
 .dark {
 
 	background: #222;
 
 	background: #222;
 
@@ -882,7 +879,6 @@ article#main {
 
 }
 
 }
 
 article#main .entry-content {
 
 article#main .entry-content {
 
 	padding: 15px;
 
 	padding: 15px;
 
-
 
 }
 
 }
 
 article h2 {
 
 article h2 {
 
 	font-size: 28px;
 
 	font-size: 28px;
 
@@ -904,7 +900,37 @@ article p {
 
 }
 
 }
 
 
 
 
 
+/*===== Footer =====*/
 
+p.cc {
 
+	float: right;
 
+	font-size: 14px;
 
+	margin: 2px 20px 30px 10px;
 
+}
 
+span.quiet {
 
+	display: none;
 
+}
 
+span.right {
 
+	float: right;
 
+}
 
+.footer {
 
+	padding: 50px 0 30px;
 
+}
 
 
 
+.form-row {
 
+  margin: 10px 0;
 
+}
 
+.form-row.checkbox {
 
+  font-size: 0.85em;
 
+}
 
+.form-row.texts:first-of-type {
 
+  margin-top: 30px;
 
+}
 
+.form-row.texts + .form-row:not(.texts) {
 
+  margin-top: 30px;
 
+}
 
+.checkbox-field input {
 
+  margin-right: 10px;
 
+}
 
 
 
 
 
 
 
@@ -1549,6 +1575,16 @@ img.avatar {
 
 	-moz-border-radius: 30px;
 
 	-moz-border-radius: 30px;
 
 	border-radius: 30px;
 
 	border-radius: 30px;
 
 }
 
 }
 
+img.me {
 
+	height: 80px;
 
+	margin: 0 10px;
 
+	float: left;
 
+	-webkit-border-radius: 50%;
 
+	-moz-border-radius: 50%;
 
+	border-radius: 50%;
 
+	-webkit-filter: grayscale(1);
 
+	filter:grayscale(1);
 
+}
 
 .entry-content img {
 
 .entry-content img {
 
 	max-width: 100%;
 
 	max-width: 100%;
 
 	height: auto;
 
 	height: auto;
 
@@ -1742,39 +1778,7 @@ img.avatar {
 
 										Footer 
 										Footer 
 ==============================================*/
 
 ==============================================*/
 
 
 
-p.cc {
 
-	float: right;
 
-	font-size: 14px;
 
-	margin: 2px 20px 30px 10px;
 
-}
 
-span.quiet {
 
-	display: none;
 
-}
 
-span.right {
 
-	float: right;
 
-}
 
-.footer {
 
-	background: //url(img/space.jpg);
 
-	padding: 50px 0 30px;
 
-}
 
-
 
 
 
-.form-row {
 
-  margin: 10px 0;
 
-}
 
-.form-row.checkbox {
 
-  font-size: 0.85em;
 
-}
 
-.form-row.texts:first-of-type {
 
-  margin-top: 30px;
 
-}
 
-.form-row.texts + .form-row:not(.texts) {
 
-  margin-top: 30px;
 
-}
 
-
 
-.checkbox-field input {
 
-  margin-right: 10px;
 
-}
 
 
 
 
 
 
 
@@ -1868,37 +1872,6 @@ span.right {
 
   }
 
   }
 
 }
 
 }
 
 
 
-
 
-.signup-footer {
 
-  background: #101a12;
 
-  color: rgba(250, 250, 250, 0.7);
 
-}
 
-.signup-footer h2 {
 
-  font-weight: bold;
 
-  margin: 0;
 
-  font-size: 1.5em;
 
-  color: white;
 
-}
 
-@media (min-width: 768px) {
 
-  .signup-footer .in {
 
-    padding-top: 140px;
 
-    padding-bottom: 140px;
 
-  }
 
-}
 
-.signup-footer p {
 
-  margin: 0;
 
-  line-height: 1.4;
 
-}
 
-.signup-footer h2 + p {
 
-  margin-top: -0.25em;
 
-}
 
-.signup-footer .submit {
 
-  height: 40px;
 
-  line-height: 36px;
 
-}
 
-.signup-footer .actions {
 
-  margin-top: 30px;
 
-}
 
 form .actions button{
 
 form .actions button{
 
 	margin: 20px 0;
 
 	margin: 20px 0;
 
 }
 
 }