Update CSS

website/assets/css/_base/_animations.sass

@@ -19,3 +19,10 @@
 
     to
         transform: translate3d(0, 0, 0)
+
+
+//- Element rotates
+
+@keyframes rotate
+    to
+        transform: rotate(360deg)

website/assets/css/_base/_fonts.sass

@@ -1,41 +1,27 @@
 //- 💫 CSS > BASE > FONTS
 
-//  Source Sans Pro
+//  HK Grotesk
 
 @font-face
-    font-family: "Source Sans Pro"
+    font-family: "HK Grotesk"
     font-style: normal
-    font-weight: 400
+    font-weight: 500
-    src: url("/assets/fonts/sourcesanspro-regular.eot")
+    src: url("/assets/fonts/hkgrotesk-semibold.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-semibold.woff") format("woff")
-    src: url("/assets/fonts/sourcesanspro-regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-regular.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-regular.woff") format("woff"), url("/assets/fonts/sourcesanspro-regular.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-regular.svg#source_sans_proregular") format("svg")
 
 @font-face
-    font-family: "Source Sans Pro"
+    font-family: "HK Grotesk"
     font-style: italic
-    font-weight: 400
+    font-weight: 500
-    src: url("/assets/fonts/sourcesanspro-italic.eot")
+    src: url("/assets/fonts/hkgrotesk-semibolditalic.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-semibolditalic.woff") format("woff")
-    src: url("/assets/fonts/sourcesanspro-italic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-italic.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-italic.woff") format("woff"), url("/assets/fonts/sourcesanspro-italic.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-italic.svg#source_sans_proitalic") format("svg")
 
 @font-face
-    font-family: "Source Sans Pro"
+    font-family: "HK Grotesk"
-    font-style: normal
-    font-weight: 700
-    src: url("/assets/fonts/sourcesanspro-bold.eot")
-    src: url("/assets/fonts/sourcesanspro-bold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-bold.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-bold.woff") format("woff"), url("/assets/fonts/sourcesanspro-bold.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-bold.svg#source_sans_probold") format("svg")
-
-@font-face
-    font-family: "Source Sans Pro"
-    font-style: italic
-    font-weight: 700
-    src: url("/assets/fonts/sourcesanspro-bolditalic.eot")
-    src: url("/assets/fonts/sourcesanspro-bolditalic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcesanspro-bolditalic.woff2") format("woff2"), url("/assets/fonts/sourcesanspro-bolditalic.woff") format("woff"), url("/assets/fonts/sourcesanspro-bolditalic.ttf") format("truetype"), url("/assets/fonts/sourcesanspro-bolditalic.svg#source_sans_probold_italic") format("svg")
-
-
-//  Source Code Pro
-
-@font-face
-    font-family: "Source Code Pro"
     font-style: normal
     font-weight: 600
-    src: url("/assets/fonts/sourcecodepro-semibold.eot")
+    src: url("/assets/fonts/hkgrotesk-bold.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-bold.woff") format("woff")
-    src: url("/assets/fonts/sourcecodepro-semibold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/sourcecodepro-semibold.woff") format("woff"), url("/assets/fonts/sourcecodepro-semibold.ttf") format("truetype"), url("/assets/fonts/sourcecodepro-semibold.svg#sourcecodepro_semibold") format("svg")
+
+@font-face
+    font-family: "HK Grotesk"
+    font-style: italic
+    font-weight: 600
+    src: url("/assets/fonts/hkgrotesk-bolditalic.woff2") format("woff2"), url("/assets/fonts/hkgrotesk-bolditalic.woff") format("woff")

website/assets/css/_base/_grid.sass

@@ -15,6 +15,15 @@
         align-items: center
         justify-content: center
 
+    &.o-grid--vcenter
+        align-items: center
+
+    &.o-grid--space
+        justify-content: space-between
+
+    &.o-grid--nowrap
+        flex-wrap: nowrap
+
 
 //- Grid column
 
@@ -22,7 +31,6 @@
     $grid-gutter: 2rem
 
     margin-top: $grid-gutter
-    overflow: hidden
 
     @include breakpoint(min, lg)
         display: flex

website/assets/css/_base/_layout.sass

@@ -12,6 +12,7 @@ body
     animation: fadeIn 0.25s ease
     background: $color-back
     color: $color-front
