altos-insights 0.2.2

data/assets/img/favicon/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

data/assets/img/favicon/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

data/assets/js/instafeed.min.js

@@ -0,0 +1,2 @@
+// Generated by CoffeeScript 1.9.3
+(function(){var e;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_,D;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?M=["","random"]:M=this.options.sortBy.split("-"),O=M[0]==="least"?!0:!1;switch(M[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",O);break;case"liked":e.data=this._sortBy(e.data,"likes.count",O);break;case"commented":e.data=this._sortBy(e.data,"comments.count",O);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){m=e.data,A=parseInt(this.options.limit,10),this.options.limit!=null&&m.length>A&&(m=m.slice(0,A)),u=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(m=this._filter(m,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){f="",d="",w="",D=document.createElement("div");for(c=0,N=m.length;c<N;c++){h=m[c],p=h.images[this.options.resolution];if(typeof p!="object")throw o="No image found for resolution: "+this.options.resolution+".",new Error(o);E=p.width,y=p.height,b="square",E>y&&(b="landscape"),E<y&&(b="portrait"),v=p.url,l=window.location.protocol.indexOf("http")>=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),d=this._makeTemplate(this.options.template,{model:h,id:h.id,link:h.link,type:h.type,image:v,width:E,height:y,orientation:b,caption:this._getObjectProperty(h,"caption.text"),likes:h.likes.count,comments:h.comments.count,location:this._getObjectProperty(h,"location.name")}),f+=d}D.innerHTML=f,i=[],r=0,n=D.childNodes.length;while(r<n)i.push(D.childNodes[r]),r+=1;for(x=0,C=i.length;x<C;x++)L=i[x],u.appendChild(L)}else for(T=0,k=m.length;T<k;T++){h=m[T],g=document.createElement("img"),p=h.images[this.options.resolution];if(typeof p!="object")throw o="No image found for resolution: "+this.options.resolution+".",new Error(o);v=p.url,l=window.location.protocol.indexOf("http")>=0,l&&!this.options.useHttp&&(v=v.replace(/https?:\/\//,"//")),g.src=v,this.options.links===!0?(t=document.createElement("a"),t.href=h.link,t.appendChild(g),u.appendChild(t)):u.appendChild(g)}_=this.options.target,typeof _=="string"&&(_=document.getElementById(_));if(_==null)throw o='No element with id="'+this.options.target+'" on page.',new Error(o);_.appendChild(u),a=document.getElementsByTagName("head")[0],a.removeChild(document.getElementById("instafeed-fetcher")),S="instafeedCache"+this.unique,window[S]=void 0;try{delete window[S]}catch(P){s=P}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(!this.options.tagName)throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(!this.options.locationId)throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(!this.options.userId)throw new Error("No user specified. Use the 'userId' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))s=n.match(r)[1],o=(i=this._getObjectProperty(t,s))!=null?i:"",n=n.replace(r,function(){return""+o});return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],r=function(e){if(t(e))return n.push(e)};for(i=0,o=e.length;i<o;i++)s=e[i],r(s);return n},e}(),function(e,t){return typeof define=="function"&&define.amd?define([],t):typeof module=="object"&&module.exports?module.exports=t():e.Instafeed=t()}(this,function(){return e})}).call(this);

data/assets/js/main.js

@@ -0,0 +1,39 @@
+jQuery(document).ready(function($) {
+  var feed = new Instafeed({
+    get: 'user',
+    userId: '364180803',
+    accessToken: '364180803.ca3e263.4ed78f3f4bbf4772946cfbc780872817',
+    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="img-insta"/></a>',
+    sortBy: 'most-recent',
+    limit: '4',
+  });
+  feed.run();
+  
+  var $topo = $('.main');
+  var $menu = $('.menu');
+  var $filterSpacer = $('<div />', {
+          "class": "filter-drop-spacer",
+          "height": $menu.outerHeight()
+  });
+
+  $(window).scroll(function ()
+  {
+          if (!$menu.hasClass('video-scroll') && $(window).scrollTop() > $topo.offset().top)
+          {
+                  $menu.before($filterSpacer);
+                  $menu.addClass('fix');
+          }
+          else if ($menu.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
+          {
+                  $menu.removeClass('fix');
+                  $filterSpacer.remove();
+          }
+
+  });
+
+  $(".menu-mobile").on('click', function () {
+    $(this).toggleClass('act');
+      $(".menu-itens").toggleClass('menu-itens-active');
+      $(".menu-mobile").toggleClass('menu-mobile-active');
+  })
+});

data/assets/main.scss

@@ -0,0 +1,5 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import "minima";

data/assets/scss/_colors.scss

@@ -0,0 +1,3 @@
+$secundaria : #607480;
+$branco : #f4f4f4;
+$primaria : #3e4041;

data/assets/scss/_fonts.scss

@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro|Shadows+Into+Light+Two');
+@font-face {
+  font-family: 'altosinsights';
+  font-style: normal;
+  src: url('http://localhost:8000/assets/font/altosinsights.eot');
+  src: local('http://localhost:8000/assets/font/altosinsights'), url('http://localhost:8000/assets/font/altosinsights.eot') format('embedded-opentype'), url('http://localhost:8000/assets/font/altosinsights.woff') format('woff');
+}
+@font-face {
+     font-family: 'Zooja';
+     src: local('http://localhost:8000/assets/font/Zooja.ttf');
+}
+
+$logo : 'Zooja', sans-serif;
+$textos : 'Open Sans', sans-serif;
+$titulos : 'altosinsights', sans-serif;
+$especial : 'Shadows Into Light Two', cursive;

data/assets/scss/_footer.scss

@@ -0,0 +1,4 @@
+.rodape{
+  padding: 20px;
+  text-align: center;
+}

data/assets/scss/_header.scss

@@ -0,0 +1,165 @@
+//vars
+@import "colors";
+@import "fonts";
+
+header.topo{
+  width: 100%;
+  padding: 60px 0;
+}
+
+.logo{
+  width: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+  display: block;
+  transition: all .25s linear;
+}
+
+nav.menu{
+  display: flex;
+  //margin: 0 auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 20px 0;
+  background: #fff;
+  border: 5px solid #f1f1f1;
+  font-family: $titulos;
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  ul{
+    display: flex;
+    margin: 0 auto;
+  }
+  li{
+    margin: 0 31px;
+    list-style: none;
+  }
+}
+
+nav.menu-mobile{
+  height: 30px;
+	width: 30px;
+  cursor: pointer;
+	position: fixed;
+	left: 15px;
+	top: 20px;
+	z-index: 1;
+	&:after {
+		content: '';
+		position: absolute;
+		left: -50%;
+		top: -50%;
+		z-index: -1;
+		border: 30px solid $secundaria;
+		border-radius: 50%;
+		height: 0;
+		width: 0;
+		transition: all 150ms;
+		transform: scale(0);
+	}
+	> span {
+		background-color: $secundaria;
+		border-radius: 1px;
+		height: 3px;
+		width: 25px;
+    cursor: pointer;
+		position: absolute;
+		left: 0;
+		top: 50%;
+		margin-top: -1px;
+		transition: all 100ms;
+		&:after, &:before {
+			content: '';
+			background-color: $secundaria;
+			border-radius: 1px;
+			height: 3px;
+			width: 30px;
+			position: absolute;
+			left: 0;
+			transition: all 200ms;
+		}
+		&:after {
+			top: -7px;
+		}
+		&:before {
+			bottom: -7px;
+		}
+	}
+	&.act {
+		&:after {
+			transform: scale(8);
+			opacity: 0;
+		}
+		> span {
+			height: 0;
+			&:after, &:before {
+				background-color: $secundaria;
+				top: 1px;
+			}
+			&:after {
+				transform: rotate(45deg);
+			}
+			&:before {
+				transform: rotate(-45deg);
+			}
+		}
+	}
+}
+
+nav.menu-mobile{
+  display: none;
+  .menu-itens{
+    width: 200px;
+    min-height: 100%;
+    background: #fff;
+    position: fixed;
+    top: 0;
+    left: -220px;
+    transition: all .25s linear;
+    text-align: center;
+    cursor: initial;
+    li.about{
+      background: transparent;
+      border: 0;
+      width: 50%;
+      margin: 0 auto;
+      padding: 20px 0 0;
+    }
+    li.about-text{
+      text-transform: initial;
+      padding: 0 15px;
+      border: 0;
+      background: transparent;
+      p{font-size: 10px;}
+    }
+    li{
+      margin: 5px;
+      padding: 20px 0;
+      background: #fff;
+      border: 5px solid #f1f1f1;
+      font-family: "altosinsights", sans-serif;
+      font-size: 10px;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      list-style: none;
+    }
+  }
+  .menu-itens-active{
+    left: 0;
+    box-shadow: #666 1px 0 10px 0px;
+  }
+}
+
+nav.menu-mobile-active{
+  left: 213px;
+}
+
+.social-media{
+  margin: 0 10px;
+}
+
+.categoria-image{
+  width: 287px;
+}

data/assets/scss/_main.scss

@@ -0,0 +1,68 @@
+.main{
+  display: flex;
+  margin: 30px auto;
+  max-width: 1068px;
+}
+
+.post-list{
+  display: block;
+  max-width: 700px;
+  margin-right: 30px;
+}
+
+.post{
+  margin-bottom: 50px;
+}
+
+.sidebar{
+  display: block;
+  max-width: 337px;
+  h2{
+    margin-bottom: 20px;
+  }
+}
+
+#instafeed{
+  width: 287px;
+  display: block;
+  margin-bottom: -40px;
+}
+
+.img-insta{
+  max-width: 136px;
+  width: 100%;
+  margin: 2px 3.5px;
+  transition: all .25s linear;
+}
+
+.img-insta:hover{
+  opacity: 0.8;
+}
+
+.post, .widget{
+  background: #fff;
+  border: 5px solid #f1f1f1;
+  padding: 20px;
+}
+
+.about{
+  text-align: center;
+  p{
+    margin: 10px 0px;
+  }
+}
+
+.thumb{
+  width: 100%;
+  height: 300px;
+  margin: 20px 0;
+}
+
+.more{
+  font-size: 16px;
+  text-transform: uppercase;
+  font-family: $especial;
+  font-weight: bold;
+  display: block;
+  margin: 20px 0;
+}

data/assets/scss/style.scss

@@ -0,0 +1,127 @@
+//vars
+@import "colors";
+@import "fonts";
+
+//elements
+@import "header";
+@import "main";
+@import "footer";
+
+//reset
+*{
+  margin: 0;
+  padding: 0;
+}
+
+body{
+  background: $branco;
+}
+
+h1, h2, h3{
+  font-family: $titulos;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: $primaria;
+}
+
+h1, h2{
+  font-size: 18px;
+}
+
+p{
+  font-family: $textos;
+  color: $secundaria;
+  font-size: 12px;
+  line-height: 1.625;
+}
+
+a{
+  color: $primaria;
+  transition: all .25s linear;
+  text-decoration: none;
+}
+
+a:hover{
+  color: $secundaria;
+}
+
+cite{
+  font-family: $textos;
+  font-style: normal;
+  color: $primaria;
+  margin: 20px 0 0;
+  display: block;
+  font-size: 12px;
+}
+
+//class
+.img-responsive{
+  width: 100%;
+}
+
+.author{
+  font-family: $especial;
+  color: $primaria;
+  font-weight: bold;
+}
+
+.content{
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.fix{
+  position: fixed;
+  z-index: 999;
+  box-shadow: #000 0 -20px 35px;
+  transition: all .25s linear;
+}
+
+
+@media screen and (max-width: 1280px){
+  .content{
+    padding-left: 5%;
+    padding-right: 5%;
+  }
+}
+
+@media screen and (max-width: 1020px){
+  .sidebar{
+    display: none;
+  }
+  .post-list{
+    max-width: 700px;
+    margin: 0 auto;
+  }
+  .post-list h1, .post-list cite{
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 780px){
+  nav.menu li{
+    margin: 0 20px;
+  }
+}
+
+@media screen and (max-width: 580px){
+  .categorias{
+    display: none;
+  }
+  header.topo{
+    padding: 20px 0;
+  }
+  nav.menu, .filter-drop-spacer, ::-webkit-scrollbar{
+    display: none;
+  }
+  nav.menu-mobile{
+    display: block;
+  }
+  .main{
+    margin: 0 auto;
+  }
+}
+
+@media screen and (max-width: 480px){
+
+}