Add new intro

docs/_sass/index.sass

@@ -1,148 +1,112 @@
-@keyframes floatUp
-  0%
-    box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
-    transform: scale(0.86)
-  67%
-    box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
-    transform: scale(1)
-  100%
-    box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
-    transform: scale(1)
+.intro-content
+  margin-left: auto
+  margin-right: auto
+  max-width: 440px
 
-@keyframes strokePath
-  from
-    stroke-dashoffset: 880
-  to
-    stroke-dashoffset: 0
+.intro-title
+  font-weight: $weight-normal
+  line-height: 1.375
+  strong
+    font-weight: $weight-semibold
 
-@keyframes fadeIn
-  from
-    opacity: 0
-    transform: scale(0.86)
-  to
-    opacity: 1
-    transform: scale(1)
+.intro-ghbtns
+  height: 30px
 
-@keyframes fadeOut
-  0%
-    opacity: 1
-    transform: scale(0.86)
-  67%
-    opacity: 1
-    transform: scale(0.86)
-  100%
-    opacity: 0
-    transform: scale(1)
-
-@keyframes slideDown
-  0%
-    opacity: 0
-    transform: translateY(-10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-@keyframes slideUp
-  0%
-    opacity: 0
-    transform: translateY(10px)
-  100%
-    opacity: 1
-    transform: translateY(0)
-
-$curve: cubic-bezier(0, 0.71, 0.29, 1)
-
-#b
-  // animation-delay: 1s
-  animation-duration: 1.5s
-  animation-fill-mode: both
-  animation-name: floatUp
-  animation-timing-function: $curve
-  border-radius: 24px
-  display: inline-block
-  height: 240px
-  margin-bottom: 40px
-  position: relative
-  vertical-align: top
-  width: 240px
-  svg
-    +overlay
-    display: block
-    height: 240px
-    width: 240px
-    &:first-child
-      animation-duration: 1.5s
-      animation-fill-mode: both
-      animation-name: fadeOut
-      animation-timing-function: $curve
-      g
-        animation-duration: 1s
-        animation-fill-mode: both
-        animation-name: strokePath
-        animation-timing-function: $curve
-        fill: none
-        stroke: $turquoise
-        stroke-dasharray: 880
-        stroke-width: 2px
-    &:last-child
-      animation-delay: 1s
-      animation-duration: 1s
-      animation-fill-mode: both
-      animation-name: fadeIn
-      animation-timing-function: $curve
-      g
-        fill: $turquoise
-  +mobile
-    border-radius: 16px
-    height: 160px
-    width: 160px
-
-#bulma
-  animation: slideDown 500ms both
-  // animation-delay: 1s
-
-#modern-framework
-  animation: slideUp 500ms both
-  animation-delay: 0.2s
-
-#npm
-  align-items: center
-  animation: fadeIn 500ms both
-  animation-delay: 0.4s
-  background: none
-  display: flex
-  justify-content: center
-  margin: -10px 0 20px
-  code
-    background: $background
-    border-radius: $radius
-    color: $primary
-    display: inline-block
-    font-size: 16px
-    padding: 16px 32px
-
-#ghbtns
-  animation: slideDown 500ms both
-  animation-delay: 0.6s
-
-html.route-index #carbon
-  animation: slideUp 500ms both
-  animation-delay: 0.8s
-
-#download
-  animation: fadeIn 500ms both
-  animation-delay: 1s
-
-#grid
-  .notification
-    padding-left: 0
-    padding-right: 0
-
-#message
-  display: none
-
-#tweet
-  background: $white
+.intro-npm
+  background: $black-ter
   border-radius: $radius-large
-  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-  padding: 1.5rem
+  color: $white
+  display: flex
+  font-size: 15px
+  justify-content: space-between
+  line-height: 20px
+  padding: 15px 25px
+  position: relative
+  code
+    font-size: inherit
+    -moz-osx-font-smoothing: grayscale
+    -webkit-font-smoothing: antialiased
+  .intro-npm-copy
+    border-radius: $radius
+    color: $yellow
+    cursor: pointer
+    margin: -2px -7px -3px
+    padding: 2px 7px 3px
+    &:hover
+      background-color: $yellow
+      color: $black-ter
+    &.is-success,
+    &.is-error
+      color: $white
+      pointer-events: none
+      text-decoration: none
+    &.is-success
+      background-color: $green
+    &.is-error
+      background-color: $red
+  \::-moz-selection
+    background: $yellow
+    color: $black-ter
+  \::selection
+    background: $yellow
+    color: $black-ter
+
+.intro-buttons
+  margin-top: 1.5rem
+  .button
+    padding-left: 1.375em
+    padding-right: 1.375em
+
+.intro-video
+  background-color: lavender
+  margin-left: auto
+  margin-right: auto
+  max-width: 640px
+  position: relative
+
+.intro-iframe
+  padding-top: 52.8125%
+  iframe
+    height: 100%
+    left: 0
+    position: absolute
+    top: 0
+    width: 100%
+
++mobile
+  .intro-buttons
+    .button
+      display: flex
+      width: 100%
+      &.is-light
+        margin-top: 0.5rem
+
++tablet
+  .intro-title
+    font-size: 2.25rem
+  .intro-buttons
+    align-items: center
+    display: flex
+    justify-content: space-between
+
++touch
+  .intro-column.is-video,
+  .intro-carbon
+    margin-top: 1.5rem
+
++desktop
+  .intro-columns
+    display: flex
+    justify-content: center
+  .intro-column
+    width: calc(50% - 1.5rem)
+    &.is-content
+      margin-right: 1.5rem
+    &.is-video
+      margin-left: 1.5rem
+  .intro-title
+    margin-top: -11px
+    &:not(:last-child)
+      margin-bottom: 20px
+  .intro-carbon
+    margin-top: 3rem

docs/_sass/override.sass

@@ -1,13 +1,3 @@
-.button
-  +tablet
-    small
-      color: $text
-      left: 0
-      margin-top: 10px
-      position: absolute
-      top: 100%
-      width: 100%
-
 .content
   .highlighter-rouge
     &:not(:last-child)