Add focus

docs/_sass/example.sass

@@ -5,7 +5,7 @@
   position: relative
   &::before
     background: $yellow
-    border-radius: $radius $radius 0 0
+    border-radius: $radius-small $radius-small 0 0
     bottom: 100%
     color: $yellow-invert
     content: "Example"
@@ -53,6 +53,7 @@
     content: "Snippet"
     align-items: stretch
     display: flex
+    margin-left: -1px
 
 .bd-snippet-preview
   padding: 1.5rem

docs/_sass/index.sass

@@ -1,3 +1,32 @@
+.bd-focus
+  margin: 6rem auto 0
+  max-width: 1080px
+
+.bd-focus-item
+  .subtitle
+    color: $grey-light
+    strong
+      color: currentColor
+
+.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
+
 .intro-content
   margin-left: auto
   margin-right: auto

docs/_sass/main.sass

@@ -50,7 +50,6 @@
   padding-bottom: $main-spacing
   .subtitle
     color: $text-light
-    max-width: 16em
     strong
       color: currentColor
   #meta
@@ -155,6 +154,8 @@ $sidebar-width: 14rem
   .bd-lead
     margin-left: -3rem
     padding: 3rem
+    &:last-child
+      margin-right: -3rem
   .bd-header
     align-items: center
     display: flex
@@ -165,7 +166,7 @@ $sidebar-width: 14rem
   .bd-header-carbon
     flex-grow: 0
     flex-shrink: 0
-    margin: -15px 0 -15px $main-spacing
+    margin: -15px 0 -15px ($main-spacing * 2)
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/_sass/specific.sass

@@ -90,23 +90,23 @@
 .bd-has-text-star
   color: $star
 
-$navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
+// $navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
 
-@each $name, $color in $navbar-items
-  .bd-navbar-item-#{$name}
-    .icon
-      color: $color
-    &:hover
-      background-color: $color !important
-      color: #fff !important
-      .icon
-        color: currentColor !important
+// @each $name, $color in $navbar-items
+//   .bd-navbar-item-#{$name}
+//     .icon
+//       color: $color
+//     &:hover
+//       background-color: $color !important
+//       color: #fff !important
+//       .icon
+//         color: currentColor !important
 
-.bd-navbar-item-expo
-  &:hover
-    color: #8F6900 !important
-    .icon
-      color: #F4B300 !important
+// .bd-navbar-item-expo
+//   &:hover
+//     color: #8F6900 !important
+//     .icon
+//       color: #F4B300 !important
 
 .bd-special-shadow
   background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))