Initial git

app/styles/app.scss

@@ -0,0 +1,23 @@
+@import "base/variables";
+@import 'base/grid';
+@import 'base/animate';
+
+
+// Component styles
+@import 'components/global';
+@import 'components/master';
+@import 'components/post';
+@import 'components/profile';
+@import 'components/imageGallery';
+@import 'components/postWrite';
+@import 'components/homeHeader';
+@import 'components/home';
+@import 'components/sidebar';
+@import 'components/blog';
+@import 'components/comment';
+@import 'components/people';
+@import 'components/login';
+@import 'components/signup';
+@import 'components/masterLoading';
+@import 'components/settings';
+

app/styles/base/_animate.scss

@@ -0,0 +1,167 @@
+.animate__up {
+    animation-duration: .3s;
+    animation-name: staggerItems;
+    animation-timing-function: ease-out;
+}
+
+@keyframes staggerItems {
+    0% {
+        -webkit-transform: translateY(30px);
+        transform: translateY(30px)
+    }
+}
+
+.spin {
+    animation: spin 2s infinite linear
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg)
+    }
+    100% {
+        transform: rotate(359deg)
+    }
+}
+
+.animate-fading {
+    animation: fading 10s infinite
+}
+
+@keyframes fading {
+    0% {
+        opacity: 0
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0
+    }
+}
+
+.animate-fading2 {
+    animation: fading 2s infinite
+}
+
+@keyframes fading {
+    0% {
+        opacity: 0
+    }
+    50% {
+        opacity: 1
+    }
+    100% {
+        opacity: 0
+    }
+}
+
+.animate-opacity {
+    animation: opac 0.8s
+}
+
+@keyframes opac {
+    from {
+        opacity: 0
+    }
+    to {
+        opacity: 1
+    }
+}
+
+.animate-top {
+    position: relative;
+    animation: animatetop 0.4s
+}
+
+@keyframes animatetop {
+    from {
+        top: -300px;
+        opacity: 0
+    }
+    to {
+        top: 0;
+        opacity: 1
+    }
+}
+
+.animate2-top10 {
+    position: relative;
+    animation: animatetop 0.2s
+}
+
+@keyframes animatetop {
+    from {
+        top: -10px;
+        opacity: 0
+    }
+    to {
+        top: 0;
+        opacity: 1
+    }
+}
+
+.animate-left {
+    position: relative;
+    animation: animateleft 0.4s
+}
+
+@keyframes animateleft {
+    from {
+        left: -300px;
+        opacity: 0
+    }
+    to {
+        left: 0;
+        opacity: 1
+    }
+}
+
+.animate-right {
+    position: relative;
+    animation: animateright 0.4s
+}
+
+@keyframes animateright {
+    from {
+        right: -300px;
+        opacity: 0
+    }
+    to {
+        right: 0;
+        opacity: 1
+    }
+}
+
+.animate-bottom {
+    position: relative;
+    animation: animatebottom 0.4s
+}
+
+@keyframes animatebottom {
+    from {
+        bottom: -300px;
+        opacity: 0
+    }
+    to {
+        bottom: 0;
+        opacity: 1
+    }
+}
+
+.animate-bottom50 {
+    position: relative;
+    animation: animatebottom 0.4s
+}
+
+@keyframes animatebottom {
+    from {
+        bottom: -50px;
+        opacity: 0
+    }
+    to {
+        bottom: 0;
+        opacity: 1
+    }
+}
+

app/styles/base/_grid.scss

