minor refinments

docs-assets/css/docs.css

@@ -42,8 +42,8 @@ h1, h2, h3, h4, h5, h6 {
   padding-top: 50px;
   padding-bottom: 50px;
   text-align: center;
-  -webkit-animation-name: fadeintext;
-  animation-name: fadeintext;
+  -webkit-animation-name: fadein;
+  animation-name: fadein;
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
 }
@@ -65,6 +65,10 @@ h1, h2, h3, h4, h5, h6 {
   padding: 0;
   list-style: none;
   text-align: center;
+  -webkit-animation-name: fadein;
+  animation-name: fadein;
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
 }
 .social li {
   height: 20px;
@@ -202,6 +206,10 @@ hr {
     background-image: url("../img/iphone.png");
     background-size: 100%;
     background-repeat: no-repeat;
+    -webkit-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
   }
 
   .iphone .iphone-content {
@@ -417,24 +425,7 @@ hr {
     margin-right: -30px;
   }
 }
-@-webkit-keyframes fadeintext {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0.9);
-  }
-
-  50% {
-    opacity: 0;
-    -webkit-transform: scale(0.9);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-  }
-}
-
-@-webkit-keyframes fadeinsocial {
+@-webkit-keyframes fadein {
   0% {
     opacity: 0;
     -webkit-transform: scale(0.9);

docs-assets/js/docs.js

@@ -88,8 +88,12 @@ $(function() {
     if(pageHeight - currentTop < footerHeight + contentPadding + 1400) {
       iphone[0].className = "iphone iphone-bottom";
       iphone[0].setAttribute('style','')
+    // } else if((iphone.initialTop - currentTop) <= iphone.dockingOffset) {
+    //   iphone[0].className = "iphone iphone-fixed";
+    //   iphone.css({top: iphone.dockingOffset})
     } else {
       iphone[0].className = "iphone iphone-fixed";
+      iphone.css({top: iphone.dockingOffset})
     }
 
     // Injection of components into phone

lib/sass/docs.scss

@@ -41,7 +41,7 @@ h1, h2, h3, h4, h5, h6 {
   padding-top: 50px;
   padding-bottom: 50px;
   text-align: center;
-  @include animation-name(fadeintext);
+  @include animation-name(fadein);
   @include animation-duration(2s);
 
   .docs-title {
@@ -67,6 +67,8 @@ h1, h2, h3, h4, h5, h6 {
   padding: 0;
   list-style: none;
   text-align: center;
+  @include animation-name(fadein);
+  @include animation-duration(2s);
 
   li {
     height: 20px;
@@ -205,6 +207,8 @@ hr {
     background-image: url("../img/iphone.png");
     background-size: 100%;
     background-repeat: no-repeat;
+    @include animation-name(fadein);
+    @include animation-duration(2s);
   }
   .iphone .iphone-content {
     position: absolute;
@@ -353,22 +357,7 @@ hr {
 // Animations
 // --------------------------------------------------
 
-@-webkit-keyframes fadeintext {
-  0% {
-   opacity: 0;
-   -webkit-transform: scale(.9);
-  }
-  50% {
-   opacity: 0;
-   -webkit-transform: scale(.9);
-  }
-  100% {
-   opacity: 1;
-   -webkit-transform: scale(1);
-  }
-}
-
-@-webkit-keyframes fadeinsocial {
+@-webkit-keyframes fadein {
   0% {
    opacity: 0;
    -webkit-transform: scale(.9);