+    //scroll-behavior: smooth
 
 
 //- Paragraphs
@@ -19,6 +20,9 @@ body
 p
     @extend .o-block, .u-text
 
+p:empty
+    margin-bottom: 0
+
 
 //- Links
 

website/assets/css/_base/_objects.sass

@@ -43,12 +43,25 @@
     position: relative
     padding: 2.5rem 0
     overflow: auto
+    background: $color-subtle-light
+
+    .o-main &
+        border-top-left-radius: $border-radius
 
 
 //- Blocks
 
+.o-section
+    width: 100%
+    max-width: 100%
+
+    &:not(:last-child)
+        margin-bottom: 7rem
+        padding-bottom: 4rem
+        border-bottom: 1px dotted $color-subtle
+
 .o-block
-    margin-bottom: 3rem
+    margin-bottom: 4rem
 
 .o-block-small
     margin-bottom: 2rem
@@ -58,17 +71,18 @@
 
 .o-card
     background: $color-back
-    border-radius: 2px
+    border-radius: $border-radius
-    border: 1px solid $color-subtle
+    box-shadow: $box-shadow
-    padding: 3rem 2.5%
-
 
 //- Box
 
 .o-box
-    background: $color-theme-light
+    background: $color-subtle-light
     padding: 2rem
-    border-left: 4px solid $color-theme
+    border-radius: $border-radius
+
+.o-box__logos
+    padding-bottom: 1rem
 
 
 //- Icons
@@ -77,7 +91,14 @@
     vertical-align: middle
 
     &.o-icon--inline
-        margin: 0 0.5rem 0 0.25rem
+        margin: 0 0.5rem 0 0.1rem
+
+.o-emoji
+    margin-right: 0.75rem
+    vertical-align: text-bottom
+
+.o-badge
+    border-radius: 1em
 
 
 //- SVG
@@ -102,3 +123,45 @@
     fill: currentColor
     vertical-align: middle
     margin: 0 0.5rem
+
+
+//- Embeds
+
+.o-chart
+    max-width: 100%
+
+.cp_embed_iframe
+    border: 1px solid $color-subtle
+    border-radius: $border-radius
+
+
+//- Form fields
+
+.o-field
+    background: $color-back
+    padding: 0 0.25em
+    border-radius: 2em
+    border: 1px solid $color-subtle
+    margin-bottom: 0.25rem
+
+.o-field__input,
+.o-field__button
+    padding: 0 0.35em
+
+.o-field__input
+    width: 100%
+
+.o-field__select
+     background: transparent
+     color: $color-dark
+     height: 1.4em
+     border: none
+     text-align-last: center
+
+.o-empty:empty:before
+    @include size(1em)
+    border-radius: 50%
+    content: ""
+    display: inline-block
+    background: $color-red
+    vertical-align: middle

website/assets/css/_base/_reset.sass

@@ -1,6 +1,6 @@
 //- 💫 CSS > BASE > RESET
 
-*
+*, *:before, *:after
     box-sizing: border-box
     padding: 0
     margin: 0
@@ -94,7 +94,10 @@ ul, ol
 
 input, button
     appearance: none
+    background: transparent
 
 button
-    background: transparent
     cursor: pointer
+
+progress
+    appearance: none

website/assets/css/_base/_utilities.sass

@@ -2,38 +2,53 @@
 
 //- Text
 
+.u-text,
+.u-text-small,
+.u-text-tiny
+    font-family: $font-primary
+
 .u-text
-    font: 1.5rem/#{1.55} $font-primary
+    font-size: 1.35rem
+    line-height: 1.5
 
 .u-text-small
-    font: 1.4rem/#{1.375} $font-primary
+    font-size: 1.3rem
+    line-height: 1.375
 
 .u-text-tiny
-    font: 1.1rem/#{1.375} $font-primary
+    font-size: 1.1rem
-
+    line-height: 1.375
 
 //- Labels & Tags
 
 .u-text-label
-    font: normal 600 1.4rem/#{1.5} $font-code
+    font: normal 600 1.4rem/#{1.5} $font-secondary
     text-transform: uppercase
 
+    &.u-text-label--light,
     &.u-text-label--dark
         display: inline-block
+        border-radius: 1em
+        padding: 0 1rem 0.15rem
+
+    &.u-text-label--dark
         background: $color-dark
         box-shadow: inset 1px 1px 1px rgba($color-front, 0.25)
         color: $color-back
