Top-level pages

docs/_sass/example.sass

@@ -46,7 +46,7 @@
 // Snippet
 .bd-snippet
   +block
-  border: 1px solid $yellow
+  border: 2px solid $background
   margin-top: 2rem
   position: relative
   &::before

docs/_sass/global.sass

@@ -40,8 +40,12 @@ $carbon-poweredby-height: 20px
     min-height: $carbon-height
     position: relative
     &:hover
-      .carbon-img
-        opacity: 0.9
+      .carbon-img::after
+        +overlay
+        background-color: rgba(#000, 0.05)
+        content: ""
+        display: block
+        right: $carbon-spacing
   .carbon-img
     bottom: 0
     float: left
@@ -70,7 +74,7 @@ $carbon-poweredby-height: 20px
       color: $link
   .carbon-poweredby
     bottom: 0
-    color: $text-light
+    color: $grey-light
     display: inline
     font-size: $size-small
     line-height: $carbon-poweredby-height

docs/_sass/highlight.sass

@@ -1,6 +1,8 @@
 .highlight
   background-color: #f5f5f5
   color: #586e75
+  pre
+    font-size: 12px
   .c
     color: #93a1a1
   .err,

docs/_sass/main.sass

@@ -1,5 +1,3 @@
-$main-spacing: 2.5rem
-
 .bd-main
   overflow: hidden
   position: relative
@@ -32,6 +30,20 @@ $main-spacing: 2.5rem
     &:hover
       background-color: $background
 
+.bd-prev-next-bis
+  border-top: 2px solid $background
+  display: flex
+  justify-content: space-between
+  margin-top: $main-spacing
+  a
+    margin-top: $main-spacing / 2
+
+.bd-prev-next-bis-previous
+  margin-right: auto
+
+.bd-prev-next-bis-next
+  margin-left: auto
+
 .bd-header
   border-bottom: 2px solid $background
   margin-bottom: $main-spacing
@@ -72,6 +84,12 @@ $main-spacing: 2.5rem
       color: $link
   &:not(:last-child)
     margin-bottom: 0.5rem
+  &.is-active
+    .bd-category-toggle
+      .icon
+        transform: rotate(180deg)
+    .bd-category-list
+      display: block
 
 .bd-category-header
   position: relative
@@ -84,6 +102,9 @@ $main-spacing: 2.5rem
   justify-content: flex-end
   .icon
     font-size: 0.75rem
+    transform-origin: center
+    transition-duration: $speed
+    transition-property: transform
 
 .bd-category-name
   color: $text-strong
@@ -101,8 +122,6 @@ $main-spacing: 2.5rem
         color: $link
   a
     color: $text-light
-  &.is-active
-    display: block
 
 +touch
   .bd-lead,
@@ -146,7 +165,7 @@ $sidebar-width: 14rem
   .bd-header-carbon
     flex-grow: 0
     flex-shrink: 0
-    margin: -15px 0 -15px 1.5rem
+    margin: -15px 0 -15px $main-spacing
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem

docs/_sass/specific.sass

@@ -1,6 +1,75 @@
+.bd-links
+  counter-reset: bd-links
+
+.bd-link
+  border-radius: $radius-large
+  color: $text-light
+  display: block
+  font-size: $size-5
+  padding: 1rem 3rem 1.5rem
+  strong
+    font-weight: $weight-semibold
+  &:hover
+    background-color: $white-bis
+
+.bd-link-name
+  position: relative
+  &::before
+    color: $link
+    counter-increment: bd-links
+    content: counter(bd-links)
+    font-weight: $weight-normal
+    position: absolute
+    right: calc(100% + 0.625em)
+
++desktop
+  .bd-links
+    display: flex
+    flex-wrap: wrap
+  .bd-link
+    width: 50%
+
+.bd-link-name
+  color: $text-strong
+  font-size: $size-4
+  font-weight: $weight-semibold
+
+.bd-docs
+  display: flex
+  flex-wrap: wrap
+
+.bd-doc
+  margin: 0 3rem 1.5rem 0
+  +mobile
+    min-width: calc(50% - 3rem)
+  +tablet
+    min-width: calc(33.3333% - 3rem)
+
+.bd-doc-title
+  color: $text-strong
+  a
+    color: currentColor
+    &:hover
+      color: $link
+  &:not(:last-child)
+    margin-bottom: 0.75rem
+
+.bd-boxes
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+
+.bd-box
+  border: 4px solid $background
+  border-radius: $radius
+
+.bd-box-header
+  text-align: center
+
 .bd-typo
+  text-align: center
   &:not(:first-child)
-    margin-top: 3rem
+    margin-top: $main-spacing
 
 .bd-has-text-rss
   color: $rss
@@ -22,10 +91,9 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes
 
 .bd-navbar-item-expo
   &:hover
-    color: #744F09 !important
+    color: #8F6900 !important
     .icon
-      color: #FF7B00 !important
-
+      color: #F4B300 !important
 
 .bd-special-shadow
   background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))