Add main layout

docs/_sass/global.sass

@@ -3,6 +3,7 @@ svg
   max-width: 100%
 
 $carbon-space: 15px
+$carbon-width: 300px
 
 #carboncontainer
   align-items: center
@@ -10,8 +11,9 @@ $carbon-space: 15px
   justify-content: center
   margin-left: auto
   margin-right: auto
-  max-width: 340px
+  max-width: $carbon-width
   min-height: 120px + ($carbon-space * 2)
+  min-width: 280px
 
 #carbon
   flex-grow: 1
@@ -21,7 +23,7 @@ $carbon-space: 15px
   &:hover
     box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
   +tablet
-    width: 340px
+    width: $carbon-width
 
 #carbonads
   font-size: 14px

docs/_sass/main.sass

@@ -0,0 +1,64 @@
+.bd-main
+  overflow: hidden
+  position: relative
+
+// Lead
+
+.bd-lead
+  // border: 1px solid lightskyblue
+  position: relative
+
+.bd-breadcrumb
+  margin-bottom: 2.5rem
+
+.bd-header
+  margin-bottom: 2.5rem
+  .subtitle
+    color: $text-light
+    strong
+      color: currentColor
+
+// Side
+
+.bd-side,
+.bd-side-background
+  background-color: $white-bis
+  // border: 1px solid coral
+
+.bd-side
+  position: relative
+
+.bd-side-background
+  bottom: 0
+  left: 50%
+  position: absolute
+  right: 0
+  top: 0
+
++touch
+  .bd-lead,
+  .bd-side
+    padding: 1.5rem
+
++mobile
+  .bd-side-background
+    display: none
+
++tablet
+  .bd-duo
+    display: flex
+  .bd-lead
+    background-color: $white
+    overflow: hidden
+    flex-grow: 1
+    flex-shrink: 1
+  .bd-side
+    flex: 0 0 300px
+
++desktop
+  .bd-main
+    padding: 0 3rem
+  .bd-lead
+    padding: 3rem 3rem 3rem 0
+  .bd-side
+    padding: 3rem 0 3rem 1.5rem

docs/_sass/specific.sass

@@ -1,3 +1,28 @@
+.bd-has-text-rss
+  color: $rss
+
+.bd-has-text-star
+  color: $star
+
+$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
+
+.bd-navbar-item-expo
+  &:hover
+    color: #744F09 !important
+    .icon
+      color: #FF7B00 !important
+
+
 .bd-special-shadow
   background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
   height: 8px
@@ -28,13 +53,13 @@
   width: 24px
 
 .button.bd-is-rss
-  background-color: #f26522
+  background-color: $rss
   border-color: transparent
   color: #fff
   &:hover
-    background-color: darken(#f26522, 5%)
+    background-color: darken($rss, 5%)
   &:active
-    background-color: darken(#f26522, 10%)
+    background-color: darken($rss, 10%)
 
 .bd-view-all-versions
   color: $text-light