-        padding: 0 0.75rem
         margin: 1.5rem 0 0 2rem
-        border-radius: 2px
+
+    &.u-text-label--light
+        background: $color-back
+        color: $color-theme
+        margin-bottom: 1rem
 
 .u-text-tag
     display: inline-block
-    font: 600 1.1rem/#{1} $font-code
+    font: 600 1.1rem/#{1} $font-secondary
     background: $color-theme
     color: $color-back
-    padding: 0.15em 0.25em
+    padding: 0.15em 0.5em 0.35em
-    border-radius: 2px
+    border-radius: 1em
     text-transform: uppercase
     vertical-align: middle
 
@@ -45,7 +60,7 @@
 //- Headings
 
 .u-heading
-    margin-bottom: 2rem
+    margin-bottom: 1em
 
     @include breakpoint(max, md)
         word-wrap: break-word
@@ -53,12 +68,29 @@
     &:not(:first-child)
         padding-top: 3.5rem
 
+    &.u-heading--title:after
+        content: ""
+        display: block
+        width: 10%
+        min-width: 6rem
+        height: 6px
+        background: $color-theme
+        margin-top: 3rem
+
 .u-heading-0
-    font: normal bold 7rem/#{1} $font-primary
+    font: normal 600 7rem/#{1} $font-secondary
+
+    @include breakpoint(max, sm)
+        font-size: 6rem
+
 
 @each $level, $size in $headings
     .u-heading-#{$level}
-        font: normal bold #{$size}rem/#{1.25} $font-primary
+        font: normal 500 #{$size}rem/#{1.1} $font-secondary
+
+.u-heading__teaser
+    margin-top: 2rem
+    font-weight: normal
 
 
 //- Links
@@ -66,31 +98,59 @@
 .u-link
     color: $color-theme
     border-bottom: 1px solid
+    transition: color 0.2s ease
+
+    &:hover
+        color: $color-theme-dark
+
+.u-hide-link.u-hide-link
+    border: none
+    color: inherit
+
+    &:hover
+        color: inherit
 
 .u-permalink
     position: relative
 
+    &:before
+        content: "\00b6"
+        font-size: 0.9em
+        font-weight: normal
+        color: $color-subtle
+        @include position(absolute, top, left, 0.15em, -2.85rem)
+        opacity: 0
+        transition: opacity 0.2s ease
+
+    &:hover:before
+        opacity: 1
+
+    &:active:before
+        color: $color-theme
+
     &:target
         display: inline-block
-        padding-top: $nav-height * 1.25
 
-        & + *
+        &:before
-            margin-top: $nav-height * 1.25
+            bottom: 0.15em
+            top: initial
 
-.u-permalink__icon
-    @include position(absolute, bottom, left, 0.35em, -2.75rem)
-    @include size(1.5rem)
-    color: $color-subtle
 
-    .u-permalink:hover &
+[id]:target
-        color: $color-subtle-dark
+    padding-top: $nav-height * 1.25
 
-    .u-permalink:active &
-        color: $color-theme
 
 
 //- Layout
 
+.u-float-left
+    float: left
+    margin-right: 1rem
+
+.u-float-right
+    float: right
+    margin-left: 1rem
+
 .u-text-center
     text-align: center
 
@@ -104,14 +164,20 @@
     padding: 0.5em 0.75em
 
 .u-padding-medium
-    padding: 2.5rem
+    padding: 1.8rem
 
 .u-inline-block
     display: inline-block
 
+.u-flex-full
+    flex: 1
+
 .u-nowrap
     white-space: nowrap
 
+.u-wrap
+    white-space: pre-wrap
+
 .u-break.u-break
     word-wrap: break-word
     white-space: initial
@@ -123,13 +189,10 @@
     border: 1px solid $color-subtle
     border-radius: 2px
 
-.u-border-bottom
-    border: 1px solid $color-subtle
-
 .u-border-dotted
-    border-top: 1px dotted $color-subtle
+    border-bottom: 1px dotted $color-subtle
 
-@each $name, $color in (theme: $color-theme, subtle: $color-subtle-dark, light: $color-back, red: $color-red, green: $color-green, yellow: $color-yellow)
+@each $name, $color in (theme: $color-theme, dark: $color-dark, subtle: $color-subtle-dark, light: $color-back, red: $color-red, green: $color-green, yellow: $color-yellow)
     .u-color-#{$name}
         color: $color
 
