make it better

levinhphuc91 · May 7, 2017 · 6c006fa · 6c006fa
1 parent ff43d74
commit 6c006fa
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 13 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/deploy.sh b/deploy.sh
@@ -0,0 +1,9 @@
+#!/bin/bash
+
+gulp build
+cd ..
+cp -rf template-platform/dist/* template-platform-deploy/
+cd template-platform-deploy
+git add .
+git commit -m 'make it better'
+git push heroku master
diff --git a/gulpfile.js b/gulpfile.js
@@ -33,7 +33,8 @@ gulp.task('clean', function () {
 })
 
 gulp.task('copy-fonts', function () {
-  gulp.src(fontsPath + '/**/*.{eot,svg,ttf,woff,oft}')
+  gulp.src([
+    fontsPath + '/**/*.{eot,svg,woff2,woff,oft,ttf}'])
       .pipe(gulp.dest('./dist/assets/fonts'))
       .pipe(browserSync.stream())
 })
@@ -80,5 +81,5 @@ gulp.task('dev', function (done) {
 })
 
 gulp.task('build', function (done) {
-  runSequence('clean', 'copy-assets', 'copy-fonts', 'vendor', 'sass', 'pug', 'js', done)
+  runSequence('clean', 'copy-assets', 'copy-fonts', 'vendor', 'sass', 'pug', done)
 })
diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store
diff --git a/src/assets/facebook/.DS_Store b/src/assets/facebook/.DS_Store
diff --git a/src/assets/facebook/avatar2.png b/src/assets/facebook/avatar2.png
diff --git a/src/assets/facebook/globe.svg b/src/assets/facebook/globe.svg
diff --git a/src/assets/status-bar-dark.png b/src/assets/status-bar-dark.png
diff --git a/src/assets/status-bar-link.png b/src/assets/status-bar-link.png
diff --git a/src/html/_fb.pug b/src/html/_fb.pug
@@ -25,22 +25,23 @@
             img(src='./assets/facebook/avatar.jpg', width='28.5', height='28.5')
             .infor-name Lala
             .time Just now
-              img(src='./assets/facebook/global.jpg')
+              img(src='./assets/facebook/globe.svg')
         .result-facebook__content-post__status
           span Yes, it is. It’s tiny. It’s easy. It’s doable. And it’s applicable in most things you want to do or accomplish.
         img.result-facebook__content-post__image(src='./assets/facebook/imagetest.png')
         .result-facebook__content-post__title How to be 1% Better Every Day (The Kaizen Approach to Self-improvement) - The Mission
           .link medium.com
+          .border-bottom
         .result-facebook__content-post__tools.row
           span.result-facebook__content-post__tools__like Like
           span.result-facebook__content-post__tools__comment Comment
           span.result-facebook__content-post__tools__share Share
       .result-facebook__content-post.result-facebook__content-second-post
         .result-facebook__content-post__header
-            img(src='./assets/facebook/avatar.jpg', width='31.4', height='31.4')
+            img(src='./assets/facebook/avatar2.png', width='31.4', height='31.4')
             .infor-name Tammy Olson
             .time 3 hrs · Instagram ·
-              img(src='./assets/facebook/global.jpg')
+              img(src='./assets/facebook/globe.svg')
       .result-facebook__tabs
         span.result-facebook__tabs__home
         span.result-facebook__tabs__friend

diff --git a/src/html/_slack.pug b/src/html/_slack.pug
@@ -3,7 +3,7 @@
         .widget-slack
             .header-slack
                 .header-common
-                    img(src='assets/status-bar-dark.svg')
+                    img(src='assets/status-bar-dark.png', height='10')
                 .top-header
                     .slack-logo.text-right
                         img(src='assets/slack/slack-logo.png' width='21')
@@ -45,7 +45,7 @@
                         p.margin-b-0 "Compounding is the greatest mathematical discovery of all time" - Albert Einstein
                         p.margin-b-0.bold-lato Reading time
                         p.margin-b-0 5 min read
