Header 1/2content and 3/4 panelists 30% of the site

contents/css/5grid/init.js

@@ -751,4 +751,18 @@
 			_5grid.readyCheck();
 	});
 
-})();
+})();
+
+$(document).ready(function() {
+
+  $('#nav').onePageNav({
+    begin: function() {
+      console.log('start');
+    },
+    end: function() {
+      console.log('stop');
+    },
+    scrollOffset: 30
+  });
+
+});

contents/css/5grid/jquery.nav.js

@@ -0,0 +1,210 @@
+/*
+ * jQuery One Page Nav Plugin
+ * http://github.com/davist11/jQuery-One-Page-Nav
+ *
+ * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
+ * Dual licensed under the MIT and GPL licenses.
+ * Uses the same license as jQuery, see:
+ * http://jquery.org/license
+ *
+ * @version 2.0
+ *
+ * Example usage:
+ * $('#nav').onePageNav({
+ *   currentClass: 'current',
+ *   changeHash: false,
+ *   scrollSpeed: 750
+ * });
+ */
+
+;(function($, window, document, undefined){
+
+	// our plugin constructor
+	var OnePageNav = function(elem, options){
+		this.elem = elem;
+		this.$elem = $(elem);
+		this.options = options;
+		this.metadata = this.$elem.data('plugin-options');
+		this.$nav = this.$elem.find('a');
+		this.$win = $(window);
+		this.sections = {};
+		this.didScroll = false;
+		this.$doc = $(document);
+		this.docHeight = this.$doc.height();
+	};
+
+	// the plugin prototype
+	OnePageNav.prototype = {
+		defaults: {
+			currentClass: 'current',
+			changeHash: false,
+			easing: 'swing',
+			filter: '',
+			scrollSpeed: 750,
+			scrollOffset: 0,
+			scrollThreshold: 0.5,
+			begin: false,
+			end: false
+		},
+
+		init: function() {
+			var self = this;
+
+			// Introduce defaults that can be extended either
+			// globally or using an object literal.
+			self.config = $.extend({}, self.defaults, self.options, self.metadata);
+
+			//Filter any links out of the nav
+			if(self.config.filter !== '') {
+				self.$nav = self.$nav.filter(self.config.filter);
+			}
+
+			//Handle clicks on the nav
+			self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
+
+			//Get the section positions
+			self.getPositions();
+
+			//Handle scroll changes
+			self.bindInterval();
+
+			//Update the positions on resize too
+			self.$win.on('resize.onePageNav', $.proxy(self.getPositions, self));
+
+			return this;
+		},
+
+		adjustNav: function(self, $parent) {
+			self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
+			$parent.addClass(self.config.currentClass);
+		},
+
+		bindInterval: function() {
+			var self = this;
+			var docHeight;
+
+			self.$win.on('scroll.onePageNav', function() {
+				self.didScroll = true;
+			});
+
+			self.t = setInterval(function() {
+				docHeight = self.$doc.height();
+
+				//If it was scrolled
+				if(self.didScroll) {
+					self.didScroll = false;
+					self.scrollChange();
+				}
+
+				//If the document height changes
+				if(docHeight !== self.docHeight) {
+					self.docHeight = docHeight;
+					self.getPositions();
+				}
+			}, 250);
+		},
+
+		getHash: function($link) {
+			return $link.attr('href').split('#')[1];
+		},
+
+		getPositions: function() {
+			var self = this;
+			var linkHref;
+			var topPos;
+
+			self.$nav.each(function() {
+				linkHref = self.getHash($(this));
+				topPos = $('#' + linkHref).offset().top;
+
+				self.sections[linkHref] = Math.round(topPos) - self.config.scrollOffset;
+			});
+		},
+
+		getSection: function(windowPos) {
+			var returnValue = null;
+			var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
+
+			for(var section in this.sections) {
+				if((this.sections[section] - windowHeight) < windowPos) {
+					returnValue = section;
+				}
+			}
+
+			return returnValue;
+		},
+
+		handleClick: function(e) {
+			var self = this;
+			var $link = $(e.currentTarget);
+			var $parent = $link.parent();
+			var newLoc = '#' + self.getHash($link);
+
+			if(!$parent.hasClass(self.config.currentClass)) {
+				//Start callback
+				if(self.config.begin) {
+					self.config.begin();
+				}
+
+				//Change the highlighted nav item
+				self.adjustNav(self, $parent);
+
+				//Removing the auto-adjust on scroll
+				self.unbindInterval();
+
+				//Scroll to the correct position
+				$.scrollTo(newLoc, self.config.scrollSpeed, {
+					axis: 'y',
+					easing: self.config.easing,
+					offset: {
+						top: -self.config.scrollOffset
+					},
+					onAfter: function() {
+						//Do we need to change the hash?
+						if(self.config.changeHash) {
+							window.location.hash = newLoc;
+						}
+
+						//Add the auto-adjust on scroll back in
+						self.bindInterval();
+
+						//End callback
+						if(self.config.end) {
+							self.config.end();
+						}
+					}
+				});
+			}
+
+			e.preventDefault();
+		},
+
+		scrollChange: function() {
+			var windowTop = this.$win.scrollTop();
+			var position = this.getSection(windowTop);
+			var $parent;
+
+			//If the position is set
+			if(position !== null) {
+				$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
+
+				//Change the highlighted nav item
+				this.adjustNav(this, $parent);
+			}
+		},
+
+		unbindInterval: function() {
+			clearInterval(this.t);
+			this.$win.unbind('scroll.onePageNav');
+		}
+	};
+
+	OnePageNav.defaults = OnePageNav.prototype.defaults;
+
+	$.fn.onePageNav = function(options) {
+		return this.each(function() {
+			new OnePageNav(this, options).init();
+		});
+	};
+
+})( jQuery, window , document );