@@ -145,6 +208,32 @@
     background: $pattern
 
 
+//- Loaders
+
+.u-loading,
+[data-loading]
+    $spinner-size: 75px
+    $spinner-bar: 8px
+
+    position: relative
+
+    & > *
+        opacity: 0.35
+
+    &:before
+        @include position(absolute, top, left, 0, 0)
+        @include size($spinner-size)
+        right: 0
+        bottom: 0
+        margin: auto
+        content: ""
+        border: $spinner-bar solid $color-subtle
+        border-right: $spinner-bar solid $color-theme
+        border-radius: 50%
+        animation: rotate 1s linear infinite
+        z-index: 10
+
+
 //- Hidden elements
 
 .u-hidden

website/assets/css/_components/_asides.sass

@@ -10,6 +10,8 @@
 
 .c-aside__content
     background: $color-front
+    border-top-left-radius: $border-radius
+    border-bottom-left-radius: $border-radius
     z-index: 10
 
     @include breakpoint(min, md)
@@ -21,12 +23,12 @@
         &:after
             $triangle-size: 2rem
 
-            @include position(absolute, bottom, left, -$triangle-size / 2, 0)
+            @include position(absolute, bottom, left, -$triangle-size / 2, $border-radius / 2)
             @include size(0)
             border-color: transparent
             border-style: solid
             border-top-color: $color-dark
-            border-width: $triangle-size / 2 0 0 $triangle-size
+            border-width: $triangle-size / 2 0 0 calc(#{$triangle-size} - #{$border-radius / 2})
             content: ""
 
     @include breakpoint(max, sm)

website/assets/css/_components/_buttons.sass

@@ -3,23 +3,50 @@
 .c-button
     display: inline-block
     font-weight: bold
-    padding: 0.75em 1em
+    padding: 0.8em 1.1em 1em
     margin-bottom: 1px
-    border: 2px solid
+    border: 2px solid $color-theme
-    border-radius: 2px
+    border-radius: 2em
     text-align: center
-    transition: background 0.25s ease
+    transition: background-color, color 0.25s ease
+
+    &:hover
+        border-color: $color-theme-dark
+
+    &.c-button--small
+        font-size: 1.1rem
+        padding: 0.65rem 1.1rem 0.825rem
 
     &.c-button--primary
         background: $color-theme
         color: $color-back
-        border-color: $color-theme
 
         &:hover
             background: $color-theme-dark
-            border-color: $color-theme-dark
 
     &.c-button--secondary
         background: $color-back
         color: $color-theme
-        border-color: $color-theme
+
+        &:hover
+            color: $color-theme-dark
+
+    &.c-button--secondary-light
+        background: transparent
+        color: $color-back
+        border-color: $color-back
+
+.c-icon-button
+    @include size(35px)
+    background: $color-subtle-light
+    color: $color-subtle-dark
+    border-radius: 50%
+    padding: 0.5rem
+    transition: color 0.2s ease
+
+    &:hover
+        color: $color-theme
+
+    &.c-icon-button--right
+        float: right
+        margin-left: 3rem

website/assets/css/_components/_chat.sass

@@ -24,9 +24,9 @@
         transform: translateX(110%)
 
     &:before
-        @include position(absolute, top, left, 1rem, 2rem)
+        @include position(absolute, top, left, 1.25rem, 2rem)
         content: attr(data-title)
-        font: bold 1.4rem $font-code
+        font: bold 1.4rem $font-secondary
         text-transform: uppercase
         color: $color-back
 
@@ -88,13 +88,18 @@
             background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTguOTg0IDYuNDIybC01LjU3OCA1LjU3OCA1LjU3OCA1LjU3OC0xLjQwNiAxLjQwNi01LjU3OC01LjU3OC01LjU3OCA1LjU3OC0xLjQwNi0xLjQwNiA1LjU3OC01LjU3OC01LjU3OC01LjU3OCAxLjQwNi0xLjQwNiA1LjU3OCA1LjU3OCA1LjU3OC01LjU3OHoiPjwvcGF0aD48L3N2Zz4=)
 
 .c-chat__button