@@ -0,0 +1,143 @@
+
+.grid {
+  display: flex;
+  flex-flow: row; 
+  flex-wrap: wrap;
+}
+
+
+$gutter: 1em;
+.grid__gutters {
+  margin-left: -$gutter;
+  .grid-cell {
+    padding-left: $gutter;
+  }
+    
+}
+
+/* Justify per row*/
+.grid__right {
+  justify-content: flex-end;
+}
+.grid__left{
+  justify-content: flex-start;
+}
+.grid__center {
+  justify-content: center;
+}
+.grid__space-around{
+  justify-content: space-around;
+}
+
+ 
+/* Alignment per row */
+.grid__top {
+  align-items: flex-start;
+}
+.grid__bottom {
+  align-items: flex-end;
+}
+.grid__center {
+  align-items: center;
+}
+
+/* Alignment per cell */
+.grid-cell__top {
+  align-self: flex-start;
+}
+.grid-cell__bottom {
+  align-self: flex-end;
+}
+.grid-cell__center {
+  align-self: center;
+}
+
+
+.grid__fit > .grid-cell {
+  flex: 1;
+}
+.grid__full > .grid-cell {
+  flex: 0 0 100%;
+}
+
+
+@media (min-width:400px) {
+  .grid__cols-2 > .grid-cell,
+  .grid__cols-3 > .grid-cell,
+  .grid__cols-4 > .grid-cell,
+  .grid__cols-6 > .grid-cell,
+  .grid__cols-12 > .grid-cell{
+    flex: 1;  
+  }
+
+  .grid__1of2 > .grid-cell {
+    flex: 1;
+  }
+  .grid__1of6 > .grid-cell {
+    flex: 0 0 16.6666%;
+  }
+  .grid__1of4 > .grid-cell {
+    flex: 0 0 calc(48.6666% - 1em);
+  }
+  .grid__1of3 > .grid-cell {
+    flex: 0 0 30%;
+  }
+
+}
+
+
+@media (min-width:600px) {
+  .grid__cols-2 > .grid-cell,
+  .grid__cols-3 > .grid-cell,
+  .grid__cols-4 > .grid-cell,
+  .grid__cols-6 > .grid-cell,
+  .grid__cols-12 > .grid-cell{
+    flex: 1;  
+  }
+
+  .grid__1of2 > .grid-cell {
+    flex: 1;
+  }
+  .grid__1of6 > .grid-cell {
+    flex: 0 0 16.6666%;
+  }
+  .grid__1of4 > .grid-cell {
+    flex: 0 0 calc(48.6666% - 1em);
+  }
+  .grid__1of3 > .grid-cell {
+    flex: 0 0 30%;
+  }
+
+}
+
+@media (min-width:1000px) {
+  .grid__cols-2 > .grid-cell,
+  .grid__cols-3 > .grid-cell,
+  .grid__cols-4 > .grid-cell,
+  .grid__cols-6 > .grid-cell,
+  .grid__cols-12 > .grid-cell{
+    flex: 1;  
+  }
+
+  .grid__1of2 > .grid-cell {
+    flex: 0 0 50%;
+     flex-grow: 1;
+  }
+  .grid__1of6 > .grid-cell {
+    flex: 0 0 16.6666%;
+  }
+  .grid__1of4 > .grid-cell {
+    flex: 0 0 calc(24.33333% - 1em);
+            flex-grow: 1;
+  }
+  .grid__1of3 > .grid-cell {
+    flex: 0 0 30%;
+  }
+
+}
+
+
+@mixin justify-flex($pos){
+    display: flex;
+    justify-content: $pos;
+}

app/styles/base/_variables.scss

@@ -0,0 +1,20 @@
+// Colors
+$grey: #333333;
+$light-grey: #fafafa;
+$light-grey2:#f7f7f7;
+$light-grey3:#ada7a7;
+$green-teal:#00ab6b;
+$teal:#58d09f;
+$gold: #FFD700;
+$green: #4CAF50;
+
+$light-grey-border: #eeeeee;
+$light-color: #aaa;
+
+// Navigation colors
+$nav-background: $grey;
+$nav-text-color: white;
+
+// Shadow
+$glob-box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
+

app/styles/components/_blog.scss

