Pequeños ajustes en index.scss y header/index.js

.gitignore

@@ -0,0 +1,43 @@
+
+# Created by https://www.gitignore.io/api/node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+public

Gulpfile.js

@@ -0,0 +1,55 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var rename = require('gulp-rename');
+var babel = require('babelify');
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var watchify = require('watchify');
+
+gulp.task('styles', function () {
+  gulp
+    .src('index.scss')
+    .pipe(sass())
+    .pipe(rename('app.css'))
+    .pipe(gulp.dest('public'));
+})
+
+gulp.task('assets', function () {
+  gulp
+    .src('assets/*')
+    .pipe(gulp.dest('public'));
+})
+
+function compile(watch) {
+  var bundle = browserify('./src/index.js', {debug: true});
+
+  if (watch) {
+    bundle = watchify(bundle);
+    bundle.on('update', function () {
+      console.log('--> Bundling...');
+      rebundle();
+    });
+  }
+
+  function rebundle() {
+    bundle
+      .transform(babel, { presets: [ 'es2015' ], plugins: [ 'syntax-async-functions', 'transform-regenerator' ] })
+      .bundle()
+      .on('error', function (err) { console.log(err); this.emit('end') })
+      .pipe(source('index.js'))
+      .pipe(rename('app.js'))
+      .pipe(gulp.dest('public'));
+  }
+
+  rebundle();
+}
+
+gulp.task('build', function () {
+  return compile();
+});
+
+gulp.task('watch', function () { return compile(true); });
+
+gulp.task('default', ['styles', 'assets', 'build']);
+
+

assets/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>

assets/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"
+  }
+ ]
+}

index.scss

@@ -0,0 +1,222 @@
+$secondary-color: #125688;
+$platzigram-red: #f44336;
+
+@import "node_modules/materialize-css/sass/materialize.scss";
+@import "./loader";
+
+@mixin prefix($property, $value, $vendors: webkit moz ms o) {
+  @if $vendors {
+    @each $vendor in $vendors {
+      #{"-" + $vendor + "-" + $property}: #{$value};
+    }
+  }
+  #{$property}: #{$value};
+}
+
+body {
+  background: #fafafa;
+  color: $secondary-color;
+  font-family: Montserrat;
+}
+
+.landing {
+  margin: 30px auto;
+}
+
+.iphone {
+  max-width: 100%;
+}
+
+.site-footer {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.login-box,
+.signup-box {
+  background-color: white;
+  border-radius: 3px;
+  border: 1px solid #edeeee;
+  padding: 10px 0;
+  text-align: center;
+}
+
+.platzigram {
+  color: $secondary-color !important;
+  font-family: 'Oleo Script';
+  font-size: 42px;
+}
+
+.signup-form {
+  margin: 0 auto;
+  width: 65%;
+}
+
+.signup-form h2 {
+  color: #a5a7aa;
+  font-size: 1.2em;
+}
+
+.signup-form .btn.btn-fb {
+  background-color: #4090db;
+  font-size: .8em;
+}
+
+.signup-form .btn.btn-fb:hover {
+  background-color: #2d6599;
+}
+
+.signup-form .btn.btn-signup {
+  background-color: $secondary-color;
+}
+
+.header {
+  background-color: white;
+  border-bottom: 1px solid #edeeee;
+  box-shadow: none;
+  color: $secondary-color;
+
+  .dropdown-user {
+    height: 64px;
+    line-height: 64px;
+  }
+}
+
+.dropdown-button:hover {
+  color: white;
+}
+
+.timeline {
+  padding: 30px 0;
+}
+
+$avatar-size: 48px;
+
+.avatar {
+  border-radius: 50%;
+  float: left;
+  height: $avatar-size;
+  margin-right: 12px;
+  width: $avatar-size;
+}
+
+.card .username {
+  color: $secondary-color;
+}
+
+.card small.time {
+  line-height: $avatar-size;
+}
+
+.card p {
+  padding: 20px 0;
+}
+
+.card .likes {
+  line-height: 30px;
+  margin-left: 12px;
+}
+
+.card i {
+  font-size: 30px;
+}
+
+.card .fa-heart-o {
+  color: $secondary-color;
+}
+
+.card .fa-heart {
+  color: #f44336;
+  display: none;
+}
+
+.card.liked {
+  .fa-heart {
+    display: block;
+  }
+
+  .fa-heart-o {
+    display: none;
+  }
+}
+
+.form-upload {
+
+  span, button {
+    color: white;
+  }
+
+  .fileUpload {
+    margin: 10px;
+    overflow: hidden;
+    position: relative;
+
+    input {
+      bottom: 0;
+      cursor: pointer;
+      filter: alpha(opacity=0);
+      font-size: 20px;
+      height: 100%;
+      margin: 0;
+      opacity: 0;
+      padding: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+.user-page {
+  margin-top: 30px;
+
+  .heading {
+    margin-bottom: 20px;
+  }
+
+  .picture-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    margin-bottom: 20px;
+    position: relative;
+
+    &:hover {
+      .picture {
+        @include prefix(filter, blur(5px) grayscale(100%));
+      }
+
+      .likes {
+        display: flex;
+      }
+    }
+
+    .picture {
+      margin-bottom: 20px;
+      display: block;
+      max-width: 100%;
+      max-height: 100%;
+    }
+
+    .likes {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      text-align: center;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      color: $platzigram-red;
+      font-size: 34px;
+    }
+
+    .fa-heart {
+      margin-right: 8px;
+      display: inline-block;
+    }
+  }
+}