contents/css/style-desktop.css

@@ -215,3 +215,7 @@ section:last-child
 		{
 			color: #8d9ca3;
 		}
+
+	.sharethis {
+		float: right;
+	}

contents/css/style-mobile.css

@@ -298,4 +298,8 @@ body, input, textarea, select
 
 	.mobileUI-site-nav-link:last-child {
 		border-bottom: 0;
+	}
+
+	.sharethis {
+		float: right;
 	}

templates/features.jade

@@ -0,0 +1,50 @@
+// Features
+div#features-wrapper
+  div#features
+    div.5grid-layout
+      div.row
+        div.3u
+          section
+            a.bordered-feature-image(href='#')
+              img(src='images/pic01.jpg', alt='')
+            h2 Colombia y el emprendimiento digital
+            :markdown
+              El Ministerio de Tecnologías de la Información y las Comunicaciones 
+              (Mintic) impulsa una cultura de emprendimiento virtual, a través de 
+              su programa Vive Digital. El desarrollo de software y aplicaciones 
+              para teléfonos inteligentes, juegos de video, publicidad y animaciones 
+              digitales, hacen parte de los focos de interés de este organismo.
+              [Fuente: El espectador](http://bit.ly/R2sJSv)
+
+        div.3u
+          section
+            a.bordered-feature-image(href='#')
+              img(src='images/pic02.jpg', alt='')
+            h2 Desarrolladores de software
+            :markdown
+              This is a **Halcyonic** a free template that can
+              include [links](http://www.google.com)
+              so this kick _ass_ [badly](http://david.roncancio.me)
+
+        div.3u
+          section
+            a.bordered-feature-image(href='#')
+              img(src='images/pic03.jpg', alt='')
+            h2 Continua Demanda
+            :markdown
+              Los desarrolladores recien graduados en ciudades como Boston, NY o San Francisco
+              tienen salarios que empiezan desde los $75,000 dolares al año, y aquellos con mas experiencia
+              estan ganando alrededor de $140,000 dolares en el mismo periodo, y los salarios en esta industria
+              siguen aumentando en ese pais, casi en un 15 porciento en el año pasado
+              [Fuente: Boston Globe](http://b.globe.com/12wmyIR)
+
+
+        div.3u
+          section
+            a.bordered-feature-image(href='#')
+              img(src='images/pic04.jpg', alt='')
+            h2 Welcome to Halcyonic
+            :markdown
+              This is a **Halcyonic** a free template that can
+              include [links](http://www.google.com)
+              so this kick _ass_ [badly](http://david.roncancio.me)

templates/footer.jade

@@ -0,0 +1,47 @@
+// Footer
+div#footer-wrapper
+  footer#footer.5grid-layout
+    div.row
+      div.8u
+        section
+          h2 Links to important stuff
+          div.5grid
+            div.row
+              div.3u
+                ul.link-list.last-child
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+              div.3u
+                ul.link-list.last-child
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+              div.3u
+                ul.link-list.last-child
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+                  li
+                    a(href='#') some url
+      div.4u
+        section
+          h2 an informative text
+          :markdown
+            Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
+            varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
+            dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
+            lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.