-                        p.margin-b-5.color-grey Dec 9th, 2016 at 12:03 am
+                        p.margin-b-5.color-grey.date Dec 9th, 2016 at 12:03 am
                         .div
                             img(src='assets/slack/image@3x.png' width='100%')
 

diff --git a/src/sass/_fb.sass b/src/sass/_fb.sass
@@ -5,7 +5,7 @@
     justify-content: center
     align-content: flex-start
     font-size: 1rem
-    padding: 5px
+    margin: 5px
 
     &:last-child
       border-right: none
@@ -17,7 +17,7 @@
       background-size: $size
       background-position: $postion
       background-repeat: no-repeat
-      margin: 0 3px
+      margin: 0px 3px
 
 @mixin tabs-item($file, $size, $position)
   width: 20%
@@ -36,7 +36,7 @@
   box-shadow: 0 9px 10px 0 rgba(226, 226, 226, 0.5)
 .result-facebook
   width: 295px
-  height: 530px
+  height: 525px
   border: solid 1px #ebebeb
   background-color: #f3f3f3
   position: relative
@@ -177,6 +177,8 @@
       color: #4b4f56
       &__live
         @include tools-item($assets-path + '/facebook/video.png', 100%, center 1px)
+        &::before
+          margin: 2px 3px
       &__photo
         @include tools-item($assets-path + '/facebook/photo.png', 100%, center 1px)
       &__check-in
@@ -208,6 +210,7 @@
       font-size: 10px
       line-height: 1.28
       color: #141823
+      letter-spacing: 0.2px
     &__image
       width: 275px
       margin-top: 10px
@@ -221,12 +224,20 @@
       margin-right: 0.8rem
       box-shadow: 1px 0 5px 0 #f2f2f2
       padding-bottom: 1rem
+      position: relative
       .link
         padding-top: 0.1rem
         font-size: 8.5px
         text-align: left
         color: #9197a3
         font-weight: 100
+      .border-bottom
+        position: absolute
+        height: 1px
+        width: 100%
+        background-color: #f3f5f5
+        bottom: -0.7rem
+        left: 0rem
     &__tools
       display: flex
       flex-direction: row
@@ -235,6 +246,8 @@
       color: #4b4f56
       &__like
         @include tools-item($assets-path + '/facebook/like.png', 100%, center 1px)
+        margin: 0px
+        padding: 5px
         border-right: none
       &__comment
         width: 33.3%
@@ -257,8 +270,11 @@
           margin: 0 3px
       &__share
         @include tools-item($assets-path + '/facebook/share.png', 95%, center -1px)
+        margin: 0px
+        padding: 5px
   &__content-second-post
     padding-bottom: 0.7rem
+    padding-top: 0.7rem
     .time, .infor-name
       margin-left: 38.5px
   &__tabs

diff --git a/src/sass/_slack.sass b/src/sass/_slack.sass
@@ -1,5 +1,5 @@
 .bold-lato
-  font-family: 'Lato-Bold'
+  font-family: $font-LT-B
 .link-color
   color: #0089cd
 .container-slack
@@ -50,6 +50,11 @@
       border: 1px solid #e4e4e4
       padding: 6px
       border-radius: 4px
+      .date
+        font-size: 8.6px
+        line-height: 1.45
+        letter-spacing: 0.1px
+        color: #acacac
     .profile-picture
       position: absolute
       top: 0
@@ -88,7 +93,11 @@
       border-radius: 4px
       padding: 0 5px
       height: 24px
-      font-size: 12px
+      font-size: 10px
+      letter-spacing: 0.1px
+      font-family: $font-LT-R
+      &::placeholder
+        color: #acacac
     .add-more-slack
       position: absolute
       text-align: center
@@ -98,4 +107,4 @@
       width: 30px
       span
         position: relative
-        top: 4px
+        top: 4px