-    @include position(fixed, bottom, right, 0, 2rem)
+    @include position(fixed, bottom, right, 1.5rem, 1.5rem)
-    padding: 1rem 1.5rem
+    z-index: 5
-    background: $color-front
     color: $color-back
-    border-top-left-radius: 4px
+    background: $color-front
-    border-top-right-radius: 4px
+    border-radius: 1em
-    z-index: 20
+    padding: 0.5rem 1.15rem 0.35rem
-    border-color: $color-theme
+    opacity: 0.7
-    border-style: solid
+    transition: opacity 0.2s ease
-    border-width: 1px 1px 0 1px
+
+    &:hover
+        opacity: 1
+
+
+.gitter-open-chat-button
+    display: none

website/assets/css/_components/_code.sass

@@ -4,9 +4,9 @@
 
 .c-code-block
     background: $color-front
-    color: $color-back
+    color: darken($color-back, 20)
     padding: 0.75em 0
-    border-radius: 2px
+    border-radius: $border-radius
     overflow: auto
     width: 100%
     max-width: 100%
@@ -16,6 +16,8 @@
     &.c-code-block--has-icon
         padding: 0
         display: flex
+        border-top-left-radius: 0
+        border-bottom-left-radius: 0
 
 .c-code-block__icon
     padding: 0 0 0 1rem
@@ -43,17 +45,26 @@
         opacity: 0.5
 
 
+//- Code
+
+code
+    -webkit-font-smoothing: subpixel-antialiased
+    -moz-osx-font-smoothing: auto
+
+
 //- Inline code
 
+*:not(a):not(.c-code-block) > code
+    color: $color-dark
+
 *:not(.c-code-block) > code
-    font: normal 600 0.8em/#{1} $font-code
+    font-size: 90%
-    background: darken($color-theme-light, 5)
+    background-color: $color-subtle-light
-    box-shadow: 1px 1px 0 rgba($color-front, 0.05)
+    padding: 0.2rem 0.4rem
-    text-shadow: 1px 1px 0 rgba($color-back, 0.5)
+    border-radius: 0.25rem
-    color: $color-front
+    font-family: $font-code
-    padding: 0.1em 0.5em
+    white-space: nowrap
     margin: 0
-    border-radius: 1px
     box-decoration-break: clone
     white-space: nowrap
 

website/assets/css/_components/_landing.sass

@@ -2,12 +2,11 @@
 
 .c-landing
     background: $color-theme
-    padding-top: 5rem
+    padding-top: $nav-height * 1.5
     width: 100%
 
 .c-landing__wrapper
     background: $pattern
-    padding-bottom: 6rem
     width: 100%
 
 .c-landing__content
@@ -15,9 +14,45 @@
     width: 100%
     min-height: 573px
 
+.c-landing__headlines
+    position: relative
+    top: -1.5rem
+    left: 1rem
+
 .c-landing__title
     color: $color-back
     text-align: center
+    margin-bottom: 0.75rem
+
+.c-landing__blocks
+    @include breakpoint(min, sm)
+        position: relative
+        top: -25rem
+        margin-bottom: -25rem
+
+.c-landing__card
+    padding: 3rem 2.5rem
+
+.c-landing__banner
+    background: $color-theme
+
+.c-landing__banner__content
+    @include breakpoint(min, md)
+        border: 4px solid
+        padding: 1rem 6.5rem 2rem 4rem
+
+
+.c-landing__banner__text
+    font-weight: 500
+
+    strong
+        font-weight: 800
+
+    p
+        font-size: 1.5rem
+
+    @include breakpoint(min, md)
+        padding-top: 7rem
 
 .c-landing__badge
     transform: rotate(7deg)

website/assets/css/_components/_lists.sass

