diff --git a/contents/css/5grid/init.js b/contents/css/5grid/init.js index aa2bd22..7ba75d2 100644 --- a/contents/css/5grid/init.js +++ b/contents/css/5grid/init.js @@ -751,4 +751,18 @@ _5grid.readyCheck(); }); -})(); \ No newline at end of file +})(); + +$(document).ready(function() { + + $('#nav').onePageNav({ + begin: function() { + console.log('start'); + }, + end: function() { + console.log('stop'); + }, + scrollOffset: 30 + }); + +}); \ No newline at end of file diff --git a/contents/css/5grid/jquery.nav.js b/contents/css/5grid/jquery.nav.js new file mode 100644 index 0000000..435bd9b --- /dev/null +++ b/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 ); \ No newline at end of file diff --git a/contents/css/5grid/jquery.scrollTo.js b/contents/css/5grid/jquery.scrollTo.js new file mode 100644 index 0000000..5e78778 --- /dev/null +++ b/contents/css/5grid/jquery.scrollTo.js @@ -0,0 +1,11 @@ +/** + * jQuery.ScrollTo - Easy element scrolling using jQuery. + * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com + * Dual licensed under MIT and GPL. + * Date: 5/25/2009 + * @author Ariel Flesler + * @version 1.4.2 + * + * http://flesler.blogspot.com/2007/10/jqueryscrollto.html + */ +;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery); \ No newline at end of file diff --git a/contents/css/style-desktop.css b/contents/css/style-desktop.css index 7446a1d..5b4b7f9 100644 --- a/contents/css/style-desktop.css +++ b/contents/css/style-desktop.css @@ -215,3 +215,7 @@ section:last-child { color: #8d9ca3; } + + .sharethis { + float: right; + } \ No newline at end of file diff --git a/contents/css/style-mobile.css b/contents/css/style-mobile.css index ad6f52c..8341ca0 100644 --- a/contents/css/style-mobile.css +++ b/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; } \ No newline at end of file diff --git a/contents/images/Jonathan-Tarud.jpg b/contents/images/Jonathan-Tarud.jpg new file mode 100644 index 0000000..da6cd58 Binary files /dev/null and b/contents/images/Jonathan-Tarud.jpg differ diff --git a/contents/images/Rafael-Garcia.jpg b/contents/images/Rafael-Garcia.jpg new file mode 100644 index 0000000..7f444aa Binary files /dev/null and b/contents/images/Rafael-Garcia.jpg differ diff --git a/contents/images/Yuji-Kiriki.jpg b/contents/images/Yuji-Kiriki.jpg new file mode 100644 index 0000000..f460f1f Binary files /dev/null and b/contents/images/Yuji-Kiriki.jpg differ diff --git a/contents/images/banner.jpg b/contents/images/banner.jpg deleted file mode 100644 index ca6c7c7..0000000 Binary files a/contents/images/banner.jpg and /dev/null differ diff --git a/contents/images/pic06.jpg b/contents/images/pic06.jpg deleted file mode 100644 index b0963a7..0000000 Binary files a/contents/images/pic06.jpg and /dev/null differ diff --git a/contents/images/pic07.jpg b/contents/images/pic07.jpg deleted file mode 100644 index 9de3e4a..0000000 Binary files a/contents/images/pic07.jpg and /dev/null differ diff --git a/contents/images/pic08.jpg b/contents/images/pic08.jpg deleted file mode 100644 index 2515fea..0000000 Binary files a/contents/images/pic08.jpg and /dev/null differ diff --git a/contents/images/talent.jpg b/contents/images/talent.jpg new file mode 100644 index 0000000..42e7e01 Binary files /dev/null and b/contents/images/talent.jpg differ diff --git a/templates/features.jade b/templates/features.jade new file mode 100644 index 0000000..8041178 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/templates/footer.jade b/templates/footer.jade new file mode 100644 index 0000000..98c0a37 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/templates/index.jade b/templates/index.jade index cb86e56..036c7ed 100644 --- a/templates/index.jade +++ b/templates/index.jade @@ -1,24 +1,80 @@ extends layout block content - include author - //- underscore helps us filter and sort our articles - - var articles = _.chain(contents.articles._.directories).map(function(item) { - - // map articles to index pages of subdirectories of 'articles' - - return item.index - - }).compact().sortBy(function(item) { // compact removes any directories w/o an index - - // sort them by date - - return -item.date - - }).first(5).value() // and finally take the first 5 - each article in articles - article.post - header - h2 - a(href=article.url)= article.title - p - mixin author(article.metadata.author) - section.content!= article.intro - if article.hasMore - p.read-more - a(href=article.url) read more - a(href='archive.html')#archive Visit the archives! + + include features + + // Content + div#content-wrapper + div#content + div.5grid-layout + div.row + div.3u + section + div.quote-list + img(src='/images/Jonathan-Tarud.jpg', alt='Jonathan Tarud') + :markdown + # [Jonathan Tarud](http://twitter.com/dangertz) + CEO, Region Américas, Lenddo + There should also be a way to have a longer description + + div.3u + section + div.quote-list + img(src='/images/Yuji-Kiriki.jpg', alt='Yuji Kiriki') + :markdown + # [Yuji Kiriki](http://twitter.com/dangertz) + CEO, Region Américas, Lenddo + There should also be a way to have a longer description + + div.3u + section + div.quote-list + img(src='/images/Rafael-Garcia.jpg', alt='Rafael Garcia') + :markdown + # [Rafael Garcia](http://twitter.com/dangertz) + CEO, Region Américas, Lenddo + There should also be a way to have a longer description + + div.3u + section + div.quote-list + img(src='/images/Missing_Panelist.jpg', alt='Jonathan Tarud') + :markdown + # [Missing](http://twitter.com/dangertz) (Moredador) + Missing Description + + div.row + div.4u + section + header + h2 Organizadores + h3 Logistica + a.feature-image(href='#') + img(src='/images/pic05.jpg', alt='') + :markdown + [Dan Gertsacov](http://twitter.com/dangertz), CEO, Region Américas, Lenddo - + There should also be a way to have a longer description + + div.4u + section + header + h2 Who are We + h3 Some awesome group + ul.check-list + li first + li second + li third + li fourth + + div.4u + section + header + h2 Moderador + a.feature-image(href='#') + img(src='/images/pic05.jpg', alt='') + :markdown + [Dan Gertsacov](http://twitter.com/dangertz), CEO, Region Américas, Lenddo + + + include footer \ No newline at end of file diff --git a/templates/layout.jade b/templates/layout.jade index bc06566..e05725a 100644 --- a/templates/layout.jade +++ b/templates/layout.jade @@ -15,8 +15,6 @@ html(lang='en') link(rel='stylesheet', href='/css/5grid/core-noscript.css') link(rel='stylesheet', href='/css/style.css') link(rel='stylesheet', href='/css/style-desktop.css') - script(src='css/5grid/jquery.js') - script(src='css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarHeight=55&mobileUI.openerWidth=75&mobileUI.openerText=<') link(rel='alternate', href=locals.url+'/feed.xml', type='application/rss+xml', title=locals.description) body @@ -26,159 +24,40 @@ html(lang='en') div.row div.12u h1 - a.mobileUI-site-name(href='#') Talento Digital - nav.mobileUI-site-nav - a(href='#') Home - a(href='#') Blog - a(href='#') About us + a.mobileUI-site-name(href='#') Primer Foro de Talento Digital + nav#nav.mobileUI-site-nav + a(href='#features-wrapper') Acerca de + a(href='#') Inscripción + a(href='#') Apoyado por + div.sharethis + span.st_email_hcount(displayText='Email') + span.st_facebook_hcount(displayText='Facebook') + span.st_twitter_hcount(displayText='Tweet') + span.st_linkedin_hcount(displayText='LinkedIn') div#banner div.5grid-layout div.row div.6u - p We do something really useful, important, and unique. Learn all about it here .. - a.button-big(href='#') Go on, click me! + :markdown + En la era de la información y la tecnología son nuevas las habilidades + que se requieren, esta el país preparado para una nueva la nueva era digital? + + a.button-big(href='#') Inscribete! div.6u a.bordered-feature-image(href='#') - img(src='images/banner.jpg', alt='') - - // 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 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) - - div.3u - section - a.bordered-feature-image(href='#') - img(src='images/pic02.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) - - div.3u - section - a.bordered-feature-image(href='#') - img(src='images/pic03.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) - - 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) + img(src='images/talent.jpg', alt='') - // Content - div#content-wrapper - div#content - div.5grid-layout - div.row - div.4u - section - header - h2 Who are We - h3 Some awesome group - a.feature-image(href='#') - img(src='/images/pic05.jpg', alt='') - :markdown - This is some parragraf, lorem ipsum - - div.4u - section - header - h2 Who are We - h3 Some awesome group - ul.check-list - li first - li second - li third - li fourth - - div.4u - section - header - h2 Who are We - h3 Some awesome group - ul.quote-list - li - img(src='/images/pic06.jpg', alt='') - p "His name!!" - span and some infor - li - img(src='/images/pic07.jpg', alt='') - p "His name!!" - span and some infor - li - img(src='/images/pic08.jpg', alt='') - p "His name!!" - span and some infor - - // 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. + block content + script(src='css/5grid/jquery.js') + script(src='css/5grid/jquery.scrollTo.js') + script(src='css/5grid/jquery.nav.js') + script(src='css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarHeight=55&mobileUI.openerWidth=75&mobileUI.openerText=<') + script(type='text/javascript') + var switchTo5x=true; + script(src='http://w.sharethis.com/button/buttons.js') + script(type='text/javascript') + stLight.options({publisher: "cb9b1ed5-92b7-4d0d-87ac-07112bc77a27"}); // Copyright div#copyright © Untitled. All rights reserved. | Design: