update taglines/tagline transitions

pages/index.vue

@@ -47,12 +47,10 @@ export default {
       currentTaglineIndex: -1,
       taglines: [
         'the essence of the image',
-        'tagline two',
-        'tagline three',
-        'tagline four',
-        'tagline fove',
-        'tagline soix',
-        'tagline servienne',
+        'an image of the essential',
+        'a solitary instance',
+        'an eternal instance',
+        'I imagine myself',
       ],
     }
   },
@@ -74,7 +72,7 @@ export default {
   mounted () {
     if (this.bgImages.length > 1) {
       this.setNextIndex()
-      this.nextTagline()
+      // this.nextTagline()
     }
   },
 
@@ -91,8 +89,10 @@ export default {
 
     handleImageLoaded () {
       window.setTimeout(() => {
-        this.setNextIndex()
         this.nextTagline()
+      }, 700)
+      window.setTimeout(() => {
+        this.setNextIndex()
       }, 6000)
     },
 
@@ -115,10 +115,11 @@ $padding: 1rem;
 
   padding: $site-menu__header-height + $padding $padding $padding;
 
-  font-size: 1rem;
+  font-size: .5rem;
 
   @media (min-width: $bp__layout) {
     padding: $padding $padding $padding $site-menu__header-width + $padding;
+    font-size: 1rem;
   }
 }
 
@@ -175,8 +176,12 @@ $padding: 1rem;
   width: 100%;
   max-width: 80rem;
   margin: 0 auto;
-  padding: 2rem 3rem 1rem;
 
+  padding: 1rem 0 0;
+
+  @media (min-width: $bp__layout) {
+    padding: 2rem 3rem 1rem;
+  }
 }
 
 .heading {
@@ -196,11 +201,11 @@ $padding: 1rem;
 .fade {
   $timing: .7;
   &-enter-active {
-    transition: opacity 4s * $timing 1.5s * $timing ease-in;
+    transition: opacity 5s * $timing .5s ease-in;
   }
 
   &-leave-active {
-    transition: opacity 2s * $timing ease-out .2s;
+    transition: opacity 2s * $timing ease-out;
   }
 
   &-enter, &-leave-to {