@@ -9,6 +9,8 @@
 
             .c-list__item:before
                 content: counter(li, #{$counter}) '.'
+                font-size: 1em
+                padding-right: 1rem
 
 
 //- List Item
@@ -21,13 +23,14 @@
     &:before
         content: '\25CF'
         display: inline-block
-        font-size: 1em
+        font-size: 0.6em
         font-weight: bold
         padding-right: 1.25rem
         margin-left: -3.75rem
         text-align: right
         width: 2.5rem
         counter-increment: li
+        box-sizing: content-box
 
 
 //- List icon

website/assets/css/_components/_misc.sass

@@ -3,9 +3,8 @@
 .x-terminal
     background: $color-subtle-light
     color: $color-front
-    padding: 4px
+    padding: $border-radius
-    border: 1px dotted $color-subtle
+    border-radius: 1em
-    border-radius: 5px
     width: 100%
 
 .x-terminal__icons

website/assets/css/_components/_navigation.sass

@@ -1,22 +1,21 @@
 //- 💫 CSS > COMPONENTS > NAVIGATION
 
 .c-nav
-    @include position(absolute, top, left, 0, 0)
+    @include position(fixed, top, left, 0, 0)
     @include size(100%, $nav-height)
     background: $color-back
     color: $color-theme
     align-items: center
     display: flex
     justify-content: space-between
+    flex-flow: row wrap
     padding: 0 2rem 0 1rem
-    z-index: 20
+    z-index: 30
     width: 100%
-    border-bottom: 1px solid $color-subtle
+    box-shadow: $box-shadow
 
-    &.c-nav--theme
+    //@include breakpoint(min, md)
-        background: $color-theme
+    //    position: fixed
-        color: $color-back
-        border-bottom: none
 
     &.is-fixed
         animation: slideInDown 0.5s ease-in-out
@@ -28,12 +27,21 @@
     justify-content: flex-end
     flex-flow: row nowrap
     border-color: inherit
+    flex: 1
 
 .c-nav__menu__item
     display: flex
     align-items: center
     height: 100%
     text-transform: uppercase
+    font-family: $font-secondary
+    font-size: 1.6rem
+    font-weight: bold
+    color: $color-theme
 
-    &:not(:last-child)
+    &:not(:first-child)
-        margin-right: 1em
+        margin-left: 2em
+
+    &.is-active
+        color: $color-dark
+        pointer-events: none

website/assets/css/_components/_progress.sass

@@ -0,0 +1,24 @@
+//- 💫 CSS > COMPONENTS > PROGRESS
+
+.c-progress
+    display: block
+    flex: 105%
+    width: 105%
+    height: 3px
+    color: $color-theme
+    background: transparent
+    border: none
+    position: absolute
+    bottom: 0
+    left: -2.5%
+
+    &::-webkit-progress-bar
+        background: $color-back
+        border-radius: none
+
+    &::-webkit-progress-value
+        background: $color-theme
+        border-radius: none
+
+    &::-moz-progress-bar
+        background: $color-theme

website/assets/css/_components/_quickstart.sass

@@ -1,14 +1,17 @@
 //- 💫 CSS > COMPONENTS > QUICKSTART
 
 .c-quickstart
-    border: 1px solid $color-subtle
+    border-radius: $border-radius
-    border-radius: 2px
     display: none
     background: $color-subtle-light
 
     &:not([style]) + .c-quickstart__info
         display: none
 
+    .c-code-block
+        border-top-left-radius: 0
+        border-top-right-radius: 0
+
 .c-quickstart__content
     padding: 2rem 3rem
 
@@ -72,7 +75,6 @@
     flex: 100%
 
 .c-quickstart__legend
-    color: $color-subtle-dark
     margin-right: 2rem
     padding-top: 0.75rem
     flex: 1 1 35%
@@ -95,4 +97,4 @@
         padding: 1.5rem 0
 
 .c-quickstart__code
-    font-size: 1.6rem
+    font-size: 1.4rem

website/assets/css/_components/_sidebar.sass

@@ -3,16 +3,15 @@
 //- Sidebar container
 
 .c-sidebar
-    background: $color-subtle-light
     overflow-y: auto
 
     @include breakpoint(min, md)
         @include position(fixed, top, left, 0, 0)
-        @include size($sidebar-width, 100vh)
+        @include size($sidebar-width, calc(100vh - 3px))
+        @include scroll-shadow($color-back, $color-front, $nav-height)
         flex: 0 0 $sidebar-width
         padding: calc(#{$nav-height} + 1.5rem) 0 0
         z-index: 10
-        border-right: 1px solid $color-subtle
 
     @include breakpoint(max, sm)
         flex: 100%
@@ -27,7 +26,7 @@
 
 .c-sidebar__section
     & > *
-        padding: 0 2rem
+        padding: 0 2rem 0.35rem
 
     @include breakpoint(max, sm)
         flex: 1 1 0
@@ -38,7 +37,59 @@
         &:not(:last-child)
             border-right: 1px solid $color-subtle
 
-    .is-active
+.c-sidebar__item
+    color: $color-theme
+
+    &:hover
+        color: $color-theme-dark
+
+    & > .is-active
         font-weight: bold
-        color: $color-theme
+        color: $color-dark
-        background: rgba($color-subtle, 0.4)
+        margin-top: 1rem
+
+
+//- Sidebar subsections
+
+$crumb-bullet: 14px
+$crumb-bar: 2px
+
+.c-sidebar__crumb
+    display: block
+    padding-top: 1rem
+    padding-left: 1rem
+    position: relative
+
+.c-sidebar__crumb__item
+    margin-bottom: $crumb-bullet / 2
+    position: relative
+    padding-left: 2rem
+    color: $color-theme
+    font-size: 1.2rem
+
+    &:hover
+        color: $color-theme-dark
+
+    &:after
+        @include size($crumb-bullet)
+        @include position(absolute, top, left, $crumb-bullet / 4, 0)
+        content: ""
+        border-radius: 50%
+        background: $color-theme
+        z-index: 10
+
+    &:not(:last-child):before
+        @include size($crumb-bar, 100%)
+        @include position(absolute, top, left, $crumb-bullet, ($crumb-bullet - $crumb-bar) / 2)
+        content: ""
+        background: $color-subtle
+
+    &:first-child:before
+        height: calc(100% + #{$crumb-bullet * 2})
+        top: -$crumb-bullet / 2
+
+    &.is-active
+        color: $color-dark
+
+        &:after
+            background: $color-dark

website/assets/css/_components/_tables.sass

@@ -9,7 +9,7 @@
 //- Table row
 
 .c-table__row
-    &:nth-child(odd)
+    &:nth-child(odd):not(.c-table__row--head)
         background: rgba($color-subtle-light, 0.35)
 
     &.c-table__row--foot
@@ -38,7 +38,6 @@
 .c-table__head-cell
     font-weight: bold
     color: $color-theme
-    background: $color-back
     padding: 1rem 0.5rem
     border-bottom: 2px solid $color-theme
 

website/assets/css/_components/_tooltips.sass

@@ -4,24 +4,34 @@
     position: relative
 
     @include breakpoint(min, sm)
+        &[data-tooltip-style="code"]:before
+            -webkit-font-smoothing: subpixel-antialiased
+            -moz-osx-font-smoothing: auto
+            padding: 0.35em 0.85em 0.45em
+            font: normal 1rem/#{1.25} $font-code
+            white-space: nowrap
+            min-width: auto
+
         &:before
             @include position(absolute, top, left, 125%, 50%)
             display: inline-block
             content: attr(data-tooltip)
             background: $color-front
-            border-radius: 2px
+            border-radius: $border-radius
             border: 1px solid rgba($color-subtle-dark, 0.5)
             color: $color-back
-            font: normal 1.3rem/#{1.25} $font-primary
+            font: normal 1.2rem/#{1.25} $font-primary
             text-transform: none
+            text-align: left
             opacity: 0
-            padding: 0.5em 0.75em
             transform: translateX(-50%) translateY(-2px)
             transition: opacity 0.1s ease-out, transform 0.1s ease-out
             visibility: hidden
-            min-width: 200px
             max-width: 300px
+            min-width: 200px
+            padding: 0.75em 1em 1em
             z-index: 200
+            white-space: pre-wrap
 
         &:hover:before
             opacity: 1

website/assets/css/_mixins.sass

@@ -42,8 +42,8 @@
 // $scroll-shadow-side       - side to cover shadow (left or right)
 // $scroll-shadow-background - original background color to match
 
-@mixin scroll-shadow-base($scroll-shadow-color)
+@mixin scroll-shadow-base($scroll-shadow-color, $scroll-shadow-intensity: 0.2)
-    background: radial-gradient(left, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 100% center
+    background: radial-gradient(ellipse at 0 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, rgba(0,0,0,0) 75%) 0 center, radial-gradient(ellipse at 100% 50%, rgba($scroll-shadow-color, $scroll-shadow-intensity) 0%, transparent 75%) 100% center
     background-attachment: scroll, scroll
     background-repeat: no-repeat
     background-size: 10px 100%, 10px 100%
@@ -58,3 +58,16 @@
     background-image: linear-gradient(to #{$scroll-gradient-direction}, rgba($scroll-shadow-background, 1) 50%, rgba($scroll-shadow-background, 0) 100%)
     background-repeat: no-repeat
     background-size: 20px 100%
+
+
+// Full vertical scroll shadows
+// adapted from: https://codepen.io/laustdeleuran/pen/DBaAu
+
+@mixin scroll-shadow($background-color, $shadow-color, $shadow-offset: 0, $shadow-intensity: 0.4, $cover-size: 40px, $shadow-size: 15px)
+    background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 $shadow-offset, radial-gradient(50% 100%,farthest-side, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) 0 100%
+
+    background: linear-gradient($background-color 30%, rgba($background-color,0)) 0 $shadow-offset, linear-gradient(rgba($background-color,0), $background-color 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba($shadow-color,$shadow-intensity), rgba($shadow-color,0)) -20px $shadow-offset, radial-gradient(farthest-side at 50% 100%, rgba($shadow-color, $shadow-intensity), rgba($shadow-color,0)) 0 100%
+    background-repeat: no-repeat
+    background-color: $background-color
+    background-size: 100% $cover-size, 100% $cover-size, 100% $shadow-size, 100% $shadow-size
+    background-attachment: local, local, scroll, scroll

website/assets/css/_variables.sass

@@ -4,47 +4,48 @@
 
 $type-base: 11px
 
-$nav-height: 45px
+$nav-height: 55px
 $content-width: 1250px
-$sidebar-width: 200px
+$sidebar-width: 235px
-$aside-width: 30vw
+$aside-width: 27.5vw
 $aside-padding: 25px
+$border-radius: 6px
 
 $logo-width: 85px
 $logo-height: 27px
 
 $grid: ( quarter: 4, third: 3, half: 2, two-thirds: 1.5, three-quarters: 1.33 )
 $breakpoints: ( sm: 768px, md: 992px, lg: 1200px )
-$headings: (1: 3, 2: 2.6, 3: 2, 4: 1.8, 5: 1.5)
+$headings: (1: 4.4, 2: 3.4, 3: 2.6, 4: 2.2, 5: 1.8)
-
 
 //  Fonts
 
-$font-primary: "Source Sans Pro", Tahoma, Geneva, sans-serif !default
+$font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default
-$font-code: 'Source Code Pro', Consolas, 'Andale Mono', Menlo, Monaco, Courier, monospace !default
+$font-secondary: "HK Grotesk" !default
-
+$font-code: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default
 
 // Colors
 
-$colors: ( blue: #09a3d5, red: #d9515d, green: #08c35e )
+$colors: ( blue: #09a3d5, green: #05b083 )
 
 $color-back: #fff !default
 $color-front: #1a1e23 !default
 $color-dark: lighten($color-front, 20) !default
 
 $color-theme: map-get($colors, $theme)
-$color-theme-dark: darken(map-get($colors, $theme), 5)
+$color-theme-dark: darken(map-get($colors, $theme), 10)
 $color-theme-light: rgba($color-theme, 0.05)
 
 $color-subtle: #ddd !default
 $color-subtle-light: #f6f6f6 !default
 $color-subtle-dark: #949e9b !default
 
-$color-red: #d9515d
+$color-red: #ef476f
-$color-green: #3ec930
+$color-green: #7ddf64
 $color-yellow: #f4c025
 
 $syntax-highlighting: ( comment: #949e9b, tag: #b084eb, number: #b084eb, selector: #ffb86c, operator: #ff2c6d, function: #35b3dc, keyword: #ff2c6d, regex: #f4c025 )
 
 $pattern: $color-theme url("/assets/img/pattern_#{$theme}.jpg") center top repeat
 $pattern-overlay: transparent url("/assets/img/pattern_landing.jpg") center -138px no-repeat
+$box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2)

website/assets/css/style.sass

@@ -30,6 +30,7 @@ $theme: blue !default
 @import _components/lists
 @import _components/misc
 @import _components/navigation
+@import _components/progress
 @import _components/sidebar
 @import _components/tables
 @import _components/quickstart

website/assets/css/style_red.sass

@@ -1,4 +0,0 @@
-//- 💫 STYLESHEET (RED)
-
-$theme: red
-@import style