windhamdavid 5 years ago
parent
commit
ff71cf18ad
5 changed files with 338 additions and 284 deletions
  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

@@ -15,18 +15,17 @@
 </head>
 <body>
 <?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 class="welcome"></div>
+				<div class="thermo"></div>
 			</div>
 		</div>
 	</div>
@@ -36,7 +35,7 @@
 		<div class="modal-content">
 			<div class="welcome-back">
 				<div class="welcome-back-text"></div>
-				<div class="thermo"></div>	
+				<div class="thermo"></div>
 			</div>
 		</div>
 	</div>
@@ -45,6 +44,8 @@
 	<div id="nav">
 		<div class="navbar navbar-fixed-top">
 			<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">
 					<a href="#" class="navbar-brand navbar-right"  data-toggle="offcanvas" data-target=".navmenu" title="David A. Windham" rel="home">David A. Windham</a>			
 				</div>

+ 29 - 68
index.php

@@ -1,79 +1,40 @@
 <?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.webm" type="video/webm">
 	</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="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>
 						<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 class="item">
+			    <div class="item constellation" data-id="2">
 					<div class="container">
 						<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 class="container-fluid posts">
+	<div class="container-fluid posts-front">
 		<div class="container">
 			<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">
 						<?php query_posts('showposts=1'); ?>
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
@@ -89,7 +50,7 @@
 						<?php endwhile; ?>
 					</article>
 				</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">
 						<?php query_posts('showposts=1&offset=1'); ?>
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
@@ -105,7 +66,7 @@
 						<?php endwhile; ?>
 					</article>
 				</div>
-				<div class="col-sm-4 wow fadeInRight">
+				<div class="col-sm-4 wow fadeInRight" data-wow-offset="600">
 					<article id="main" class="home">
 						<?php query_posts('showposts=1&offset=2'); ?>
 						<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
@@ -124,29 +85,29 @@
 			</div>
 		</div>
 	</div>
-	<div class="container-full dark">
+	<div class="container-fluid dark">
 		<div class="container">
 			<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>
-				</div>
-				<div class="col-xs-4">
-					
 				</div>
-				<div class="col-xs-2">
+				<div class="col-xs-6">
 					
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="container-full top-lead">
+	<div class="container-fluid caro-grad">
 		<div id="caro" class="carousel slide">
 			<ol class="carousel-indicators">
 			    <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="2"></li>
+				<li data-target="#caro" data-slide-to="3"></li>
 			  </ol>
 			<div class="carousel-inner">
 				<div class="item active">

+ 68 - 47
js/init.js