@@ -0,0 +1,11 @@
+.blog{
+  margin: 0 auto;
+  width: 90%;
+}
+
+.blog__right-list{
+     
+        @media (min-width: 993px) {
+          margin-left: 2%;
+        }
+}

app/styles/components/_comment.scss

@@ -0,0 +1,39 @@
+.comment__list-show{
+
+  @mixin com{
+    position: absolute;
+    top: 0; left: 0;
+    background-color: white;
+    height: 60px;
+    width: 100%;
+  }
+
+  &>div:nth-of-type(1) {
+
+    z-index: 3;
+    animation: commentSlideShow 12s linear 0s infinite;
+
+    @include com;
+  }
+
+  &>div:nth-of-type(2) {
+    z-index: 2;
+    animation: commentSlideShow 12s linear 4s infinite;
+
+      @include com;
+  }
+
+  &>div:nth-of-type(3) {
+     z-index: 1;
+    animation: commentSlideShow 12s linear 8s infinite;
+
+      @include com;
+  }
+
+  @keyframes commentSlideShow {
+     25% { opacity: 1;}
+     33.33% { opacity: 0;}
+     91.66% { opacity: 0;}
+     100% { opacity: 1;}
+  }
+}

app/styles/components/_global.scss

@@ -0,0 +1,199 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+  text-decoration: none;
+  color: black;
+}
+
+a:active,
+a:hover {
+  outline-width: 0
+}
+
+img {
+  border-style: none
+}
+
+html,
+body {
+  font-family: Verdana, sans-serif;
+  font-size: 15px;
+  line-height: 1.5
+}
+
+html {
+  overflow-x: hidden
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Roboto', sans-serif;
+}
+
+
+/* Change autocomplete styles in WebKit */
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus input:-webkit-autofill,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  border: 0px solid white;
+  -webkit-text-fill-color: black;
+  -webkit-box-shadow: 0 0 0px 1000px white inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.g__dialog-title {
+  margin: 0px;
+  padding: 24px 24px 20px;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 22px;
+  line-height: 32px;
+  font-weight: 400;
+}
+
+.g__circle-black {
+  color: rgba(0, 0, 0, 0.87);
+  background: rgba(0, 0, 0, 0.26);
+  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  box-sizing: border-box;
+  font-family: Roboto, sans-serif;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0px 8px;
+  height: 36px;
+  cursor: pointer;
+  width: 36px;
+  &:hover {
+    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    background: rgba(0, 0, 0, 0.42);
+    top: 0px;
+  }
+}
+
+.g__circle {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgb(238, 238, 238);
+  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  box-sizing: border-box;
+  font-family: Roboto, sans-serif;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0px 8px;
+  height: 36px;
+  cursor: pointer;
+  width: 36px;
+  &:hover {
+    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    background-color: rgba(0, 0, 0, 0.04);
+    top: 0px;
+  }
+}
+
+.g__title {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 16px;
+  font-weight: 500;
+  margin: 32px 0 0;
+  white-space: nowrap;
+  -webkit-flex-shrink: 1;
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.g__title-center {
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  margin: 22px auto;
+  max-width: 300px;
+  @extend .g__title
+}
+
+.g__greenColor {
+  color: #4CAF50;
+}
+
+.g__greenBox {
+  background-color: #4CAF50!important;
+}
+
+.glob__shadow {
+  box-shadow: $glob-box-shadow;
+}
+
+.global__color-teal {
+  color: $teal;
+}
+
+.global__color-gold {
+  color: $gold;
+}
+
+.global__color-lightGrey {
+  color: $light-grey3;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.global__hidden {
+  display: none;
+}
+
+.global__scroll-CH::-webkit-scrollbar {
+  width: 5px;
+}
+
+.global__scroll-CH::-webkit-scrollbar-track {
+  background: #ddd;
+}
+
+.global__scroll-CH::-webkit-scrollbar-thumb {
+  background: #666;
+}
+
+.global__scroll-IE {
+  scrollbar-base-color: #C0C0C0;
+  scrollbar-base-color: #C0C0C0;
+  scrollbar-dlight-color: #C0C0C0;
+  scrollbar-highlight-color: #C0C0C0;
+  scrollbar-track-color: #EBEBEB;
+  scrollbar-arrow-color: black;
+  scrollbar-shadow-color: #C0C0C0;
+  scrollbar-dark-shadow-color: #C0C0C0;
+}

app/styles/components/_home.scss

@@ -0,0 +1,11 @@
+.home__main{
+  background-color: #eeeeee;
+  transition: margin-left .4s;
+
+  @media screen and (max-width: 750px){
+      margin-left: 0!important;
+      margin-right: 0!important;
+    
+  }
+
+}

app/styles/components/_homeHeader.scss

@@ -0,0 +1,134 @@
+.homeHeader__page {
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  padding-left: 24px;
+  margin-left: 24px;
+  line-height: 32px;
+  font-weight: 500;
+  font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
+  font-size: 20px;
+  -webkit-font-smoothing: antialiased;
+  color: white;
+}
+
+.homeHeader__right {
+  padding-left: 30px;
+  padding-right: 30px;
+  position: relative;
+  margin-left: -24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.homeHeader__left {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.homeHeader__notify {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #ff1717;
+  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  box-sizing: border-box;
+  font-family: Roboto, sans-serif;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  height: 20px;
+  cursor: pointer;
+  width: 21px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  div.title {
+    color: white;
+    font-size: 10px;
+    font-weight: 100;
+    white-space: nowrap;
+    -webkit-flex-shrink: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.homeHeader__notify-menu {
+  background-color: #eee !important;
+  background: #e5e5e5 !important;
+  border: 1px solid #ccc !important;
+  color: #000 !important;
+  min-width: 376px !important;
+  width: 376px !important;
+  height: 380px !important;
+  display: block !important;
+  outline: none !important;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .2) !important;
+  div.container {
+    padding: 10px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    div.title {
+      display: flex;
+      justify-content: center;
+      color: rgba(102, 102, 102, 0.57);
+      font-size: 26px;
+      font-weight: 500;
+      width: 100%;
+    }
+    div.content {
+      width: 100%;
+      height: 100%;
+      padding: 10px 0px;
+      div.item {
+        width: 100%;
+        height: 68px;
+        background-color: white;
+        margin-bottom: 10px;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        display: flex;
+        padding: 10px;
+        flex-direction: row;
+        align-items: center;
+        position: relative;
+        div.avatar {}
+        div.info {
+          margin-left: 10px;
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+          div.user-name {
+            color: rgba(0, 0, 0, 0.77);
+            font-size: 15px;
+            font-weight: 500;
+            white-space: nowrap;
+            -webkit-flex-shrink: 1;
+            flex-shrink: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          div.description {
+            color: rgba(0, 0, 0, 0.54);
+            font-size: 14px;
+            font-weight: 200;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        div.close {
+          position: absolute;
+          right: 17px;
+          top: 3px;
+          height: 10px;
+          width: 10px;
+        }
+      }
+    }
+  }
+}

app/styles/components/_login.scss

@@ -0,0 +1,4 @@
+.login__button-box {
+    display: flex;
+    justify-content: space-around;
+}

app/styles/components/_master.scss

@@ -0,0 +1,39 @@
+.master__progress {
+  position: fixed;
+  top: 0;
+  top: 56px;
+  z-index: 1501;
+  width: 100%;
+}
+
+.master__loading {
+  position: fixed;
+  top: 67px;
+  z-index: 1501;
+  width: 100%;
+  justify-content: center;
+  div.title {
+    color: rgb(255, 255, 255);
+    font-size: 11px;
+    text-align: center;
+    font-weight: 500;
+    white-space: nowrap;
+    -webkit-flex-shrink: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background-color: #db4437;
+    padding: 7px;
+    border-radius: 40px;
+  }
+}
+
+.master__message {
+  position: fixed;
+  top: 5;
+  left: 0;
+  text-align: center;
+  z-index: 1001;
+  width: 100%;
+}

app/styles/components/_masterLoading.scss

@@ -0,0 +1,12 @@
+.mLoading__body {
+    background-color: rgb(216, 216, 216);
+}
+
+.mLoading__content {
+    max-width: 338px !important;
+}
+
+.mLoading__context{
+    display: flex;
+    justify-content: space-around;
+}

app/styles/components/_people.scss

@@ -0,0 +1,24 @@
+.people__title{
+    @extend .profile__title
+}
+
+.people__name{
+    display: flex;
+    word-break: break-word;
+    max-width: 100%;
+    align-items: center;
+        padding: 10px;
+    justify-content: center;
+    div{
+        color: rgba(0,0,0,0.87);
+        font-size: 16px;
+        line-height: 20px;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: 40px;
+    }
+}

app/styles/components/_profile.scss

@@ -0,0 +1,121 @@
+.profile__parallax {
+    height: 455px;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
+}
+
+.profile__title {
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 16px;
+    font-weight: 500;
+    margin: 32px 0 0;
+    white-space: nowrap;
+    -webkit-flex-shrink: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.profile__head-info {
+    justify-content: space-between;
+    position: relative;
+    box-sizing: border-box;
+    height: 108px;
+    margin-top: -108px;
+    padding: 24px;
+    flex-direction: row;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0);
+    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .46));
+    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .46));
+    display: flex;
+    div.left {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        div.info {
+            display: flex;
+            text-align: left;
+            margin-left: 24px;
+            flex-direction: column;
+            div.fullName {
+                font-size: 30px;
+                font-weight: 500;
+                color: #fff;
+            }
+            div.followers {
+                color: #fff;
+                margin-top: 8px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-break: break-all;
+                font-size: 14px;
+            }
+        }
+    }
+    div.right {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}
+
+//------ Profile header in small size -------
+.profile__head-info-s {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    box-sizing: border-box;
+    height: 241px;
+    margin-top: -45px;
+    padding: 0 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    div.left {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        div.profile__avatar {
+            @include justify-flex(center)
+        }
+        div.info {
+            display: flex;
+            text-align: left;
+            margin-top: 24px;
+            flex-direction: column;
+            div.fullName {
+                font-size: 30px;
+                font-weight: 500;
+                color: #191818;
+                @include justify-flex(center)
+                
+            }
+            div.followers {
+                color: #383838;
+                margin-top: 8px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-break: break-all;
+                font-size: 14px;
+                @include justify-flex(center)                
+            }
+        }
+    }
+    div.right {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 24px;
+    }
+}
+
+.profile__edit{
+      margin-top: -60px;
+          height: 171px;
+    @extend .profile__head-info-s
+  
+}

app/styles/components/_settings.scss

@@ -0,0 +1,3 @@
+.settings__button-box{
+    @extend .login__button-box
+}

app/styles/components/_sidebar.scss

@@ -0,0 +1,35 @@
+.sidebar {
+  padding-top: 64px;
+  background-color: #fff;
+  max-width: 210px;
+  height: 100%;
+  width: 200px;
+  position: fixed!important;
+  z-index: 1;
+  overflow: auto
+}
+
+.sidebar__large {
+  background-color: #eeeeee !important;
+  z-index: 1000;
+}
+
+.sidebar__over {
+  z-index: 1102;
+  padding-top: 0;
+  background-color: #ffffff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  z-index: 1111;
+}
+
+.sidebar__title {
+  font-size: 20px;
+  font-weight: 500;
+  padding-right: 16px;
+  font-family: Roboto, sans-serif;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: 15px;
+}

app/styles/components/_signup.scss

@@ -0,0 +1,3 @@
+.signup__button-box{
+    @extend .login__button-box
+}