Anim init

docs/_sass/book.sass

@@ -45,6 +45,7 @@ $book-beige: #FFEDD7
 
 .bd-book-content
   @extend %bd-box
+  box-shadow: 0 3rem 3rem -1rem rgba($black, 0.2)
   max-width: 520px
   padding: 3rem
 

docs/_sass/focus.sass

@@ -0,0 +1,130 @@
+@keyframes bdGrow
+  from
+    transform: scale(0)
+  to
+    transform: scale(1)
+
+$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1)
+$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86)
+$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
+
+$delay: 250ms
+
+%bd-focus-animation
+  animation-duration: 500ms
+  animation-fill-mode: both
+  animation-timing-function: $cubic-less-dramatic
+  transform-origin: center center
+
+.bd-focus-mobile,
+.bd-focus-tablet,
+.bd-focus-desktop
+  @extend %bd-focus-animation
+  animation-name: bdGrow
+  transform-origin: bottom center
+
+.bd-focus-tablet
+  animation-delay: $delay
+
+.bd-focus-desktop
+  animation-delay: $delay * 2
+
+$cube-factor: 10px
+
+@keyframes moveCube1
+  0%
+    transform: translate3d(0, (-5 * $cube-factor), 0)
+    opacity: 0
+  25%, 100%
+    transform: translate3d(0, 0, 0)
+    opacity: 1
+
+@keyframes moveCube2
+  0%
+    transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
+    opacity: 0
+  25%, 100%
+    transform: translate3d(0, 0, 0)
+    opacity: 1
+
+@keyframes moveCube3
+  0%
+    transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
+    opacity: 0
+  25%, 100%
+    transform: translate3d(0, 0, 0)
+    opacity: 1
+
+%bd-focus-animation-cube
+  @extend %bd-focus-animation
+  animation-iteration-count: infinite
+  animation-direction: alternate
+  animation-duration: 2000ms
+
+.bd-focus-cube-1
+  @extend %bd-focus-animation-cube
+  animation-name: moveCube1
+
+.bd-focus-cube-2
+  @extend %bd-focus-animation-cube
+  animation-name: moveCube2
+  animation-delay: $delay
+
+.bd-focus-cube-3
+  @extend %bd-focus-animation-cube
+  animation-name: moveCube3
+  animation-delay: $delay * 2
+
+@keyframes bdJellyGrow
+  0%
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  3.4%
+    transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  4.7%
+    transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  6.81%
+    transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  9.41%
+    transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  10.21%
+    transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  13.61%
+    transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  14.11%
+    transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  17.52%
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  18.72%
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  21.32%
+    transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  24.32%
+    transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  25.23%
+    transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  29.03%
+    transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  29.93%
+    transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  35.54%
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  36.74%
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  41.04%
+    transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  44.44%
+    transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  52.15%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  59.86%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  63.26%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  75.28%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  85.49%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  90.69%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+  100%
+    transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

docs/_sass/index.sass

@@ -156,24 +156,45 @@
     .title
       color: $link
 
-.bd-focus-icon
-  .fa-mobile-alt
-    color: $purple
-    margin-right: -20px
-  .fa-tablet-alt
-    color: $red
-    margin-left: -20px
-  .fa-desktop
-    color: $orange
-    margin-left: -20px
-    position: relative
-    top: 2px
-  .fa-cubes
-    color: $green
-  .fa-css3
-    color: $blue
-  .fa-github-alt
-    color: $github
+.bd-focus-mobile
+  color: $purple
+  margin-right: -20px
+
+.bd-focus-tablet
+  color: $red
+
+.bd-focus-desktop
+  color: $orange
+  position: relative
+  top: 2px
+
+.bd-focus-cubes
+  position: relative
+  height: 3rem
+  margin: 0 auto
+  width: 3rem
+
+.bd-focus-cube
+  color: $green
+  position: absolute
+
+.bd-focus-cube-1
+  left: 0
+  top: 0
+
+.bd-focus-cube-2
+  left: -1rem
+  top: 23px
+
+.bd-focus-cube-3
+  left: 1rem
+  top: 23px
+
+.bd-focus-css3
+  color: $blue
+
+.bd-focus-github
+  color: $github
 
 // Intro
 

docs/_sass/route.sass

@@ -1,21 +0,0 @@
-html.route-index
-  .title.is-2,
-  .title.is-3
-    position: relative
-    a
-      color: $text-strong
-      position: relative
-    a:hover
-      color: $blue
-  .hero .title.is-2 a
-    color: $white
-  .hero .title.is-2 a:hover
-    color: $white
-  .hero.is-primary a.column,
-  .hero.is-primary a.column:hover
-    color: $white
-  .hero.is-primary a.column:hover .title strong
-    border-bottom: 1px solid
-  @media screen and (max-width: 979px)
-    .title.is-2 a
-      padding-left: 0