Merge pull request #9 from Lintercat/fix/design-details

Fixes #4, #6 and #8
lintercat · Mar 10, 2018 · 17acd8d · 17acd8d
2 parents 9ba6174 + 691d62d
commit 17acd8d
Showing 27 changed files with 427 additions and 74 deletions.
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
@@ -33,6 +33,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     compress: true,
     host: HOST || config.dev.host,
     port: PORT || config.dev.port,
+    disableHostCheck: true,
     open: config.dev.autoOpenBrowser,
     overlay: config.dev.errorOverlay
       ? { warnings: false, errors: true }

diff --git a/config/index.js b/config/index.js
@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '127.0.0.1', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width,initial-scale=1.0'>
     <title>Lintercat</title>
+    <link rel='icon' type='image/png' href='/static/favicon.png'>
   </head>
   <body>
     <div id='app'></div>

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "vee-validate": "^2.0.3",
     "vue": "^2.5.2",
     "vue-axios": "^2.0.2",
+    "vue-motion": "^0.2.2",
     "vue-router": "^3.0.1",
     "vue-scrollto": "^2.9.0"
   },

diff --git a/src/_app.scss b/src/_app.scss
@@ -9,3 +9,5 @@
 @include foundation-typography;
 @include foundation-forms;
 @include foundation-button;
+
+@import '~assets/style/animations';
diff --git a/src/assets/images/bottom-background.svg b/src/assets/images/bottom-background.svg
diff --git a/src/assets/images/cloud-second-left.svg b/src/assets/images/cloud-second-left.svg
diff --git a/src/assets/images/habitat.svg b/src/assets/images/habitat.svg
diff --git a/src/assets/images/hero-background.svg b/src/assets/images/hero-background.svg
diff --git a/src/assets/style/_animations.scss b/src/assets/style/_animations.scss
@@ -0,0 +1,34 @@
+
+@keyframes hero-height-entrance-animation {
+  from {
+    height: 100vh;
+  } to {
+    height: 550px;
+  }
+}
+
+@keyframes hero-cloud-left-entrance-animation {
+  from {
+    transform: translateX(-100%);
+  } to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes hero-cloud-second-left-entrance-animation {
+  from {
+    left: 0;
+    transform: translateX(-100%);
+  } to {
+    left: 120px;
+    transform: translateX(0);
+  }
+}
+
+@keyframes hero-cloud-right-entrance-animation {
+  from {
+    transform: translateX(100%);
+  } to {
+    transform: translateX(0);
+  }
+}
diff --git a/src/assets/style/_gradients.scss b/src/assets/style/_gradients.scss
diff --git a/src/components/Contact-form.vue b/src/components/Contact-form.vue
@@ -2,16 +2,16 @@
   .lead-form
     .long-text.form-entry
       label(for='lead-name') Nombre
-      input(type='text' v-model='lead.name')
+      input(type='text' v-model='lead.name' id='lead-name')
     .short-text.form-entry
-      label(for='lead-name') Empresa
-      input(type='text' v-model='lead.company')
+      label(for='lead-company') Empresa
+      input(type='text' v-model='lead.company' id='lead-company')
     .short-text.form-entry
-      label(for='lead-name') Email
-      input(type='text' v-model='lead.email')
+      label(for='lead-email') Email
+      input(type='text' v-model='lead.email' id='lead-email')
     .large-text.form-entry
-      label(for='lead-name') ¿Cómo podemos ayudarte?
-      textarea(v-model='lead.message' rows='3')
+      label(for='lead-message') ¿Cómo podemos ayudarte?
+      textarea(v-model='lead.message' rows='3' id='lead-message')
     .form-control
       button(@click='submit') ¡Comencémos!
 </template>

diff --git a/src/components/Contact-header.vue b/src/components/Contact-header.vue
@@ -7,6 +7,7 @@
 <style lang='scss'>
 .contact-header {
   text-align: center;
+  cursor: default;
 
   @include breakpoint(small) {
     margin-bottom: mobile-vw(42px);

diff --git a/src/components/Contact.vue b/src/components/Contact.vue
@@ -15,3 +15,10 @@ export default {
   }
 }
 </script>
+
+<style lang='scss'>
+  .contact {
+    position: relative;
+    z-index: 2;
+  }
+</style>
diff --git a/src/components/Footing.vue b/src/components/Footing.vue
@@ -19,6 +19,9 @@ export default {
 
 <style lang="scss">
 .footing {
+  position: relative;
+  z-index: 2;
+
   @include breakpoint(small) {
     margin-top: mobile-vw(80px);
     padding: mobile-vw(26px) mobile-vw(36px);
@@ -33,6 +36,7 @@ export default {
 
   .footing-copyrights {
     display: inline-block;
+    cursor: default;
 
     .footing-logo {
       display: inline-block;

diff --git a/src/components/Hero-clouds.vue b/src/components/Hero-clouds.vue
@@ -1,16 +1,61 @@
 <template lang='pug'>
   .hero-clouds
-    .cloud.left
-    .cloud.right
+    .cloud.left(:class='{ animate }')
+    .cloud.second-left(:class='{ animate }')
+    .cloud.right(:class='{ animate }')
 </template>
 
+<script>
+export default {
+  data () {
+    return {
+      animate: false
+    }
+  },
+
+  mounted () {
+    window.addEventListener('load', () => {
+      this.animate = true
+    })
+  }
+}
+</script>
+
 <style lang='scss' scoped>
 .hero-clouds .cloud {
   position: absolute;
   background-repeat: no-repeat;
   background-size: contain;
   background-position-y: center;
 
+  &.left,
+  &.second-left {
+    transform: translateX(-100%);
+  }
+
+  &.right {
+    transform: translateX(100%);
+  }
+
+  &.animate {
+    animation-fill-mode: forwards;
+    animation-timing-function: cubic-bezier(.01,.4,.33,.99); // ease-out;
+    animation-duration: 450ms;
+    animation-delay: 2s;
+
+    &.left {
+      animation-name: hero-cloud-left-entrance-animation;
+    }
+
+    &.second-left {
+      animation-name: hero-cloud-second-left-entrance-animation;
+    }
+
+    &.right {
+      animation-name: hero-cloud-right-entrance-animation;
+    }
+  }
+
   &.left {
     left: 0;
     background-image: url(~assets/images/cloud-left.svg);
@@ -29,13 +74,22 @@
     }
   }
 
+  &.second-left {
+    @include show-for(large);
+    background-image: url(~assets/images/cloud-second-left.svg);
+    background-position-x: left;
+    bottom: 236px;
+    width: 105px;
+    height: 92px;
+  }
+
   &.right {
     right: 0;
     background-image: url(~assets/images/cloud-right.svg);
     background-position-x: right;
 
     @include breakpoint(small) {
-      bottom: 14vw;
+      bottom: 4vw;
       width: 34vw;
       height: 34vw;
     }