@@ -3,7 +3,7 @@ new WOW().init();
 jQuery(document).ready(function($) {
 	
 $(window).bind('load', function() {
-	$('#loader').fadeOut(70);
+	$('#loader').fadeOut(700);
 });
 
 
@@ -15,62 +15,54 @@ $(function dw_set_cookie() {
 	var COOKIE = 'windhamdavid-cookie';
 	var dwcookie = $.cookie(COOKIE);
 	if (dwcookie == null) {
-		$.cookie(COOKIE, 'yum-cookies', { expires: 7, path: '/'});	
+		$.cookie(COOKIE, 'yum-cookies', { expires: 7, path: '/'});
+		$('.terminal-welcome').modal('show');	
 		$('.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,
 			backDelay: 0,
 			loop: false,
 			loopCount: false,
 			attr: null,
 			callback: function(){
-			 	dw_shift();
+				dw_shift();
 			 }
-		});	
+		});
+		$('.first-slide').css('visibility','hidden');	
 	}
 	else {
-		$('.intro').collapse('hide');
 		$('.terminal').modal('show');
 		$('.welcome-back-text').typed({
-			strings: ['Hello...', 'Welcome back'],
-			typeSpeed: 10,
-			backSpeed: 70,
+			strings: ['...', 'Welcome back'],
+			typeSpeed: 30,
+			backSpeed: 50,
 			startDelay: 0,
 			backDelay: 0,
 			loop: false,
 			loopCount: false,
 			attr: null,
 			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() {
-	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
@@ -104,7 +96,7 @@ function dw_collapse() {
 
 function dw_terminal(){
 	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');
 		$('p.input').addClass('old');
 		var progress = 0;
@@ -153,7 +145,7 @@ $('.nav-toggle').on('touchstart click', function(e) {
 });
 
 $('#nav').affix({
-	offset: {top: $('.intro').height()-$('.navbar').height()}
+	//offset: {top: $('.intro').height()-$('.navbar').height()}
 });	
 
 $(function dw_hidenav() {
@@ -182,23 +174,53 @@ $(function dw_hidenav() {
 		      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);
-	//$('#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() {
 	$('.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) {
     if(e.which === 39){
@@ -211,13 +233,11 @@ $(document).bind('keyup', function(e) {
     }
 });
 
+
+
 /*============================================
 		      SVG Animate
 ==============================================*/
-(function() {
-	var myAnimation = new DrawFillSVG({elementId: 'sv'});
-})();
-
 
 $('#caro').on('slid.bs.carousel', function() {
 	$('.active .animac').removeClass('hide-svg fade-svg');
@@ -236,6 +256,7 @@ $('#caro').on('slide.bs.carousel', function() {
 	    hideit();
 	});
 });
+
 $('#caro').on('slid.bs.carousel', function() {
 	$('.active #svg-imac.screen').delay(2500).queue(function(screenit){
 	    $(this).attr('class', 'bg');

+ 98 - 0
js/scripts.js

@@ -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 ---------------------------------------------- //
 // ============ https://github.com/callmenick/Draw-Fill-SVG ================= //
 // -------------------------------------------------------------------------- //

+ 130 - 157
style.css

@@ -153,7 +153,6 @@ h1.super {
 	margin: 40px 0 0;
 	font-size: 39px;
 	font-weight: bold;
-	//font-family: Andale Mono, monospace;
 	letter-spacing: -2px;
 }
 .conq {
@@ -174,10 +173,6 @@ h1.super {
   margin-right: auto;
   margin-left: auto;
 }
-.container-full {
-  margin: 0 auto;
-  width: 100%;
-}
 
 @media (max-width: 768px) {
   .offcanvas {
@@ -420,30 +415,59 @@ h1.super {
 										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;
   content: '';
-  background-color: #d4f8e3;
-  opacity: .5;
+  background-color:green;
+  opacity: 0;
   display: inline-block;
   position: relative;
   width: 0.5em;
@@ -451,9 +475,9 @@ h1.super {
   top: 5px;
   margin-left: 0;
   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 {
 	min-height: 500px;
@@ -464,31 +488,19 @@ h1.super {
 	background-size: cover;
   border-radius: 1px;
 }
+.terminal-welcome .modal-content {
+	margin: 0 0 100px;
+	border: none;
+	box-shadow:none;
+	background-color: transparent !important;
+}
 .terminal .modal-content {
 	margin: 0 0 100px;
 	border: none;
 	box-shadow:none;
 	background-color: transparent !important;
 }
-
 [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{
 	display: none;
 }
@@ -513,28 +525,8 @@ h1.super {
 .thermo span.mee {
 	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 {
 	height: auto;  
@@ -544,7 +536,7 @@ h1.super {
 	box-shadow: 0 0 50px rgba(0,0,0,0.8);
 	padding: 100px 0;
 }
-.top-lead {
+.caro-grad {
 	background: #5E7A9B;
 	background: -webkit-linear-gradient(top, #355069 0, #5e7a9b 100%);
 	background: -moz-linear-gradient(top, #355069 0, #5e7a9b 100%);
@@ -625,7 +617,6 @@ h1.super {
 }
 
 .bg1 {
-	//background: url(img/desk.jpg) no-repeat left center;
 	background-size: cover;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
@@ -648,40 +639,40 @@ h1.super {
 	width: auto; 
 	height: auto; 
 	z-index: -100;
-	background: url(img/tv.gif) no-repeat;
+	/*background: url(img/tv.gif) no-repeat;*/
 	background-size: cover;
 	-webkit-background-size: cover;
 	-moz-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%;
 	-webkit-transform-origin: 50% 50%;
 	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 {
-	-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 {
-	background-color: rgba(237, 237, 237, 0.7);
   -webkit-transition: background-color 0.3s;
   -moz-transition: background-color 0.3s;
   transition: background-color 0.3s;
@@ -694,10 +685,9 @@ h1.super {
 .navbar.fixed {
   position: fixed;
   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 {
   -webkit-transform: translate3d(0, 100%, 0);
@@ -705,17 +695,25 @@ h1.super {
   -ms-transform: translate3d(0, 100%, 0);
   -o-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
+  background-color: rgba(237, 237, 237, 0.7);
 }
 #nav {
   width: 100%;
-  background-color: rgba(237, 237, 237, 0.7);
 }
 #nav.affix-top {
-	visibility: collapse;
+  width: 100%;
+  background-color: rgba(237, 237, 237, 0.0);
+
+}
+#nav.affix-top {
+	visibility: visible;
 	position: absolute;
 	top:0;
 	left:0;
 	height:80px;
+	-webkit-transition: all .3s ease-in-out;
+	-moz-transition: all .3s ease-in-out;
+	transition: all .3s ease-in-out;
 }
 #nav.affix {
 	position: fixed;
@@ -797,7 +795,6 @@ h1.super {
   -webkit-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
 }
-
 ul.social {
 	padding: 5px 15px;
 }
@@ -859,7 +856,7 @@ img.dw {
 	color: #1d8;
 }
 .leader {
-	padding: 50px 0 0;
+	padding: 80px 0 0;
 }
 .dark {
 	background: #222;
@@ -882,7 +879,6 @@ article#main {
 }
 article#main .entry-content {
 	padding: 15px;
-
 }
 article h2 {
 	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;
 	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 {
 	max-width: 100%;
 	height: auto;
@@ -1742,39 +1778,7 @@ img.avatar {
 										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{
 	margin: 20px 0;
 }