Bulma v9 website (#3249)

* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute

docs/_sass/base/css-vars.scss

@@ -0,0 +1,69 @@
+:root {
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    --#{$name}: #{$color};
+    --#{$name}-invert: #{$color-invert};
+
+    @if length($pair) >= 4 {
+      $color-light: nth($pair, 3);
+      $color-dark: nth($pair, 4);
+      --#{$name}-light: #{$color-light};
+      --#{$name}-dark: #{$color-dark};
+    }
+  }
+
+  --bootstrap: #{$bootstrap};
+  --github: #{$github};
+  --twitter: #{$twitter};
+  --patreon: #{$patreon};
+  --patreon-blue: #{$patreon-blue};
+  --fortyfour: #{$fortyfour};
+  --amazon: #{$amazon};
+  --bleeding-green: #{$bleeding-green};
+  --bleeding-red: #{$bleeding-red};
+  --rss: #{$rss};
+  // --search: #{$algolia};
+  // --search-light: #{change-color($algolia, $lightness: 90%)};
+  --search: #{$primary};
+  --search-light: #{$primary-light};
+  --search-dark: #{$primary-dark};
+
+  --html5: #e44d26;
+  --html5-invert: #ebebeb;
+
+  --hl-green: #37e7ac;
+  --hl-cyan: #51fbde;
+  --hl-blue: #00b2ff;
+  --hl-purple: #9a89b4;
+  --hl-lavender: #9b6dff;
+  --hl-pink: #ff5cd3;
+  --hl-rose: #ff6b9d;
+  --hl-orange: #ff9970;
+  --hl-yellow: #fed604;
+  --hl-gray-01: #d9e0e8;
+  --hl-gray-02: #808182;
+  --hl-gray-09: #1f2330;
+
+  --hl-color: var(--hl-orange);
+  --hl-background: var(--hl-gray-09);
+
+  --container-width: calc(100vw - 3rem);
+  --container-width-desktop: #{$desktop - $container-offset};
+  --container-width-widescreen: #{min($widescreen, $container-max-width) -
+    $container-offset};
+  --container-width-fullhd: #{min($fullhd, $container-max-width) -
+    $container-offset};
+
+  @include desktop {
+    --container-width: var(--container-width-desktop);
+  }
+
+  @include widescreen {
+    --container-width: var(--container-width-widescreen);
+  }
+
+  @include fullhd {
+    --container-width: var(--container-width-fullhd);
+  }
+}

docs/_sass/base/custom.scss

@@ -0,0 +1,26 @@
+.bd-fat-button {
+  font-size: 1.25em;
+  font-weight: $weight-semibold;
+  height: auto;
+  padding: 0.75em 1.25em;
+
+  &.is-bleeding,
+  &.is-amazon {
+    small {
+      display: block;
+      font-size: 0.625em;
+      font-weight: $weight-normal;
+      opacity: 0.7;
+    }
+
+    .icon {
+      margin-right: 0.5em;
+    }
+  }
+
+  &.is-amazon {
+    img {
+      margin-bottom: -11px;
+    }
+  }
+}

docs/_sass/base/helpers.scss

@@ -0,0 +1,26 @@
+$new-colors: (
+  'bootstrap',
+  'github',
+  'twitter',
+  'patreon',
+  'patreon-blue',
+  'fortyfour',
+  'amazon',
+  'bleeding-green',
+  'bleeding-red',
+  'rss',
+  'videos',
+  'expo',
+  'love',
+  'backers',
+  'sponsors',
+  'blog',
+  'extensions',
+  'algolia',
+);
+
+@each $color in $new-colors {
+  .has-text-#{$color} {
+    color: var(--#{$color}) !important;
+  }
+}

docs/_sass/components/anchors.scss

@@ -0,0 +1,44 @@
+.bd-anchors {
+  padding: var(--docs-side-padding);
+  position: sticky;
+  top: 0;
+
+  &.bd-is-empty {
+    display: none;
+  }
+}
+
+.bd-anchors-title {
+  color: $text-light;
+  font-size: 0.75em;
+  opacity: 0.5;
+}
+
+.bd-anchors-list {
+  padding: 0.25em 0 0.75em;
+
+  li {
+    align-items: flex-start;
+    display: flex;
+    font-size: 0.875em;
+
+    &.is-past a:not(:hover) {
+      background-color: $border-light;
+      color: $text-light;
+    }
+
+    &.is-current a {
+      background-color: var(--primary);
+      color: var(--primary-invert);
+    }
+  }
+
+  a {
+    @extend %bd-category-link;
+
+    &:hover {
+      background-color: var(--primary-invert);
+      color: var(--primary);
+    }
+  }
+}

docs/_sass/components/banner.scss

@@ -0,0 +1,60 @@
+.bd-banner {
+  --background-color: #{$primary-light};
+  --color: #{$primary-dark};
+
+  background-color: var(--background-color);
+  color: var(--color);
+  padding: 0.5em;
+
+  &.bd-is-bleeding {
+    --background-color: var(--bleeding-light);
+    --color: var(--bleeding-dark);
+  }
+
+  &.bd-is-sponsor {
+    --background-color: var(--sponsor-light);
+    --color: var(--sponsor);
+  }
+}
+
+.bd-banner-body {
+  align-items: center;
+  display: flex;
+  min-height: 2.5rem;
+}
+
+.bd-banner-title {
+  display: flex;
+  margin-right: auto;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  strong {
+    color: inherit;
+    font-weight: $weight-semibold;
+  }
+}
+
+@include tablet() {
+  .bd-banner-title {
+    font-size: 1.125rem;
+  }
+}
+
+@include desktop() {
+  .bd-banner {
+    padding: 0.5rem 2rem;
+  }
+}
+
+@include widescreen() {
+  .bd-banner {
+    padding: 0.5rem 4rem;
+  }
+}

docs/_sass/components/book.scss

@@ -0,0 +1,23 @@
+.bd-book-cover {
+  @extend %block;
+  @extend %center;
+  position: relative;
+  text-align: center;
+
+  a {
+    box-shadow: 0 0.5em 1em rgba(black, 0.1);
+    display: inline-block;
+    transition-duration: $speed * 2;
+    transition-property: box-shadow, transform;
+    vertical-align: top;
+
+    &:hover {
+      box-shadow: 0 1em 2em rgba(black, 0.1);
+      transform: translateY(-0.5em);
+    }
+  }
+
+  img {
+    display: block;
+  }
+}

docs/_sass/components/call.scss

@@ -0,0 +1,82 @@
+.bd-call {
+  --background-color: var(--primary-light);
+  --color: var(--primary-dark);
+  --color-dark: var(--primary-dark);
+  --margin: 1.5rem;
+  --spacing: 1em;
+
+  align-items: center;
+  display: flex;
+  font-size: var(--font-size);
+  justify-content: center;
+  margin: var(--margin);
+
+  &.bd-is-twitter {
+    --background-color: var(--twitter-light);
+    --color: var(--twitter);
+    --color-dark: var(--twitter-dark);
+  }
+
+  &.bd-is-extensions {
+    --background-color: var(--extensions-light);
+    --color: var(--extensions);
+    --color-dark: var(--extensions-dark);
+  }
+}
+
+.bd-call-body {
+  align-items: center;
+  background-color: var(--background-color);
+  border-radius: $radius-large;
+  color: var(--color);
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--container-width);
+  padding: var(--spacing);
+
+  strong {
+    color: var(--color-dark);
+    font-weight: $weight-semibold;
+  }
+}
+
+.bd-call-text {
+  margin-left: var(--spacing);
+  margin-right: calc(2 * var(--spacing));
+}
+
+.bd-call-button {
+  .button {
+    font-size: 1em;
+  }
+}
+
+@include mobile {
+  .bd-call-body {
+    text-align: center;
+  }
+
+  .bd-call-text {
+    margin-bottom: var(--spacing);
+  }
+}
+
+@include tablet {
+  .bd-call-body {
+    display: flex;
+  }
+}
+
+@include desktop {
+  .bd-call {
+    --margin: 3rem;
+  }
+}
+
+@include widescreen {
+  .bd-call {
+    --font-size: 1.125rem;
+    --margin: 3rem;
+  }
+}

docs/_sass/components/carbon.scss

@@ -0,0 +1,112 @@
+$carbon-spacing: 1rem;
+$carbon-shadow-size: 0.75rem;
+$carbon-image-height: 100px;
+$carbon-image-width: 130px;
+
+#carboncontainer {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  max-width: $carbon-width;
+  min-height: $carbon-min-height;
+  min-width: 280px;
+}
+
+#carbon {
+  border-radius: 0.125em;
+  flex-grow: 1;
+  min-height: $carbon-height;
+  padding: 0;
+  position: relative;
+
+  &:hover {
+    background-color: rgba(black, 0.02);
+    box-shadow: 0 0 0 $carbon-shadow-size rgba(black, 0.02);
+  }
+
+  @include tablet() {
+    width: $carbon-width;
+  }
+}
+
+#carbonads {
+  font-size: 14px;
+  text-align: left;
+
+  a,
+  span {
+    display: block;
+  }
+
+  .carbon-wrap {
+    min-height: $carbon-height;
+    position: relative;
+
+    &:hover {
+      .carbon-img::after {
+        background-color: rgba(#000, 0.05);
+        content: '';
+        display: block;
+        height: $carbon-height;
+        left: 0;
+        position: absolute;
+        right: $carbon-spacing;
+        top: 0;
+      }
+    }
+  }
+
+  .carbon-img {
+    bottom: 0;
+    float: left;
+    left: 0;
+    min-height: $carbon-height;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: calc(#{$carbon-image-width} + #{$carbon-spacing});
+
+    img {
+      display: block;
+      height: $carbon-image-height;
+      width: $carbon-image-width;
+    }
+
+    &:hover {
+      & + .carbon-text {
+        color: $link;
+      }
+    }
+
+    &:active {
+      opacity: 0.8;
+    }
+  }
+
+  .carbon-text {
+    display: block;
+    color: $text-strong;
+    line-height: $carbon-line-height;
+    min-height: $carbon-height;
+    padding: 0 0 $carbon-poweredby-height
+      calc(#{$carbon-image-width} + #{$carbon-spacing});
+
+    &:hover {
+      color: $link;
+    }
+  }
+
+  .carbon-poweredby {
+    bottom: 0;
+    color: $border-hover;
+    display: inline;
+    font-size: $size-small;
+    line-height: $carbon-poweredby-height;
+    position: absolute;
+    right: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

docs/_sass/components/categories.scss

@@ -0,0 +1,194 @@
+%bd-category-link {
+  --highlight-background-color: var(--primary);
+  --highlight-color: var(--primary-invert);
+
+  align-items: center;
+  border-radius: $radius;
+  color: $text-strong;
+  cursor: pointer;
+  display: flex;
+  line-height: var(--height);
+  padding: 0.375em 0.75em;
+  transition-duration: $speed;
+  transition-property: background-color, color;
+
+  &:hover {
+    background-color: var(--primary-invert);
+    color: var(--primary);
+  }
+
+  &.bd-is-focused {
+    box-shadow: inset 0 0 0 2px $scheme-main-bis, 0 0 0 2px var(--primary);
+  }
+}
+
+.bd-highlight {
+  background-color: var(--highlight-background-color);
+  border-radius: $radius-small;
+  box-shadow: 0 0 0 2px var(--highlight-background-color);
+  color: var(--highlight-color);
+}
+
+.bd-categories {
+  --height: 1.25;
+
+  padding: var(--docs-side-padding);
+  position: sticky;
+  top: 0;
+
+  &.bd-has-query {
+    .bd-category:not(.bd-has-match) {
+      display: none;
+    }
+
+    .bd-category-list {
+      display: block;
+
+      a:not(.bd-is-match) {
+        display: none;
+      }
+    }
+
+    &.bd-has-no-results {
+      .bd-category-group {
+        display: none;
+      }
+
+      .bd-categories-no-results {
+        display: block;
+      }
+    }
+  }
+}
+
+.bd-category {
+  &.is-current {
+    .bd-category-name {
+      --highlight-background-color: var(--primary-dark);
+      --highlight-color: var(--primary-light);
+
+      background-color: var(--primary-light);
+      color: var(--primary-dark);
+
+      &.is-active {
+        background-color: var(--primary);
+        color: var(--primary-invert);
+      }
+    }
+
+    .bd-category-list {
+      display: block;
+    }
+  }
+
+  &.is-open {
+    .bd-category-list {
+      display: block;
+    }
+  }
+}
+
+.bd-category-group {
+  color: $grey-light;
+  font-size: 0.625em;
+  font-weight: $weight-semibold;
+  letter-spacing: 0.2em;
+  margin-bottom: calc(var(--docs-side-padding) / 2);
+  margin-top: var(--docs-side-padding);
+  text-transform: uppercase;
+}
+
+.bd-category-header {
+  position: relative;
+}
+
+.bd-category-name {
+  @extend %bd-category-link;
+  font-weight: $weight-semibold;
+}
+
+.bd-category-toggle {
+  @extend %reset;
+
+  border-radius: $radius;
+  color: var(--primary);
+  cursor: pointer;
+  display: none;
+  height: calc(1em * var(--height));
+  margin-left: auto;
+  position: absolute;
+  right: 0.5em;
+  top: 0.5em;
+  width: calc(1em * var(--height));
+
+  &:hover {
+    background-color: var(--primary);
+    color: var(--primary-invert);
+  }
+}
+
+.bd-category-list {
+  display: none;
+  padding: 0.25em 0.75em 0.75em;
+
+  li {
+    align-items: flex-start;
+    display: flex;
+    font-size: 0.875em;
+
+    a {
+      @extend %bd-category-link;
+    }
+
+    &.is-current {
+      a {
+        --highlight-background-color: var(--primary-invert);
+        --highlight-color: var(--primary-dark);
+
+        background-color: var(--primary);
+        color: var(--primary-invert);
+      }
+    }
+  }
+}
+
+.bd-categories-no-results {
+  display: none;
+
+  .bd-key {
+    margin-left: 0.5em;
+  }
+}
+
+.bd-categories-filter {
+  margin-bottom: 1em;
+  position: relative;
+
+  .input:focus {
+    border-color: $primary;
+    box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
+  }
+
+  .bd-key {
+    position: absolute;
+    right: 6px;
+    top: 4px;
+  }
+}
+
+.bd-key {
+  align-items: center;
+  background: rgba(black, 0.1);
+  border-radius: 0.25em;
+  color: rgba(black, 0.5);
+  display: none;
+  font-family: monospace;
+  font-size: 0.625rem;
+  height: 2em;
+  justify-content: center;
+  min-width: 2em;
+  padding: 0 0.25em;
+  pointer-events: none;
+  text-align: center;
+  z-index: 2;
+}

docs/_sass/components/code.scss

@@ -0,0 +1,191 @@
+.bd-example {
+  @extend %block;
+}
+
+.bd-copy,
+.bd-show {
+  background-color: var(--hl-color);
+  border: none;
+  border-radius: 0.5em !important;
+  color: var(--hl-background);
+  font-size: 1em;
+  font-weight: $weight-semibold;
+
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+.bd-copy {
+  opacity: 0;
+  position: absolute;
+  right: calc(1.25em - 0.5em - 1px);
+  top: calc(1.25em - 0.5em - 1px);
+
+  .highlight:hover & {
+    opacity: 1;
+  }
+}
+
+.bd-show {
+  bottom: -1.25em;
+  height: 2.5em;
+  left: calc(50% - 4.5em);
+  padding: 0;
+  position: absolute;
+  width: 9em;
+  z-index: 1;
+}
+
+.bd-snippet {
+  @extend %block;
+  --snippet-spacing: #{$block-spacing};
+
+  font-size: 1rem;
+  grid-gap: calc(2 * var(--snippet-spacing));
+  position: relative;
+}
+
+.bd-snippet-title {
+  display: flex;
+}
+
+.bd-snippet-tag {
+  align-items: center;
+  background: var(--hl-color);
+  border-radius: 0.5em;
+  color: var(--hl-background);
+  display: inline-flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 0.5em;
+  font-weight: $weight-semibold;
+  height: $block-spacing;
+  padding: 0 1em;
+  vertical-align: top;
+
+  &.bd-is-html {
+    background: var(--hl-background);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    color: var(--hl-color);
+  }
+}
+
+.bd-snippet-preview,
+.bd-snippet-code {
+  position: relative;
+}
+
+.bd-snippet-preview {
+  padding-bottom: var(--snippet-spacing);
+  padding-top: var(--snippet-spacing);
+
+  img {
+    vertical-align: top;
+  }
+
+  &.bd-is-mwb {
+    @extend %center;
+  }
+}
+
+.bd-snippet-code {
+  font-size: 0.875em;
+  // overflow: auto;
+  // padding-top: var(--snippet-spacing);
+
+  .highlight {
+    border-top-left-radius: 0;
+    font-size: 1em;
+  }
+
+  &.bd-is-hovering {
+    &::before {
+      background: var(--hl-color);
+      color: var(--hl-background);
+    }
+  }
+}
+
+// Vertical
+
+.bd-snippet.bd-is-vertical {
+}
+
+// Horizontal
+
+.bd-snippet.bd-is-horizontal {
+}
+
+// Fullwidth
+
+.bd-snippet.bd-is-fullwidth {
+  box-shadow: inset 0 0 0 1px red;
+  margin-left: calc(-1 * var(--docs-outer));
+  margin-right: calc(-1 * var(--docs-outer));
+
+  .bd-snippet-title {
+    margin-left: var(--docs-outer);
+  }
+}
+
+// Clipped
+
+.bd-snippet.bd-is-clipped {
+  .bd-snippet-code {
+    overflow: auto;
+  }
+}
+
+.bd-snippet-code.bd-is-more {
+  .highlight:not(:last-child) {
+    margin-bottom: 2.5rem;
+  }
+}
+
+.bd-snippet-code.bd-is-more.bd-is-more-clipped {
+  .highlight {
+    height: calc(8 * var(--snippet-spacing));
+    overflow: hidden;
+
+    pre {
+      overflow: hidden;
+    }
+
+    .bd-show {
+      display: flex;
+    }
+
+    &::before {
+      background: linear-gradient(0deg, var(--hl-background), transparent);
+      bottom: 0;
+      content: '';
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
+
+@include tablet {
+  .bd-snippet.bd-is-vertical {
+    align-items: flex-start;
+    display: grid;
+    grid-template-columns: calc(50% - var(--snippet-spacing)) calc(
+        50% - var(--snippet-spacing)
+      );
+  }
+
+  .bd-snippet.bd-is-size-1-2 {
+    grid-template-columns: calc(33% - var(--snippet-spacing)) calc(
+        67% - var(--snippet-spacing)
+      );
+  }
+
+  .bd-snippet-preview {
+    padding-bottom: var(--snippet-spacing);
+  }
+}

docs/_sass/components/content.scss

@@ -0,0 +1,67 @@
+.bd-content {
+  hr:first-child {
+    display: none;
+
+    & + .bd-anchor-title {
+      padding-top: 0;
+    }
+
+    & + .bd-anchor-title .bd-anchor-link {
+      top: 0;
+    }
+  }
+
+  .highlight,
+  .bd-highlight-full {
+    @extend %block;
+  }
+
+  // .bd-highlight-full {
+  //   overflow: auto;
+  // }
+}
+
+.bd-anchor-title {
+  --spacing: 3em;
+
+  position: relative;
+
+  &:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  &.title {
+    font-size: 1.5em;
+  }
+
+  @include until($widescreen) {
+    padding-left: 1em;
+  }
+}
+
+.bd-anchor-link {
+  position: absolute;
+  right: calc(100% + 1rem);
+  top: 0;
+
+  @include until($widescreen) {
+    left: 0;
+    right: auto;
+  }
+}
+
+.bd-icon-size .icon {
+  background-color: $yellow;
+}
+
+@include widescreen {
+  .bd-content {
+    font-size: 1.125rem;
+  }
+}
+
+@include from(1800px) {
+  .bd-content {
+    font-size: 1.25rem;
+  }
+}

docs/_sass/components/drawing.scss

@@ -0,0 +1,50 @@
+.bd-has-drawing {
+  position: relative;
+}
+
+.bd-drawing {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+
+  &.bd-is-try-it-out {
+    bottom: 100%;
+    right: 100%;
+  }
+
+  &.bd-is-love-letters {
+    bottom: 110%;
+    right: 10%;
+  }
+
+  &.bd-is-crazy {
+    right: 100%;
+    top: 110%;
+  }
+
+  &.bd-is-customize {
+    right: -10%;
+    top: 105%;
+  }
+
+  &.bd-is-opinion-free {
+    right: 100%;
+    top: 110%;
+  }
+
+  &.bd-is-join-us {
+    bottom: 80%;
+    left: 100%;
+  }
+
+  &.bd-is-spam-free {
+    bottom: 100%;
+    right: 95%;
+  }
+}
+
+@include tablet {
+  .bd-drawing {
+    display: inline;
+  }
+}

docs/_sass/components/features.scss

@@ -0,0 +1,41 @@
+.bd-features {
+  padding: var(--docs-side-padding);
+  padding-bottom: 0;
+}
+
+.bd-features-title {
+  color: $text-light;
+  font-size: 0.75em;
+  opacity: 0.5;
+}
+
+.bd-features-list {
+  padding: 0.25em 0 0;
+
+  li {
+    display: flex;
+    font-size: 0.875em;
+    justify-content: space-between;
+    // padding: 0 0.75em;
+  }
+}
+
+.bd-feature-label {
+  color: $text-light;
+  // padding: 0.375em 0;
+}
+
+.bd-feature-since,
+.bd-feature-yes,
+.bd-feature-no {
+  // padding: 0.375em 0.75em;
+}
+
+.bd-feature-no {
+  color: $text-light;
+}
+
+.bd-feature-yes {
+  color: var(--primary);
+  font-weight: $weight-bold;
+}

docs/_sass/components/hero.scss

@@ -0,0 +1,157 @@
+.bd-hero {
+  --color: #{$text-light};
+  --color-strong: #{$text-strong};
+  --icon-dimensions: 1.125em;
+  --icon-spacing: 0.25em;
+
+  background-color: var(--background-color);
+
+  &.bd-is-basic {
+    .title {
+      font-weight: $weight-semibold;
+    }
+  }
+
+  &.bd-is-primary {
+    --background-color: var(--primary-light);
+    --color-strong: var(--primary-dark);
+    --color-icon: var(--primary);
+  }
+
+  &.bd-is-bleeding {
+    --background-color: var(--bleeding-light);
+    --color-strong: var(--bleeding-dark);
+    --color-icon: var(--bleeding);
+  }
+
+  &.bd-is-link {
+    --background-color: var(--link-light);
+    --color-strong: var(--link-dark);
+    --color-icon: var(--link);
+  }
+
+  &.bd-is-love {
+    --background-color: var(--love-light);
+    --color-strong: var(--love);
+    --color-icon: var(--love);
+  }
+
+  &.bd-is-expo {
+    --background-color: var(--expo-light);
+    --color-strong: var(--expo-dark);
+    --color-icon: var(--expo);
+  }
+
+  &.bd-is-sponsor {
+    --background-color: var(--sponsor-light);
+    --color-strong: var(--sponsor-dark);
+    --color: var(--sponsor);
+    --color-icon: var(--sponsor);
+  }
+
+  &.bd-is-videos {
+    --background-color: var(--videos-light);
+    --color-strong: var(--videos-dark);
+    --color: var(--videos);
+    --color-icon: var(--videos);
+  }
+
+  &.bd-is-extensions {
+    --background-color: var(--extensions-light);
+    --color-strong: var(--extensions-dark);
+    --color: var(--extensions);
+    --color-icon: var(--extensions);
+  }
+
+  &.bd-is-success {
+    --background-color: var(--success-light);
+    --color-strong: var(--success-dark);
+    --color: var(--success);
+    --color-icon: var(--success);
+  }
+
+  &.bd-is-bootstrap {
+    --background-color: var(--bootstrap-light);
+    --color-strong: var(--bootstrap-dark);
+    --color: var(--bootstrap);
+    --color-icon: var(--bootstrap);
+  }
+}
+
+$grid-gap: 1.5;
+
+.bd-hero-body {
+  align-items: center;
+  display: grid;
+  grid-gap: $grid-gap * 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(#{$carbon-width}, 1fr));
+}
+
+.bd-hero-heading {
+  .title {
+    color: var(--color-strong);
+    display: flex;
+    font-weight: $weight-normal;
+    position: relative;
+
+    a {
+      color: currentColor;
+      font-weight: $weight-semibold;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    code {
+      background: none;
+      padding: 0;
+    }
+
+    strong {
+      font-weight: $weight-semibold;
+    }
+
+    .icon {
+      color: var(--color-icon);
+      height: var(--icon-dimensions);
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin-right: var(--icon-spacing);
+      width: var(--icon-dimensions);
+    }
+  }
+
+  .subtitle {
+    color: var(--color);
+
+    strong {
+      color: currentColor;
+    }
+  }
+}
+
+$breakpoint: ($carbon-width * 2) + (16px * 3 * $grid-gap);
+
+@include from($breakpoint) {
+  .bd-hero-carbon {
+    justify-self: flex-end;
+  }
+}
+
+@include desktop {
+  .bd-hero {
+    --icon-spacing: 0.5em;
+
+    .hero-body {
+      padding: 6rem;
+    }
+  }
+
+  .bd-hero-heading {
+    .title .icon {
+      margin-left: calc(-1 * (var(--icon-dimensions) + var(--icon-spacing)));
+      margin-right: var(--icon-spacing);
+    }
+  }
+}

docs/_sass/components/highlight.scss

@@ -0,0 +1,266 @@
+// .bd-highlight-full {
+//   @extend %block;
+// }
+
+.highlight {
+  background-color: var(--hl-gray-09);
+  border-radius: $radius-large;
+  color: var(--hl-gray-01);
+  font-size: 0.75em;
+  position: relative;
+
+  &.bd-is-hovering {
+    box-shadow: inset 0 0 0 2px var(--hl-orange);
+  }
+
+  pre {
+    background-color: transparent;
+    color: currentColor;
+    font-size: 1em;
+    line-height: 1.375;
+    margin: 0 !important;
+    padding: 1.25em 1.5em;
+    // white-space: pre-wrap;
+    // white-space: break-spaces;
+    white-space: pre;
+    word-break: break-word;
+  }
+
+  .c {
+    color: var(--hl-gray-01);
+  }
+
+  .err,
+  .g {
+    color: var(--hl-gray-02);
+  }
+
+  .k {
+    color: var(--hl-cyan);
+  }
+
+  .l,
+  .n {
+    color: var(--hl-gray-02);
+  }
+
+  .o {
+    color: var(--hl-cyan);
+  }
+
+  .x {
+    color: var(--hl-pink);
+  }
+
+  .p {
+    color: var(--hl-gray-02);
+  }
+
+  .cm {
+    color: var(--hl-gray-01);
+  }
+
+  .cp {
+    color: var(--hl-cyan);
+  }
+
+  .c1 {
+    color: var(--hl-gray-02);
+  }
+
+  .cs {
+    color: var(--hl-cyan);
+  }
+
+  .gd {
+    color: var(--hl-green);
+  }
+
+  .ge {
+    color: var(--hl-gray-02);
+    font-style: italic;
+  }
+
+  .gr {
+    color: var(--hl-orange);
+  }
+
+  .gh {
+    color: var(--hl-pink);
+  }
+
+  .gi {
+    color: var(--hl-cyan);
+  }
+
+  .go,
+  .gp {
+    color: var(--hl-gray-02);
+  }
+
+  .gs {
+    color: var(--hl-gray-02);
+    font-weight: bold;
+  }
+
+  .gu {
+    color: var(--hl-pink);
+  }
+
+  .gt {
+    color: var(--hl-gray-02);
+  }
+
+  .kc {
+    color: var(--hl-pink);
+  }
+
+  .kd {
+    color: var(--hl-blue);
+  }
+
+  .kn,
+  .kp {
+    color: var(--hl-cyan);
+  }
+
+  .kr {
+    color: var(--hl-blue);
+  }
+
+  .kt {
+    color: var(--hl-orange);
+  }
+
+  .ld {
+    color: var(--hl-gray-02);
+  }
+
+  .m,
+  .s {
+    color: var(--hl-green);
+  }
+
+  .na {
+    color: var(--hl-yellow);
+  }
+
+  .nb {
+    color: var(--hl-orange);
+  }
+
+  .nc {
+    color: var(--hl-yellow);
+  }
+
+  .no {
+    color: var(--hl-pink);
+  }
+
+  .nd {
+    color: var(--hl-blue);
+  }
+
+  .ni,
+  .ne {
+    color: var(--hl-pink);
+  }
+
+  .nf {
+    color: var(--hl-blue);
+  }
+
+  .nl,
+  .nn,
+  .nx,
+  .py {
+    color: var(--hl-rose);
+  }
+
+  .nt,
+  .nv {
+    color: var(--hl-blue);
+  }
+
+  .ow {
+    color: var(--hl-cyan);
+  }
+
+  .w {
+    color: var(--hl-gray-02);
+  }
+
+  .mf,
+  .mh,
+  .mi,
+  .mo {
+    color: var(--hl-green);
+  }
+
+  .sb {
+    color: var(--hl-gray-01);
+  }
+
+  .sc {
+    color: var(--hl-green);
+  }
+
+  .sd {
+    color: var(--hl-gray-02);
+  }
+
+  .s2 {
+    color: var(--hl-green);
+  }
+
+  .se {
+    color: var(--hl-pink);
+  }
+
+  .sh {
+    color: var(--hl-gray-02);
+  }
+
+  .si,
+  .sx {
+    color: var(--hl-yellow);
+  }
+
+  .sr {
+    color: var(--hl-orange);
+  }
+
+  .s1,
+  .ss {
+    color: var(--hl-green);
+  }
+
+  .bp,
+  .vc,
+  .vg,
+  .vi {
+    color: var(--hl-blue);
+  }
+
+  .il {
+    color: var(--hl-green);
+  }
+}
+
+.content .highlight {
+  margin-left: 0;
+  margin-right: 0;
+  text-align: left;
+
+  &:not(:first-child) {
+    margin-top: 1em;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 1em;
+  }
+}
+
+.content li .highlight {
+  margin-top: 0.5em;
+}

docs/_sass/components/klmn.scss

@@ -0,0 +1,47 @@
+.bd-klmn {
+  margin-bottom: 1.5rem;
+}
+
+.bd-klmn-gaps {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 1.25rem;
+}
+
+.bd-klmn-label {
+  margin: 0.25rem auto 0.25rem 0;
+}
+
+.bd-klmn-value,
+.bd-klmn-gap {
+  background-color: var(--hl-gray-09);
+  border-radius: $radius;
+  color: var(--hl-orange);
+  font-family: $family-monospace;
+  font-size: 0.75rem;
+  margin: 0.25rem 0 0.25rem 0.5rem;
+  padding: 0.375em 0.75em;
+  text-align: center;
+  vertical-align: middle !important;
+  white-space: nowrap;
+
+  &.bd-is-selected {
+    background-color: var(--hl-orange);
+    color: var(--hl-gray-09);
+  }
+}
+
+.bd-klmn-value {
+  background-color: var(--hl-orange);
+  color: var(--hl-gray-09);
+  font-size: 1rem;
+}
+
+.bd-klmn-columns:last-child {
+  .bd-notification {
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+}

docs/_sass/components/links.scss

@@ -0,0 +1,41 @@
+.bd-links {
+  display: grid;
+  grid-gap: 0;
+  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
+}
+
+.bd-link {
+  border-radius: $radius-large;
+  color: $text-light;
+  display: flex;
+  font-size: 1.25em;
+  padding: 1em;
+
+  &:hover {
+    background-color: var(--primary-light);
+    color: var(--primary-dark);
+  }
+}
+
+.bd-link-title {
+}
+
+.bd-link-icon {
+  color: var(--primary);
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 1.5em;
+  margin-right: 0.5em;
+  width: 1.5em;
+}
+
+.bd-link-title {
+  color: $text-strong;
+  display: block;
+  font-weight: $weight-semibold;
+  line-height: 1.5;
+}
+
+.bd-link-subtitle {
+  font-size: 0.75em;
+}

docs/_sass/components/native.scss

@@ -0,0 +1,131 @@
+.native-js {
+  border-radius: 1.5em;
+  display: none;
+  font-size: 1rem;
+  margin: var(--newsletter-border-size);
+  margin-top: 0;
+  opacity: 0;
+  position: relative;
+  visibility: hidden;
+
+  &::before {
+    @include overlay;
+
+    background-color: #000;
+    bottom: 0;
+    content: '';
+    display: block;
+    left: 0;
+    opacity: 0.02;
+    pointer-events: none;
+    right: 0;
+    top: 0;
+  }
+}
+
+.native-show {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+}
+
+.native-flex {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 2em;
+  position: relative;
+  text-decoration: none;
+
+  &:hover {
+    .native-cta {
+      box-shadow: 0 1rem 2rem 0 rgba($scheme-invert, 0.1);
+      transform: translateY(-0.25rem);
+    }
+  }
+}
+
+.native-img {
+  border-radius: 3px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 50px;
+  width: 125px;
+}
+
+.native-details {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.native-main {
+  align-items: center;
+  flex-grow: 0;
+  flex-shrink: 1;
+  max-width: 640px;
+}
+
+.native-company {
+  display: block;
+  font-size: 0.625em;
+  letter-spacing: 2px;
+  margin-bottom: 4px;
+  text-transform: uppercase;
+}
+
+.native-desc {
+  display: block;
+}
+
+.native-cta {
+  border: none;
+  box-shadow: 0 0.5rem 1rem 0 rgba($scheme-invert, 0.2);
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-weight: $weight-semibold;
+  height: auto;
+  padding: 0.5em 1em;
+  transition-duration: $speed * 2;
+  transition-property: box-shadow, transform;
+  will-change: box-shadow, transform;
+}
+
+$native-bp: 600px;
+
+@include until($native-bp) {
+  .native-flex {
+    display: block;
+    text-align: center;
+  }
+
+  .native-main {
+    margin-bottom: 2em;
+  }
+
+  .native-details {
+    margin: 1em;
+  }
+}
+
+@include from($native-bp) {
+  .native-flex {
+    display: flex;
+    padding: 4em;
+    text-align: left;
+  }
+
+  .native-main {
+    display: flex;
+    margin-right: 2em;
+  }
+
+  .native-details {
+    margin-left: 2em;
+  }
+}
+
+@include widescreen {
+  .native-js {
+    font-size: 1.25rem;
+  }
+}

docs/_sass/components/navbar.scss

@@ -0,0 +1,382 @@
+.bd-navbar {
+  .navbar-brand img {
+    height: 28px;
+    max-height: 2em;
+    width: 112px;
+  }
+
+  .navbar-start {
+    flex-grow: 1;
+  }
+
+  .navbar-item,
+  .navbar-link {
+    padding: 0.5em 0.75em;
+  }
+
+  .button.is-sponsor.is-light {
+    color: var(--sponsor);
+  }
+
+  .bd-navbar-search-icon {
+    justify-content: center;
+    padding: 0;
+    width: 3.25rem;
+  }
+
+  .navbar-item.has-dropdown {
+    padding: 0;
+  }
+
+  .navbar-burger {
+    margin-left: 0;
+  }
+}
+
+.bd-navbar-item {
+  transition-duration: $speed;
+  transition-property: background-color, box-shadow, color;
+
+  > .icon {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  &:hover,
+  &.is-active {
+    border-radius: $radius;
+    color: var(--color-dark) !important;
+  }
+
+  &:hover:not(.is-active) {
+    background-color: var(--color-light) !important;
+  }
+
+  &.is-active {
+    background-color: transparent !important;
+    box-shadow: inset 0 0 0 2px var(--color-light) !important;
+  }
+
+  &.bd-navbar-item-documentation {
+    --color-light: var(--primary-light);
+    --color-dark: var(--primary-dark);
+  }
+
+  &.bd-navbar-item-videos {
+    --color-light: var(--videos-light);
+    --color-dark: var(--videos-dark);
+  }
+
+  &.bd-navbar-item-expo {
+    --color-light: var(--expo-light);
+    --color-dark: var(--expo-dark);
+  }
+
+  &.bd-navbar-item-love {
+    --color-light: var(--love-light);
+    --color-dark: var(--love-dark);
+  }
+
+  &.bd-navbar-item-backers {
+    --color-light: var(--patreon-light);
+    --color-dark: var(--patreon-dark);
+  }
+
+  &.bd-navbar-item-bulma-book {
+    --color-light: var(--bleeding-light);
+    --color-dark: var(--bleeding-dark);
+  }
+
+  &.bd-navbar-item-blog {
+    --color-light: var(--rss-light);
+    --color-dark: var(--rss-dark);
+  }
+
+  &.bd-navbar-item-extensions {
+    --color-light: var(--extensions-light);
+    --color-dark: var(--extensions-dark);
+  }
+
+  &.bd-navbar-item-bulma-start {
+    --color-light: var(--success-light);
+    --color-dark: var(--success-dark);
+  }
+
+  &.bd-navbar-item-made-with-bulma {
+    --color-light: var(--expo-light);
+    --color-dark: var(--expo-dark);
+  }
+}
+
+.bd-navbar-ellipsis {
+  align-items: center;
+  border-radius: $radius;
+  color: $link;
+  height: 2.25em;
+  justify-content: center;
+  padding: 0 !important;
+  width: 2.25em;
+
+  &::after {
+    display: none !important;
+  }
+}
+
+.bd-navbar-search-icon {
+  @extend %reset;
+  color: var(--search);
+  cursor: pointer;
+  margin-left: auto;
+
+  &:hover {
+    background-color: bulmaRgba(black, 0.05);
+  }
+}
+
+.bd-search {
+  .algolia-autocomplete,
+  .control {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+  }
+
+  .control {
+    > .icon.is-left {
+      color: var(--search) !important;
+    }
+  }
+
+  .input {
+    background-color: $white-ter;
+    border-color: transparent;
+    box-shadow: none;
+
+    &:hover {
+      background-color: $white-bis;
+      border-color: $border;
+      box-shadow: 0 0 0 1px $border;
+    }
+
+    &:focus {
+      background-color: transparent;
+      border-color: var(--search);
+      box-shadow: 0 0 0 1px var(--search);
+
+      & ~ .icon {
+        color: var(--search) !important;
+      }
+    }
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    color: var(--search-dark);
+    border-bottom-color: $border;
+  }
+
+  /* Category (eg. Downloads) */
+  .algolia-docsearch-suggestion--subcategory-column {
+    color: $text-light;
+  }
+
+  /* Title (eg. Bootstrap CDN) */
+  .algolia-docsearch-suggestion--title {
+    color: $text-strong;
+  }
+
+  /* Description description (eg. Bootstrap currently works...) */
+  .algolia-docsearch-suggestion--text {
+    color: $text;
+  }
+
+  /* Highlighted text */
+  .algolia-docsearch-suggestion--highlight {
+    background-color: var(--search-light);
+    color: var(--search-dark);
+  }
+
+  .algolia-autocomplete
+    .ds-dropdown-menu
+    .ds-suggestion.ds-cursor
+    .algolia-docsearch-suggestion.suggestion-layout-simple,
+  .algolia-autocomplete
+    .ds-dropdown-menu
+    .ds-suggestion.ds-cursor
+    .algolia-docsearch-suggestion:not(.suggestion-layout-simple)
+    .algolia-docsearch-suggestion--content {
+    background-color: var(--search-light);
+  }
+
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion--category-header
+    .algolia-docsearch-suggestion--category-header-lvl0
+    .algolia-docsearch-suggestion--highlight,
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion--category-header
+    .algolia-docsearch-suggestion--category-header-lvl1
+    .algolia-docsearch-suggestion--highlight,
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion--text
+    .algolia-docsearch-suggestion--highlight {
+    box-shadow: inset 0 -2px 0 0 var(--search);
+  }
+}
+
+.bd-navbar-mobile-sponsor-icon {
+  display: none !important;
+}
+
+.bd-navbar-start.bd-is-original {
+  .bd-navbar-item-more:not(.bd-is-visible) {
+    display: none;
+  }
+
+  .bd-navbar-dropdown .navbar-item.bd-is-hidden {
+    &,
+    & + .navbar-divider {
+      display: none;
+    }
+  }
+}
+
+.bd-navbar.bd-is-clone {
+  bottom: 0;
+  pointer-events: none;
+  position: fixed;
+  visibility: hidden;
+  z-index: -1;
+}
+
+@media screen and (min-width: 450px) and (max-width: $tablet - 1px) {
+  .bd-navbar-mobile-sponsor-icon {
+    display: flex !important;
+  }
+}
+
+@include until($navbar-breakpoint) {
+  .bd-navbar {
+    .navbar-start {
+      > .bd-navbar-item:not(.has-dropdown) {
+        display: flex;
+      }
+    }
+
+    .navbar-end {
+      display: none;
+    }
+  }
+
+  .bd-navbar-item {
+    .navbar-link:not(.is-arrowless) {
+      display: none;
+    }
+  }
+
+  .bd-navbar-item-more {
+    display: none !important;
+  }
+}
+
+@include from($navbar-breakpoint) {
+  .bd-navbar {
+    .navbar-menu,
+    .navbar-start,
+    .navbar-end {
+      align-items: center;
+    }
+  }
+
+  .bd-navbar-mobile-icon {
+    display: none;
+  }
+
+  .bd-navbar-dropdown {
+    left: auto;
+    right: 0;
+    width: 16rem;
+    z-index: 200;
+
+    .navbar-item {
+      white-space: normal;
+    }
+  }
+}
+
+@include touch() {
+  .bd-search {
+    background-color: $scheme-main;
+    box-shadow: 0 0.5em 1em rgba(black, 0.05);
+    display: none;
+    left: 0;
+    padding: $navbar-padding-vertical;
+    position: fixed;
+    right: 0;
+    top: $navbar-height;
+    z-index: 100;
+
+    &.bd-is-visible {
+      display: block;
+    }
+
+    .algolia-autocomplete {
+      .ds-dropdown-menu {
+        left: 0px !important;
+        min-width: 0px;
+        right: auto;
+      }
+    }
+  }
+}
+
+@include desktop() {
+  .bd-navbar {
+    padding: 1rem 2rem;
+
+    .navbar-brand .navbar-item:first-child {
+      margin-left: -0.75em;
+    }
+
+    .navbar-menu {
+      flex-shrink: 1;
+    }
+
+    .navbar-start {
+      flex-shrink: 1;
+    }
+  }
+
+  .bd-navbar-search-icon {
+    display: none;
+  }
+
+  .bd-search {
+    align-items: center;
+    display: flex;
+    // margin-left: 0.5rem;
+    width: 16rem;
+  }
+}
+
+@include widescreen() {
+  .bd-navbar {
+    font-size: 1.125rem;
+    padding: 2rem 4rem;
+
+    .navbar-brand img {
+      height: 36px;
+      width: 144px;
+    }
+  }
+
+  .bd-navbar-dropdown {
+    left: 0;
+    right: auto;
+  }
+}
+
+@include fullhd() {
+  .bd-search {
+    width: 16rem;
+  }
+}

docs/_sass/components/notification.scss

@@ -0,0 +1,37 @@
+.bd-notification {
+  background-color: $background;
+  border-radius: $radius;
+  color: $text-light;
+  font-weight: $weight-semibold;
+  padding: 1.25rem 0;
+  position: relative;
+  text-align: center;
+
+  .title,
+  .subtitle,
+  .content,
+  strong {
+    color: currentColor;
+  }
+
+  code,
+  pre {
+    background-color: rgba($scheme-invert, 0.2);
+    border-radius: $radius;
+    color: $scheme-main;
+  }
+
+  pre code {
+    background-color: transparent;
+  }
+
+  // Colors
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    &.is-#{$name} {
+      background-color: $color;
+      color: $color-invert;
+    }
+  }
+}

docs/_sass/components/options.scss

@@ -0,0 +1,135 @@
+.bd-options {
+  display: grid;
+}
+
+.bd-option {
+  .media-content {
+    overflow-x: visible;
+  }
+}
+
+.bd-option-or {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+
+  &::before {
+    background-color: $scheme-main-ter;
+    content: '';
+    position: absolute;
+  }
+
+  p {
+    @extend %center;
+
+    background-color: $scheme-main-ter;
+    border-radius: $radius-rounded;
+    font-size: 0.75em;
+    font-weight: $weight-semibold;
+    height: 3.5rem;
+    position: relative;
+    text-transform: uppercase;
+    width: 3.5rem;
+  }
+}
+
+.bd-option-item {
+  border-top: 2px solid $scheme-main-ter;
+  margin-top: $block-spacing;
+  padding-top: $block-spacing;
+
+  .bd-fat-button.is-pulled-right {
+    font-size: 0.75em;
+    pointer-events: none;
+  }
+
+  .bd-fat-button.is-primary {
+    font-size: 1em;
+  }
+
+  .highlight pre {
+    white-space: pre-wrap;
+    white-space: break-spaces;
+  }
+}
+
+@include until($widescreen) {
+  .bd-options {
+    grid-template-columns: 1fr;
+  }
+
+  .bd-option-or {
+    margin: $block-spacing 0;
+
+    &::before {
+      height: 2px;
+      left: 0;
+      right: 0;
+      top: calc(50% - 1px);
+    }
+  }
+}
+
+@include widescreen {
+  .bd-options {
+    grid-template-columns: calc(50% - 4rem) 8rem calc(50% - 4rem);
+  }
+
+  .bd-option-or {
+    &::before {
+      bottom: 0;
+      left: calc(50% - 1px);
+      top: 0;
+      width: 2px;
+    }
+  }
+}
+
+.bd-tabs {
+  @extend %block;
+}
+
+.bd-tabs-nav {
+  display: flex;
+
+  button {
+    @extend %reset;
+
+    background-color: $scheme-main-ter;
+    border-radius: 0.375em 0.375em 0 0;
+    color: $text-light;
+    cursor: pointer;
+    flex-shrink: 0;
+    font-family: $family-monospace;
+    font-size: 0.75em;
+    padding: 0.5em 0.75em;
+
+    &:not(.bd-is-active) {
+      &:hover {
+        color: var(--hl-background);
+      }
+    }
+
+    &.bd-is-active {
+      background-color: var(--hl-background);
+      color: var(--hl-color);
+    }
+
+    &:not(:last-child) {
+      margin-right: 1em;
+    }
+  }
+}
+
+.bd-tabs-item {
+  display: none;
+
+  .highlight {
+    border-top-left-radius: 0;
+  }
+
+  &.bd-is-active {
+    display: block;
+  }
+}

docs/_sass/components/pagination.scss

@@ -0,0 +1,48 @@
+.bd-pagination {
+  padding: 0 3rem;
+}
+
+.bd-pagination-links,
+.bd-pagination-body {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.bd-pagination-body {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--container-width-desktop);
+}
+
+.bd-docs-pagination {
+  .button {
+    span {
+      line-height: 1.25;
+      text-align: left;
+    }
+
+    em {
+      display: block;
+      font-size: 0.75em;
+      font-style: normal;
+      font-weight: $weight-normal;
+      opacity: 0.5;
+      text-transform: capitalize;
+    }
+  }
+
+  .bd-pagination-prev {
+    span {
+      margin-left: 1em;
+      text-align: left;
+    }
+  }
+
+  .bd-pagination-next {
+    margin-left: auto;
+
+    span {
+      margin-right: 1em;
+    }
+  }
+}

docs/_sass/components/screenshots.scss

@@ -0,0 +1,22 @@
+.bd-screenshots {
+  display: grid;
+  grid-gap: $block-spacing;
+  grid-template-columns: 1fr;
+
+  .bd-screenshot {
+    position: relative;
+
+    &:hover {
+      box-shadow: 0 1em 1em rgba(black, 0.1);
+      transform: translateY(-0.5em);
+    }
+  }
+}
+
+@include tablet {
+  .bd-screenshots {
+    grid-template-columns: repeat(auto-fill, minmax(336px, 1fr));
+    margin: 0 auto;
+    max-width: var(--container-width);
+  }
+}

docs/_sass/components/variables.scss

@@ -0,0 +1,175 @@
+.bd-vars {
+  --bd-var-name-width: 100%;
+  --bd-var-computed-type-width: 50%;
+  --bd-var-type-width: 50%;
+  --bd-var-computed-value-width: 50%;
+  --bd-var-value-width: 50%;
+
+  background-color: var(--hl-background);
+  border-radius: $radius-large;
+  color: var(--hl-color);
+  padding: 3.25em;
+  padding-top: 2em;
+
+  .bd-anchor-title {
+    color: $white;
+  }
+}
+
+.bd-var {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: $family-monospace;
+  font-size: 0.75em;
+  line-height: 1.375;
+
+  .highlight {
+    background: none;
+    font-size: 1em;
+    overflow: visible;
+
+    pre {
+      overflow: visible;
+      padding: 0;
+      white-space: pre-wrap;
+      white-space: break-spaces;
+    }
+  }
+
+  .bd-copy {
+    font-size: 0.5em !important;
+    right: 0;
+    top: 0;
+  }
+
+  &.bd-is-body {
+    border-radius: $radius;
+
+    &:hover {
+      background-color: rgba(white, 0.1);
+    }
+  }
+
+  &.bd-is-head {
+    border-bottom: 2px solid rgba(white, 0.1);
+    border-radius: 0;
+    margin-bottom: 0.5em;
+    padding-bottom: 0.5em;
+
+    %bd-var-item {
+      color: var(--hl-gray-02) !important;
+    }
+  }
+}
+
+.bd-var-name {
+  @extend %bd-var-item;
+  color: var(--hl-gray-01);
+  width: var(--bd-var-name-width);
+}
+
+.bd-var-type {
+  @extend %bd-var-item;
+  color: var(--bd-var-type-color, var(--hl-gray-02));
+  width: var(--bd-var-type-width);
+}
+
+.bd-var-value {
+  @extend %bd-var-item;
+  color: var(--hl-green);
+  width: var(--bd-var-value-width);
+}
+
+.bd-var-computed-value {
+  @extend %bd-var-item;
+  color: var(--hl-yellow);
+  width: var(--bd-var-computed-value-width);
+}
+
+.bd-var-computed-type {
+  @extend %bd-var-item;
+  color: var(--bd-var-type-color, var(--hl-purple));
+  width: var(--bd-var-computed-type-width);
+}
+
+.bd-var {
+  .bd-is-boolean {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-color {
+    --bd-var-type-color: var(--hl-orange);
+  }
+
+  .bd-is-compound {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-font-weight {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-function {
+    --bd-var-type-color: var(--hl-pink);
+  }
+
+  .bd-is-size {
+    --bd-var-type-color: var(--hl-pink);
+  }
+
+  .bd-is-shadow {
+    --bd-var-type-color: var(--hl-lavender);
+  }
+
+  .bd-is-string {
+    --bd-var-type-color: var(--hl-yellow);
+  }
+
+  .bd-is-variable {
+    --bd-var-type-color: var(--hl-green);
+  }
+}
+
+@include touch {
+  %bd-var-item {
+    padding: 0 1em;
+  }
+
+  .bd-vars {
+    padding: 1em;
+  }
+
+  .bd-var {
+    padding: 0.5em 0;
+  }
+}
+
+@include desktop {
+  %bd-var-item {
+    padding: 0.25em 1em;
+  }
+
+  .bd-var.bd-is-head {
+    .bd-var-name {
+      padding-left: 0;
+    }
+
+    .bd-var-computed-type {
+      padding-left: 2em;
+      padding-right: 0;
+    }
+  }
+
+  .bd-var.bd-is-body {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+
+  .bd-vars {
+    --bd-var-name-width: 40%;
+    --bd-var-computed-type-width: 10%;
+    --bd-var-type-width: 10%;
+    --bd-var-computed-value-width: 20%;
+    --bd-var-value-width: 20%;
+  }
+}

docs/_sass/global/cc.scss

@@ -0,0 +1,73 @@
+.cpck-window {
+  background-color: $white;
+  box-shadow: 0 0 1em rgba(black, 0.1);
+  padding: 1em 1.5em;
+  position: fixed;
+  z-index: 10;
+}
+
+.cpck-invisible {
+  display: none !important;
+}
+
+.cpck-link {
+  border-bottom: 1px solid $link;
+  padding-bottom: 2px;
+
+  &:hover {
+    border-bottom-width: 2px;
+  }
+
+  &:active {
+    background-color: $link-light;
+  }
+}
+
+.cpck-compliance {
+  margin-top: 1em;
+}
+
+.cpck-btn {
+  border: 2px solid $success;
+  border-radius: $radius;
+  color: $success;
+  display: inline-block;
+  font-weight: $weight-bold;
+  padding: 0.5em 1em;
+  vertical-align: top;
+
+  span {
+    margin-left: -0.125em;
+    margin-right: 0.5em;
+  }
+
+  &:hover {
+    background-color: $success-light;
+    color: $success-dark;
+  }
+
+  &:active,
+  &:focus {
+    background-color: darken($success-light, 5%);
+    border-color: $success-dark;
+    color: darken($success-dark, 5%);
+    outline: none;
+  }
+}
+
+@include mobile {
+  .cpck-window {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+@include tablet {
+  .cpck-window {
+    border-radius: $radius;
+    bottom: 1em;
+    right: 1em;
+    width: 20rem;
+  }
+}

docs/_sass/global/footer.scss

@@ -0,0 +1,302 @@
+.bd-footer-title {
+  color: $text-light;
+  font-size: $size-5;
+  line-height: 1.25;
+  margin-bottom: 0.5rem;
+  transition-duration: $speed;
+  transition-property: color;
+
+  strong {
+    color: currentColor;
+    font-weight: $weight-semibold;
+  }
+}
+
+.bd-footer-subtitle {
+  color: $border-hover;
+  margin-top: -0.5rem;
+  transition-duration: $speed;
+  transition-property: color;
+}
+
+.bd-footer-iframe {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: -10px;
+  min-height: 30px;
+
+  iframe {
+    height: 30px;
+    margin-bottom: 10px;
+  }
+
+  .fb-like {
+    margin-left: 10px;
+  }
+
+  &.is-github {
+    iframe {
+      width: 100%;
+    }
+  }
+}
+
+.bd-footer-tsp {
+  color: $border-hover;
+  margin-top: 1.5rem;
+}
+
+%bd-footer-box {
+  @extend %bd-box;
+
+  text-align: center;
+
+  .bd-footer-title {
+    font-size: 1.5rem;
+  }
+}
+
+// Support
+
+.bd-footer-support {
+  @extend %bd-footer-box;
+
+  border-top: 2px solid $scheme-main-ter;
+  box-shadow: none;
+  padding: 3rem;
+
+  .bd-footer-title {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.bd-footer-donations {
+  justify-content: center;
+}
+
+.bd-footer-donation {
+  flex: none;
+}
+
+.bd-footer-donation-items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .bd-footer-sponsor {
+    width: 12rem;
+  }
+}
+
+.bd-footer-sponsor a {
+  @extend %center;
+
+  height: 70px;
+}
+
+@include tablet {
+  .bd-footer-donation {
+    padding: 0.75rem 1.5rem;
+  }
+}
+
+.bd-footer-donation-title {
+  color: $border-hover;
+  margin-bottom: 0.5rem;
+
+  strong {
+    color: currentColor;
+  }
+}
+
+.bd-footer-donation-action {
+  @extend %center;
+
+  height: 70px;
+
+  .bd-github-button {
+    margin-right: 0.5rem;
+  }
+
+  .bd-github-button,
+  .bd-patreon-button {
+    flex-shrink: 0;
+  }
+
+  .paypal-form {
+    height: 30px;
+
+    img {
+      display: block;
+    }
+  }
+}
+
+// Stars
+
+$star-figure-height: 156px;
+
+.bd-footer-stars {
+  margin-top: 2.5rem;
+
+  @include tablet {
+    align-items: stretch;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.bd-footer-star {
+  @extend %bd-footer-box;
+
+  transition-duration: $speed;
+  transition-property: box-shadow, transform;
+  will-change: box-shadow, transform;
+
+  @include mobile {
+    &:not(:last-child) {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  @include tablet {
+    width: calc(33.3333% - 2rem);
+  }
+
+  &:hover {
+    box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1);
+    transform: translateY(-0.5rem);
+
+    .bd-footer-title,
+    .bd-footer-subtitle {
+      color: $link;
+    }
+  }
+
+  &.bd-is-expo,
+  &.bd-is-love {
+    padding-bottom: $star-figure-height;
+
+    .bd-footer-title {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+
+      .icon {
+        margin-right: 0.25em;
+      }
+    }
+  }
+
+  &.bd-is-expo {
+    background-image: url('/images/footer/expo-examples.png');
+    background-repeat: repeat-x;
+    background-position: bottom center;
+    background-size: 352px $star-figure-height;
+  }
+
+  &.bd-is-love {
+    background-image: url('/images/footer/love.png');
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 440px 180px;
+  }
+}
+
+.bd-footer-star-header {
+  padding: 1.5rem;
+}
+
+.bd-footer-star-figure {
+  @extend %center;
+
+  height: $star-figure-height;
+  margin-top: -1rem;
+}
+
+// Links
+
+.bd-footer-links {
+  margin-top: 6rem;
+  padding-bottom: 6rem;
+
+  a {
+    color: currentColor;
+
+    &:hover {
+      color: $link;
+    }
+  }
+}
+
+.bd-footer-link-title {
+  color: $text-strong;
+  font-size: 1.25rem;
+  font-weight: $weight-semibold;
+
+  &:not(:first-child) {
+    margin-top: 1.5em;
+  }
+}
+
+.bd-footer-link {
+  margin-top: 0.5rem;
+
+  &.bd-is-more {
+    font-size: 0.875rem;
+
+    a:not(:hover) {
+      color: $border-hover;
+    }
+  }
+
+  &.bd-has-subtitle {
+    a {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+
+      strong {
+        flex-grow: 1;
+        flex-shrink: 1;
+        font-weight: unset;
+      }
+
+      em {
+        display: block;
+        font-size: 0.875rem;
+        font-style: normal;
+      }
+
+      &:not(:hover) {
+        em {
+          color: $border-hover;
+        }
+      }
+
+      @include mobile {
+        flex-wrap: wrap;
+        margin-top: 1rem;
+
+        em {
+          width: 100%;
+        }
+      }
+
+      @include tablet {
+        em {
+          margin-left: 1rem;
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+
+.bd-footer-link-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: 0.5em;
+  text-align: center;
+  width: 1em;
+}

docs/_sass/global/newsletter.scss

@@ -0,0 +1,182 @@
+:root {
+  --newsletter-strip-size: 16px;
+  --newsletter-border-size: #{$block-spacing};
+}
+
+#newsletter {
+  background: $scheme-main-bis;
+  padding: var(--newsletter-border-size);
+  padding-top: 0;
+
+  .bd-drawing {
+    display: none;
+  }
+}
+
+.bd-newsletter-heading {
+  > .icon {
+    font-size: $title-size;
+    height: 1.125em;
+    width: 1.125em;
+  }
+
+  .title,
+  .subtitle {
+    font-weight: $weight-normal;
+
+    strong {
+      color: inherit;
+      font-weight: $weight-semibold;
+    }
+
+    small {
+      color: $text-light;
+      display: block;
+      font-size: 0.75em;
+    }
+  }
+
+  .subtitle {
+    color: $text-light;
+  }
+
+  .bd-fat-button {
+    font-weight: $weight-normal;
+
+    strong {
+      font-weight: $weight-semibold;
+    }
+  }
+}
+
+.bd-newsletter-fields {
+  display: grid;
+  grid-gap: $block-spacing / 2;
+  grid-template-columns: minmax(20em, 1fr) auto;
+}
+
+.bd-newsletter-box {
+  background-color: $scheme-main;
+  background-image: url('/images/hab/newsletter-strip.png');
+  background-repeat: repeat-x;
+  background-size: 96px var(--newsletter-strip-size);
+  border-radius: 1.5em;
+  box-shadow: 0 0 0 1px $scheme-main-ter;
+
+  .icon {
+    align-self: flex-start;
+  }
+
+  form .input {
+    &:not(:focus):not(:hover) {
+      border-color: $border;
+    }
+  }
+}
+
+@include mobile {
+  .bd-newsletter-box {
+    padding-top: calc(#{$block-spacing} + var(--newsletter-strip-size));
+  }
+
+  .bd-newsletter-fields {
+    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
+  }
+}
+
+@include touch {
+  .bd-newsletter-heading {
+    margin-bottom: var(--bd-index-vertical);
+
+    .icon {
+      float: left;
+      margin-right: $block-spacing / 2;
+    }
+
+    .subtitle {
+      margin: ($block-spacing / 2) 0 !important;
+    }
+
+    form {
+      margin-top: $block-spacing;
+    }
+  }
+}
+
+@include tablet {
+  .bd-newsletter-box {
+    padding-top: calc(var(--bd-index-vertical) + var(--newsletter-strip-size));
+  }
+}
+
+@include desktop {
+  .bd-newsletter-heading {
+    display: grid;
+    // prettier-ignore
+    grid-template-columns:
+      ($block-spacing * 2)
+      ($block-spacing * 2)
+      1fr
+      1fr
+      ($block-spacing * 2)
+      ($block-spacing * 2);
+
+    > .icon {
+      grid-column: 2;
+    }
+
+    .title {
+      grid-column: 3;
+      max-width: 9em;
+    }
+
+    .subtitle {
+      grid-column: 4;
+      max-width: 10em;
+    }
+
+    form {
+      grid-column: 4;
+    }
+  }
+}
+
+@include widescreen {
+  :root {
+    --newsletter-border-size: #{$bd-edge-width / 2};
+  }
+
+  #newsletter {
+    .bd-drawing {
+      display: block;
+    }
+  }
+
+  .bd-newsletter-heading {
+    // prettier-ignore
+    grid-template-columns:
+      ($block-spacing * 3)
+      ($block-spacing * 3)
+      1fr
+      1fr
+      ($block-spacing * 3)
+      ($block-spacing * 3);
+  }
+
+  .bd-newsletter-box {
+    box-shadow: 0 1em 2em rgba(black, 0.05);
+  }
+}
+
+@include from(1780px) {
+  .bd-newsletter-heading {
+    // prettier-ignore
+    grid-template-columns:
+      minmax(#{$block-spacing * 2}, 1fr)
+      ($block-spacing * 3)
+      calc(var(--container-width) / 2)
+      calc(var(--container-width) / 2)
+      ($block-spacing * 3)
+      minmax(#{$block-spacing * 2}, 1fr);
+  }
+}

docs/_sass/global/support.scss

@@ -0,0 +1,309 @@
+.bd-footer-title {
+  color: $text-light;
+  font-size: $size-5;
+  line-height: 1.25;
+  margin-bottom: 0.5rem;
+  transition-duration: $speed;
+  transition-property: color;
+
+  strong {
+    color: currentColor;
+    font-weight: $weight-semibold;
+  }
+}
+
+.bd-footer-subtitle {
+  color: $border-hover;
+  margin-top: -0.5rem;
+  transition-duration: $speed;
+  transition-property: color;
+}
+
+.bd-footer-iframe {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: -10px;
+  min-height: 30px;
+
+  iframe {
+    height: 30px;
+    margin-bottom: 10px;
+  }
+
+  .fb-like {
+    margin-left: 10px;
+  }
+
+  &.is-github {
+    iframe {
+      width: 100%;
+    }
+  }
+}
+
+.bd-footer-tsp {
+  color: $border-hover;
+  margin-top: $block-spacing;
+}
+
+%bd-footer-box {
+  @extend %bd-box;
+
+  text-align: center;
+
+  .bd-footer-title {
+    font-size: $size-4;
+  }
+}
+
+// Support
+
+.bd-footer-support {
+  @extend %bd-footer-box;
+
+  background-color: $scheme-main-bis;
+  box-shadow: none;
+  padding: 3rem;
+
+  .bd-footer-title {
+    margin-bottom: $block-spacing;
+  }
+}
+
+.bd-footer-donations {
+  justify-content: center;
+}
+
+.bd-footer-donation {
+  flex: none;
+}
+
+.bd-footer-donation-items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .bd-footer-sponsor {
+    width: 12rem;
+  }
+}
+
+.bd-footer-sponsor {
+  @extend %center;
+
+  height: 70px;
+}
+
+@include tablet {
+  .bd-footer-donation {
+    padding: 0.75rem $block-spacing;
+  }
+}
+
+@include desktop {
+  .bd-footer-support {
+    padding-bottom: 6rem;
+    padding-top: 6rem;
+  }
+}
+
+.bd-footer-donation-title {
+  color: $border-hover;
+  margin-bottom: 0.5rem;
+
+  strong {
+    color: currentColor;
+  }
+}
+
+.bd-footer-donation-action {
+  @extend %center;
+
+  height: 70px;
+
+  .bd-github-button {
+    margin-right: 0.5rem;
+  }
+
+  .bd-github-button,
+  .bd-patreon-button {
+    flex-shrink: 0;
+  }
+
+  .paypal-form {
+    height: 30px;
+
+    img {
+      display: block;
+    }
+  }
+}
+
+// Stars
+
+$star-figure-height: 156px;
+
+.bd-footer-stars {
+  margin-top: 2.5rem;
+
+  @include tablet {
+    align-items: stretch;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.bd-footer-star {
+  @extend %bd-footer-box;
+
+  transition-duration: $speed;
+  transition-property: box-shadow, transform;
+  will-change: box-shadow, transform;
+
+  @include mobile {
+    &:not(:last-child) {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  @include tablet {
+    width: calc(33.3333% - 2rem);
+  }
+
+  &:hover {
+    box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1);
+    transform: translateY(-0.5rem);
+
+    .bd-footer-title,
+    .bd-footer-subtitle {
+      color: $link;
+    }
+  }
+
+  &.bd-is-expo,
+  &.bd-is-love {
+    padding-bottom: $star-figure-height;
+
+    .bd-footer-title {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+
+      .icon {
+        margin-right: 0.25em;
+      }
+    }
+  }
+
+  &.bd-is-expo {
+    background-image: url('/images/footer/expo-examples.png');
+    background-repeat: repeat-x;
+    background-position: bottom center;
+    background-size: 352px $star-figure-height;
+  }
+
+  &.bd-is-love {
+    background-image: url('/images/footer/love.png');
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 440px 180px;
+  }
+}
+
+.bd-footer-star-header {
+  padding: 1.5rem;
+}
+
+.bd-footer-star-figure {
+  @extend %center;
+
+  height: $star-figure-height;
+  margin-top: -1rem;
+}
+
+// Links
+
+.bd-footer-links {
+  margin-top: 6rem;
+  padding-bottom: 6rem;
+
+  a {
+    color: currentColor;
+
+    &:hover {
+      color: $link;
+    }
+  }
+}
+
+.bd-footer-link-title {
+  color: $text-strong;
+  font-size: 1.25rem;
+  font-weight: $weight-semibold;
+
+  &:not(:first-child) {
+    margin-top: 1.5em;
+  }
+}
+
+.bd-footer-link {
+  margin-top: 0.5rem;
+
+  &.bd-is-more {
+    font-size: 0.875rem;
+
+    a:not(:hover) {
+      color: $border-hover;
+    }
+  }
+
+  &.bd-has-subtitle {
+    a {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+
+      strong {
+        flex-grow: 1;
+        flex-shrink: 1;
+        font-weight: unset;
+      }
+
+      em {
+        display: block;
+        font-size: 0.875rem;
+        font-style: normal;
+      }
+
+      &:not(:hover) {
+        em {
+          color: $border-hover;
+        }
+      }
+
+      @include mobile {
+        flex-wrap: wrap;
+        margin-top: 1rem;
+
+        em {
+          width: 100%;
+        }
+      }
+
+      @include tablet {
+        em {
+          margin-left: 1rem;
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+
+.bd-footer-link-icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: 0.5em;
+  text-align: center;
+  width: 1em;
+}

docs/_sass/index/best.scss

@@ -0,0 +1,88 @@
+$best-item-width: 520;
+$best-screenshot-width: 504;
+$best-count: 6;
+$best-more-count: 6;
+$best-total-count: $best-count + (2 * $best-more-count);
+$best-total-width: $best-item-width * $best-total-count;
+$best-speed: 100; // px per second
+$best-duration: $best-total-width / $best-speed * 1s;
+$best-padding: $block-spacing;
+$best-height: 386px;
+
+.bd-best {
+  height: calc(#{$best-height} + #{$best-padding * 2});
+  padding: $best-padding 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.bd-best-list {
+  align-items: stretch;
+  animation-duration: $best-duration;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  display: flex;
+  left: 0;
+  position: absolute;
+  top: $best-padding;
+
+  animation-name: bdBestCarousel;
+  // flex-wrap: wrap;
+
+  &:hover {
+    animation-play-state: paused;
+  }
+}
+
+.bd-best-item {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin-right: ($best-item-width - $best-screenshot-width) * 1px;
+  transition-duration: $speed * 2;
+  transition-property: box-shadow, transform;
+  width: $best-screenshot-width * 1px;
+
+  &.bd-is-medium {
+    font-size: 1.125em;
+  }
+
+  &.bd-is-large {
+    font-size: 1.25em;
+  }
+
+  &.bd-is-huge {
+    font-size: 1.5em;
+  }
+
+  &:hover {
+    box-shadow: 0 1em 1em rgba(black, 0.1);
+    transform: translateY(-0.5em);
+  }
+}
+
+.bd-screenshot {
+  align-self: flex-start;
+  display: block;
+  transition-duration: $speed * 2;
+  transition-property: box-shadow, transform;
+
+  &,
+  img {
+    border-radius: $radius-large;
+  }
+
+  img {
+    display: inline-block;
+    height: auto;
+    vertical-align: top;
+    width: auto;
+  }
+}
+
+@keyframes bdBestCarousel {
+  100% {
+    transform: translateX(
+      calc(-100% + #{$best-item-width * $best-more-count * 1px})
+    );
+  }
+}

docs/_sass/index/columns.scss

@@ -0,0 +1,65 @@
+#grid {
+  .notification {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.bd-columns-tools {
+  margin-top: 3rem;
+}
+
+.bd-columns-tool {
+  @extend %center;
+
+  .highlight {
+    font-size: 0.875em;
+  }
+
+  &.bd-is-try {
+    .buttons {
+      justify-content: center;
+    }
+    .button {
+      strong {
+        font-weight: $weight-semibold;
+      }
+    }
+  }
+}
+
+#markup {
+  width: 100%;
+
+  .highlight pre {
+    max-height: none;
+  }
+}
+
+#message {
+  display: none;
+  margin-top: 3rem;
+}
+
+@include mobile {
+  .bd-columns-tool {
+    &.bd-is-markup {
+      margin-top: 3rem;
+    }
+  }
+}
+
+@include tablet {
+  .bd-columns-tools {
+    align-items: flex-start;
+    display: flex;
+  }
+
+  .bd-columns-tool {
+    width: 50%;
+
+    &.bd-is-try {
+      padding-top: 60px;
+    }
+  }
+}

docs/_sass/index/custom.scss

@@ -0,0 +1,90 @@
+// Customize
+
+.bd-index-custom-title {
+  color: $border-hover;
+}
+
+.bd-index-custom-example {
+  padding: 1rem;
+
+  .subtitle {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.bd-index-custom.bd-is-after {
+  color: $brown;
+  font-family: 'Nunito', serif;
+  margin-top: 0.5rem;
+
+  a {
+    color: $pink;
+
+    &:hover {
+      color: #363636;
+    }
+  }
+
+  .subtitle {
+    color: $brown;
+  }
+
+  .input,
+  .select select {
+    background-color: $beige-lighter;
+    border-color: transparent;
+    border-width: 2px;
+    box-shadow: none;
+    font-family: 'Nunito', serif;
+
+    &:hover {
+      border-color: $beige-light;
+    }
+
+    &:focus {
+      border-color: $pink;
+      box-shadow: 0 0 0 0.125em rgba($pink, 0.25);
+    }
+  }
+
+  .select {
+    &:not(.is-multiple):not(:hover) {
+      &::after {
+        border-color: $pink;
+      }
+    }
+  }
+
+  .button {
+    &.is-primary {
+      background-color: $mauve;
+      color: $scheme-main;
+
+      &:hover {
+        background-color: darken($mauve, 2.5%);
+      }
+
+      &:active {
+        background-color: darken($mauve, 5%);
+      }
+    }
+
+    &.is-link {
+      background-color: $pink;
+      color: $scheme-main;
+
+      &:hover {
+        background-color: darken($pink, 2.5%);
+      }
+
+      &:active {
+        background-color: darken($pink, 5%);
+      }
+    }
+  }
+
+  @include selection {
+    background-color: $pink;
+    color: $scheme-main;
+  }
+}

docs/_sass/index/focus-animations.scss

@@ -0,0 +1,362 @@
+@keyframes bdGrow {
+  from {
+    transform: scale(0);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes bdSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bdSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1);
+$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86);
+$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+$duration: 500ms;
+$delay: 250ms;
+$wait: 500ms;
+
+$focus-delay: 0;
+
+%bd-focus-animation {
+  animation-duration: $duration;
+  animation-fill-mode: both;
+  animation-timing-function: $cubic-less-dramatic;
+  transform-origin: center center;
+}
+
+$delay-subtitle: $delay / 2;
+
+// Titles
+.bd-focus-item {
+  .title {
+    @extend %bd-focus-animation;
+
+    animation-name: bdSlideDown;
+  }
+
+  .subtitle {
+    @extend %bd-focus-animation;
+
+    animation-name: bdSlideUp;
+  }
+
+  &:nth-child(1) {
+    .title {
+      animation-delay: $focus-delay;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $delay-subtitle;
+    }
+  }
+
+  &:nth-child(2) {
+    .title {
+      animation-delay: $focus-delay + $wait;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $wait + $delay-subtitle;
+    }
+  }
+
+  &:nth-child(3) {
+    .title {
+      animation-delay: $focus-delay + $wait * 2;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $wait * 2 + $delay-subtitle;
+    }
+  }
+
+  &:nth-child(4) {
+    .title {
+      animation-delay: $focus-delay + $wait * 3;
+    }
+
+    .subtitle {
+      animation-delay: $focus-delay + $wait * 3 + $delay-subtitle;
+    }
+  }
+}
+
+// Devices
+%bd-focus-animation-device {
+  @extend %bd-focus-animation;
+
+  animation-name: bdGrow;
+  transform-origin: bottom center;
+}
+
+.bd-focus-mobile {
+  @extend %bd-focus-animation-device;
+
+  animation-delay: $focus-delay;
+}
+
+.bd-focus-tablet {
+  @extend %bd-focus-animation-device;
+
+  animation-delay: $focus-delay + $delay;
+}
+
+.bd-focus-desktop {
+  @extend %bd-focus-animation-device;
+
+  animation-delay: $focus-delay + $delay * 2;
+}
+
+// Cubes
+$cube-factor: 10px;
+
+@keyframes bdCube1 {
+  0% {
+    transform: translate3d(0, -5 * $cube-factor, 0);
+    opacity: 0;
+  }
+
+  25%,
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bdCube2 {
+  0% {
+    transform: translate3d(-4 * $cube-factor, 3 * $cube-factor, 0);
+    opacity: 0;
+  }
+
+  25%,
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bdCube3 {
+  0% {
+    transform: translate3d(4 * $cube-factor, 3 * $cube-factor, 0);
+    opacity: 0;
+  }
+
+  25%,
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+%bd-focus-animation-cube {
+  @extend %bd-focus-animation;
+
+  animation-direction: alternate;
+  animation-duration: $duration * 4;
+  animation-iteration-count: infinite;
+}
+
+.bd-focus-cube-1 {
+  @extend %bd-focus-animation-cube;
+
+  animation-delay: $focus-delay + $wait;
+  animation-name: bdCube1;
+}
+
+.bd-focus-cube-2 {
+  @extend %bd-focus-animation-cube;
+
+  animation-name: bdCube2;
+  animation-delay: $focus-delay + $wait + $delay;
+}
+
+.bd-focus-cube-3 {
+  @extend %bd-focus-animation-cube;
+
+  animation-name: bdCube3;
+  animation-delay: $focus-delay + $wait + $delay * 2;
+}
+
+@keyframes bdFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bdSlowIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bdScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.bd-focus-css3 {
+  @extend %bd-focus-animation;
+
+  animation-delay: $focus-delay + $wait * 2;
+  animation-name: bdScaleIn;
+}
+
+.bd-focus-github {
+  @extend %bd-focus-animation;
+
+  animation-delay: $focus-delay + $wait * 3;
+  animation-duration: $duration * 3;
+  animation-name: bdJellyPop;
+}
+
+@keyframes bdJellyPop {
+  0% {
+    opacity: 0;
+    transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  3.4% {
+    opacity: 1;
+    transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  4.7% {
+    transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  6.81% {
+    transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  9.41% {
+    transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  10.21% {
+    transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  13.61% {
+    transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  14.11% {
+    transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  17.52% {
+    transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  18.72% {
+    transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  21.32% {
+    transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  24.32% {
+    transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  25.23% {
+    transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  29.03% {
+    transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  29.93% {
+    transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  35.54% {
+    transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  36.74% {
+    transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  41.04% {
+    transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  44.44% {
+    transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  52.15% {
+    transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  59.86% {
+    transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  63.26% {
+    transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  75.28% {
+    transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  85.49% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  90.69% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}

docs/_sass/index/focus.scss

@@ -0,0 +1,185 @@
+.bd-focus {
+  // display: none;
+  padding: $block-spacing;
+
+  > .container {
+    // max-width: none !important;
+  }
+}
+
+.bd-focus-item {
+  @extend %link-before-background;
+
+  align-items: center;
+  border-radius: $radius-large;
+  display: flex;
+  padding: $block-spacing;
+  position: relative;
+
+  .title a,
+  .subtitle {
+    transition-duration: $speed * 2;
+    transition-property: color;
+  }
+
+  .title {
+    position: relative;
+    transition-duration: $speed * 2;
+    transition-property: color;
+  }
+
+  .subtitle {
+    color: $text-light;
+    position: relative;
+
+    strong {
+      color: currentColor;
+    }
+
+    .subtitle {
+      color: $text;
+    }
+  }
+
+  &:nth-child(1):hover {
+    .title {
+      color: $orange;
+    }
+  }
+
+  &:nth-child(2):hover {
+    .title {
+      color: $success;
+    }
+  }
+
+  &:nth-child(3):hover {
+    .title {
+      color: $link;
+    }
+  }
+
+  &:nth-child(4):hover {
+    .title {
+      color: $scheme-invert;
+    }
+  }
+}
+
+.bd-focus-graph {
+  align-items: center;
+  display: flex;
+  height: 3rem;
+  justify-content: center;
+  margin-right: $block-spacing;
+  width: 3rem;
+}
+
+.bd-focus-icon {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  position: relative;
+}
+
+.bd-focus-device {
+  --device-y: 4px;
+  --device-x: 2px;
+
+  --device-sm-deg: 14deg;
+  --device-md-deg: -21deg;
+  --device-lg-deg: -86deg;
+  --device-deg: var(--device-sm-deg);
+
+  --device-sm-height: 24px;
+  --device-sm-width: 16px;
+
+  --device-md-height: 32px;
+  --device-md-width: 24px;
+
+  --device-lg-height: 40px;
+  --device-lg-width: 48px;
+
+  animation: bdDeviceBounce 3.5s infinite;
+  border: 0 solid hsl(var(--device-deg), 100%, 53%);
+  border-width: var(--device-y) var(--device-x);
+  border-radius: $radius;
+  display: block;
+  height: var(--device-height);
+  position: relative;
+  width: var(--device-width);
+}
+
+.bd-focus-cubes {
+  position: relative;
+  height: 3rem;
+  top: -0.5rem;
+  width: 3rem;
+}
+
+.bd-focus-cube {
+  color: $green;
+  position: absolute;
+}
+
+.bd-focus-cube-1 {
+  left: 0;
+  top: 0;
+}
+
+.bd-focus-cube-2 {
+  left: -1rem;
+  top: 23px;
+}
+
+.bd-focus-cube-3 {
+  left: 1rem;
+  top: 23px;
+}
+
+.bd-focus-css3 {
+  color: $blue;
+}
+
+.bd-focus-github {
+  color: $github;
+}
+
+@keyframes bdDeviceBounce {
+  0% {
+    --device-deg: var(--device-sm-deg);
+    height: var(--device-sm-height);
+    width: var(--device-sm-width);
+  }
+  28% {
+    --device-deg: var(--device-sm-deg);
+    height: var(--device-sm-height);
+    width: var(--device-sm-width);
+  }
+  33% {
+    --device-deg: var(--device-md-deg);
+    height: var(--device-md-height);
+    width: var(--device-md-width);
+  }
+  62% {
+    --device-deg: var(--device-md-deg);
+    height: var(--device-md-height);
+    width: var(--device-md-width);
+  }
+  67% {
+    --device-deg: var(--device-lg-deg);
+    height: var(--device-lg-height);
+    width: var(--device-lg-width);
+  }
+  95% {
+    --device-deg: var(--device-lg-deg);
+    height: var(--device-lg-height);
+    width: var(--device-lg-width);
+  }
+  100% {
+    --device-deg: var(--device-sm-deg);
+    height: var(--device-sm-height);
+    width: var(--device-sm-width);
+  }
+}

docs/_sass/index/heading.scss

@@ -0,0 +1,91 @@
+.bd-heading {
+  > .icon {
+    font-size: $title-size;
+    height: 1.125em;
+    width: 1.125em;
+  }
+
+  .title,
+  .subtitle {
+    font-weight: $weight-normal;
+
+    strong {
+      color: inherit;
+      font-weight: $weight-semibold;
+    }
+
+    small {
+      color: $text-light;
+      display: block;
+      font-size: 0.75em;
+    }
+  }
+
+  .subtitle {
+    color: $text-light;
+  }
+
+  .bd-fat-button {
+    font-weight: $weight-normal;
+
+    strong {
+      font-weight: $weight-semibold;
+    }
+  }
+}
+
+@include mobile {
+  .bd-heading {
+    margin-bottom: var(--bd-index-vertical);
+
+    .icon {
+      float: left;
+      margin-right: $block-spacing / 2;
+    }
+
+    .subtitle {
+      margin: ($block-spacing / 2) 0 !important;
+    }
+
+    form {
+      margin-top: $block-spacing;
+    }
+  }
+}
+
+@include tablet {
+  .bd-heading {
+    align-items: center;
+    display: grid;
+    grid-gap: 0;
+    // prettier-ignore
+    grid-template-columns:
+      1fr
+      4rem
+      calc(var(--container-width) / 3)
+      calc(var(--container-width) / 3)
+      calc(var(--container-width) / 3)
+      4rem
+      1fr;
+    margin-bottom: calc(var(--bd-index-vertical) / 2);
+
+    > .icon {
+      grid-column: 2;
+    }
+
+    .title {
+      grid-column: 3;
+      max-width: 9em;
+    }
+
+    .subtitle {
+      grid-column: 4;
+      max-width: 10em;
+    }
+
+    .button {
+      grid-column: 5 / span 1;
+      justify-self: flex-end;
+    }
+  }
+}

docs/_sass/index/hello.scss

@@ -0,0 +1,137 @@
+.bd-hello-body {
+  display: grid;
+  grid-gap: var(--bd-index-gap);
+}
+
+.bd-hello-ghbtns {
+  margin-bottom: 1em;
+  min-height: 30px;
+
+  iframe,
+  a,
+  img {
+    height: 30px;
+  }
+
+  a {
+    display: inline-block;
+    min-width: 100px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+}
+
+.bd-hello-buttons {
+  .bd-fat-button {
+    font-size: 1.125em;
+  }
+}
+
+.bd-hello-media {
+  text-align: center;
+}
+
+.bd-hello-video {
+  padding-top: 56.25%;
+  position: relative;
+
+  > div {
+    @include overlay;
+  }
+}
+
+.bd-hello-shadow {
+  background-size: cover;
+}
+
+.bd-hello-iframe {
+  border-radius: 0.75em;
+
+  iframe {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.bd-hello-author {
+  color: $text-light;
+  margin-top: 1em;
+  opacity: 0.5;
+
+  a {
+    color: currentColor;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+@include mobile {
+  .bd-hello {
+    grid-gap: var(--bd-index-vertical);
+    padding: var(--bd-index-vertical);
+  }
+
+  .bd-hello-content {
+    .title br {
+      display: none;
+    }
+  }
+
+  .bd-hello-buttons {
+    .button {
+      margin-right: 0 !important;
+      width: 100%;
+    }
+  }
+}
+
+@include tablet {
+  .bd-hello {
+    align-items: center;
+    padding-bottom: var(--bd-index-vertical);
+    padding-top: var(--bd-index-vertical);
+  }
+
+  .bd-hello-body {
+    align-items: center;
+    grid-gap: 0;
+    grid-template-columns:
+      var(--bd-index-gap) 1fr calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      var(--bd-index-gap) calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      1fr var(--bd-index-gap);
+  }
+
+  .bd-hello-content {
+    grid-column: 3 / span 1;
+  }
+
+  .bd-hello-buttons {
+    display: grid;
+    grid-gap: $block-spacing;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: 0 !important;
+
+    .button {
+      margin: 0 !important;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+  }
+
+  .bd-hello-media {
+    grid-column: 5 / span 2;
+  }
+
+  .bd-hello-sponsors {
+    grid-column: 4 / span 4;
+  }
+}

docs/_sass/index/sponsors.scss

@@ -0,0 +1,102 @@
+$bd-sponsor-padding: $block-spacing;
+$bd-sponsor-width: 12rem;
+
+.bd-sponsors {
+  --bd-sponsors-spacing: #{$block-spacing};
+}
+
+.bd-sponsors-body {
+  display: grid;
+  grid-gap: var(--bd-index-gap);
+}
+
+@include mobile {
+  .bd-sponsors {
+    grid-gap: var(--bd-sponsors-spacing);
+    padding: var(--bd-sponsors-spacing);
+  }
+}
+
+.bd-partner-sponsors {
+  --sponsor-width: #{$bd-sponsor-width - 1rem};
+  display: grid;
+  grid-gap: 0;
+  grid-template-columns: repeat(auto-fill, minmax(var(--sponsor-width), 1fr));
+  overflow: hidden;
+}
+
+.bd-partner-sponsor {
+  @extend %center;
+  @extend %link-before-background;
+
+  padding: $bd-sponsor-padding ($bd-sponsor-padding / 2);
+
+  strong,
+  img {
+    position: relative;
+  }
+}
+
+@include touch {
+  .bd-sponsors {
+    padding: var(--bd-index-vertical);
+  }
+
+  .bd-partner-sponsors {
+    margin-left: -$block-spacing;
+    margin-right: -$block-spacing;
+  }
+}
+
+@include desktop {
+  .bd-sponsors {
+    padding-bottom: var(--bd-index-vertical);
+    padding-top: var(--bd-index-vertical);
+  }
+
+  .bd-sponsors-body {
+    align-items: center;
+    grid-gap: 0;
+    grid-template-columns:
+      var(--bd-index-gap) 1fr calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      var(--bd-index-gap) calc(
+        calc(var(--container-width) - var(--bd-index-gap)) / 2
+      )
+      1fr var(--bd-index-gap);
+  }
+
+  .bd-sponsors-content {
+    font-size: 1.125rem;
+    grid-column: 3 / span 1;
+  }
+
+  .bd-sponsors-list {
+    grid-column: 4 / span 4;
+  }
+}
+
+@include widescreen {
+  .bd-sponsors {
+    --bd-sponsors-spacing: 6rem;
+  }
+
+  .bd-sponsors-content {
+    font-size: 1.25rem;
+  }
+
+  .bd-partner-sponsors {
+    --sponsor-width: #{$bd-sponsor-width};
+  }
+}
+
+@include fullhd {
+  .bd-sponsors {
+    --bd-sponsors-spacing: 9rem;
+  }
+
+  .bd-sponsors-content {
+    font-size: 1.5rem;
+  }
+}

docs/_sass/main.sass

@@ -1,270 +0,0 @@
-.bd-main
-  overflow: hidden
-  position: relative
-
-.bd-figure
-  +block
-  align-items: center
-  border: 2px solid $scheme-main-ter
-  border-radius: $radius
-  display: flex
-  flex-direction: column
-  text-align: center
-  img
-    margin: 1em
-  figcaption
-    align-self: stretch
-    background-color: $scheme-main-ter
-    color: $text-light
-    font-size: $size-small
-    padding: 1em
-
-// Lead
-
-.bd-lead
-  position: relative
-
-.bd-breadcrumb
-  display: flex
-  justify-content: space-between
-  margin-bottom: $main-spacing
-  .breadcrumb:not(:last-child)
-    margin-bottom: 0
-
-.bd-prev-next
-  align-items: flex-start
-  color: $border-hover
-  display: none
-  flex-grow: 0
-  flex-shrink: 0
-  margin-left: 0.5rem
-  text-align: center
-  a,
-  span
-    border-radius: $radius
-    width: 1.5rem
-  a
-    &: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
-  margin-bottom: $main-spacing
-  .subtitle
-    color: $text-light
-    strong
-      color: currentColor
-  #meta
-    margin-top: -0.5rem
-
-.bd-tabs
-  margin-bottom: $main-spacing
-
-+mobile
-  .bd-tabs
-    margin-left: -1.5rem
-    margin-right: -1.5rem
-    .tabs
-      ul
-        flex-wrap: nowrap
-
-+tablet
-  .bd-tabs
-    .tabs
-      overflow: visible
-      ul,
-      a
-        border-bottom-color: $scheme-main-ter
-        border-bottom-width: 2px
-      a
-        margin-bottom: -2px
-      li:not(.is-active) a:hover
-          border-bottom-color: $border
-      ul
-        flex-wrap: wrap
-        max-width: 100%
-
-.bd-content
-  hr:first-child
-    display: none
-    & + .bd-anchor-title
-      padding-top: 0
-      .bd-anchor-link
-        top: 0
-
-// Side
-
-.bd-side,
-.bd-side-background
-  background-color: $scheme-main-bis
-
-.bd-side
-  position: relative
-
-.bd-side-background
-  bottom: 0
-  left: 50%
-  position: absolute
-  right: 0
-  top: 0
-
-%bd-list
-  font-size: 0.875rem
-  li
-    &:not(:last-child)
-      margin-bottom: 0.5em
-    &.is-past
-      a
-        color: $border-hover
-    &.is-current
-      a
-        color: $link
-  a
-    color: $text-light
-    &:hover
-      color: $link
-
-.bd-category
-  a
-    &:hover
-      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
-
-.bd-category-toggle
-  +overlay
-  align-items: center
-  color: $border-hover
-  display: flex
-  justify-content: flex-end
-  .icon
-    font-size: 0.75rem
-    transform-origin: center
-    transition-duration: $speed
-    transition-property: transform
-
-.tag.bd-mini-tag
-  border-radius: 2px !important
-  font-family: Verdana, sans-serif
-  font-size: 0.5rem
-  font-weight: bold
-  height: 2.25em
-  vertical-align: text-bottom
-
-.bd-category-name
-  color: $text-strong
-  position: relative
-  &.is-active
-    color: $link
-  .bd-mini-tag
-    margin-left: 0.5em
-
-.bd-category-list
-  @extend %bd-list
-  display: none
-  padding: 0.5rem
-
-.bd-anchors-reference
-  height: 1px
-
-.bd-anchors
-  display: none
-  max-width: $sidebar-width
-  padding-top: calc(1.5rem - 1px)
-  +tablet
-    &.is-active
-      display: block
-    &.is-pinned
-      position: fixed
-      top: 0
-
-.bd-anchors-title
-  color: $border-hover
-  font-size: 0.875rem
-  font-weight: $weight-semibold
-  margin-bottom: 0.5rem
-
-.bd-anchors-list
-  @extend %bd-list
-  li
-    &:last-child
-      margin-top: 1em
-  a
-    color: $text-strong
-
-+touch
-  .bd-lead,
-  .bd-side
-    padding: 1.5rem
-  .bd-header-carbon
-    margin-top: 1.5rem
-
-+touch
-  .bd-side-background
-    display: none
-
-+desktop
-  .bd-duo
-    display: flex
-  .bd-lead
-    background-color: $scheme-main
-    overflow: hidden
-    flex-grow: 1
-    flex-shrink: 1
-  .bd-prev-next
-    display: flex
-  .bd-side
-    flex: 0 0 calc(#{$sidebar-width} + 1.5rem)
-
-+desktop
-  .bd-main
-    padding: 0 3rem
-  .bd-lead
-    margin-left: -3rem
-    padding: 3rem
-    &:last-child
-      margin-right: -3rem
-  .bd-header
-    align-items: center
-    display: flex
-    min-height: 140px
-  .bd-header-titles
-    flex-grow: 1
-    flex-shrink: 1
-  .bd-header-carbon
-    flex-grow: 0
-    flex-shrink: 0
-    margin: -15px 0 -15px ($main-spacing * 2)
-    width: $carbon-width
-  .bd-side
-    padding: 3rem 0 3rem 1.5rem
-
-+widescreen
-  .bd-header-carbon
-    margin-left: ($main-spacing * 3)
-
-+fullhd
-  .bd-header-carbon
-    margin-left: ($main-spacing * 4)

docs/_sass/old/example.sass

@@ -141,7 +141,7 @@
   max-height: 320px
   margin-bottom: 0 !important
 
-.highlight-full,
+.bd-highlight-full,
 #navbarJsExample
   &:not(:last-child)
     margin-bottom: 1.5rem

docs/_sass/pages/backers.scss

@@ -0,0 +1,186 @@
+.bd-backers {
+  --spacing: 1.5rem;
+
+  padding-bottom: var(--spacing);
+  padding-top: var(--spacing);
+}
+
+.bd-backers-platforms {
+  @extend %bd-backers-section;
+  --spacing: 1.5rem;
+  padding: var(--spacing);
+  text-align: center;
+}
+
+.bd-backers-platform {
+  @extend %center;
+
+  .bd-backers-platform-logo {
+    @extend %center;
+    border-radius: $radius-large;
+    padding: var(--spacing);
+    transition-duration: $speed * 2;
+    transition-property: box-shadow;
+
+    &:hover {
+      box-shadow: 0 0 0 2px var(--color);
+    }
+  }
+
+  &.bd-is-patreon {
+    --color: var(--patreon);
+    grid-column: 2;
+  }
+
+  &.bd-is-github {
+    --color: var(--github);
+    grid-column: 3;
+  }
+
+  .bd-fat-button {
+    margin-top: 1em;
+  }
+}
+
+.bd-backers-heading {
+  @extend %center;
+
+  h2 {
+    background-color: var(--sponsor-light);
+    border-radius: $radius-large;
+    color: var(--sponsor);
+    font-size: 1em;
+    font-weight: $weight-semibold;
+    padding: 0.5em 1em;
+  }
+}
+
+.bd-backers-group {
+  @extend %bd-backers-section;
+  padding: var(--spacing);
+  text-align: center;
+}
+
+.bd-backers-list {
+  display: grid;
+  grid-gap: 1em;
+
+  &.bd-is-patreon {
+    grid-column: 2;
+
+    .icon-text {
+      color: $text-light;
+      font-size: 0.75em;
+
+      &.bd-is-twitter {
+        color: var(--twitter);
+      }
+    }
+  }
+
+  &.bd-is-github {
+    grid-column: 3;
+  }
+}
+
+.bd-tier {
+  align-items: center;
+  border-bottom: 2px solid $scheme-main-bis;
+  display: grid;
+  grid-gap: 1em;
+  padding: 1em;
+}
+
+.bd-tier-amount {
+  color: $text-strong;
+  font-size: 1.5em;
+  font-weight: $weight-semibold;
+}
+
+.bd-tier-frequency {
+  color: $text-light;
+}
+
+.bd-tiers-info {
+  --spacing: 1.5em;
+  background-color: $scheme-main-bis;
+  color: $text-light;
+  grid-gap: var(--spacing);
+  grid-template-columns: 1fr 1fr;
+  padding: var(--spacing);
+
+  strong {
+    color: currentColor;
+  }
+
+  p:not(:last-child) {
+    margin-bottom: 0.25em;
+  }
+}
+
+.bd-tiers-info-question {
+  justify-self: flex-end;
+  max-width: 15em;
+}
+
+.bd-tiers-info-answer {
+  max-width: 25em;
+}
+
+@include mobile {
+  .bd-backers-platform.bd-is-github {
+    margin-top: 3rem;
+  }
+}
+
+@include tablet {
+  %bd-backers-section {
+    display: grid;
+    grid-template-columns:
+      1fr calc(var(--container-width) / 2) calc(var(--container-width) / 2)
+      1fr;
+  }
+
+  .bd-backers {
+    background-image: linear-gradient(
+      90deg,
+      transparent calc(50% - 2px),
+      var(--sponsor-light) calc(50%),
+      transparent calc(50% + 2px)
+    );
+  }
+
+  .bd-tier {
+    grid-template-columns: 10em 8em 1fr;
+  }
+
+  .bd-tier-amount {
+    text-align: right;
+  }
+
+  .bd-tiers-info {
+    display: grid;
+  }
+
+  .bd-tiers-info-question {
+    text-align: right;
+  }
+}
+
+@include desktop {
+  .bd-backers,
+  .bd-tiers {
+    font-size: 1.125rem;
+  }
+
+  .bd-tiers-info {
+    --spacing: 3em;
+  }
+}
+
+@include widescreen {
+  .bd-backers,
+  .bd-tiers {
+    font-size: 1.25rem;
+  }
+}

docs/_sass/pages/blog.scss

@@ -0,0 +1,161 @@
+$spacing: 2px;
+$icon-dimensions: 1.125em;
+
+.bd-posts {
+  --font-size-base: #{$size-6};
+  --font-size-large: #{$size-5};
+  --featured-font-size-base: 1.125rem;
+  --featured-font-size-large: #{$size-4};
+  --padding: 1.5rem;
+  margin-top: $spacing;
+}
+
+.bd-post {
+  font-size: var(--font-size-base);
+  position: relative;
+
+  &.is-featured {
+    --font-size-base: var(--featured-font-size-base);
+    --font-size-large: var(--featured-font-size-large);
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:not(:last-child) {
+    .bd-post-link {
+      border-bottom: 2px solid $border-light;
+    }
+  }
+}
+
+.bd-post-link {
+  align-items: center;
+  display: block;
+  padding-bottom: calc(2 * var(--padding));
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  padding-top: calc(2 * var(--padding));
+  position: relative;
+  transition-duration: $speed * 2;
+  transition-property: background-color, border-bottom-color, box-shadow;
+
+  .icon {
+    color: var(--color);
+    flex-shrink: 0;
+    flex-grow: 0;
+    font-size: var(--font-size-large);
+    height: $icon-dimensions;
+    margin-right: 1em;
+    width: $icon-dimensions;
+  }
+
+  &:hover {
+    background-color: $scheme-main-bis;
+    border-bottom-color: transparent;
+    border-radius: $radius;
+    box-shadow: 0 0 0 $spacing $scheme-main-bis;
+
+    &::after {
+      opacity: 0;
+    }
+
+    .title {
+      color: $link;
+    }
+  }
+}
+
+.bd-post-body {
+  display: flex;
+}
+
+.bd-post-content {
+  code {
+    background: none;
+    padding: 0;
+  }
+
+  .title {
+    font-size: var(--font-size-large);
+    transition-duration: $speed * 2;
+    transition-property: color;
+  }
+
+  .subtitle {
+    font-size: var(--font-size-base);
+    color: $text-light;
+  }
+}
+
+.bd-post-image {
+  img {
+    border-radius: $radius;
+  }
+}
+
+.bd-post-screenshot {
+  img {
+    max-height: 100%;
+    width: auto;
+  }
+}
+
+@include mobile {
+  .bd-post-image,
+  .bd-post-screenshot {
+    margin-top: var(--padding);
+  }
+}
+
+$second-column-width: (2 * 1.25rem * 1.125) + 1.5rem;
+
+@include tablet {
+  .bd-posts {
+    --font-size-base: 1.125rem;
+    --font-size-large: #{$size-4};
+    --featured-font-size-base: #{$size-5};
+    --featured-font-size-large: #{$size-3};
+    --second-column-width: ((2 * #{$size-4} * 1.125) + 1.5rem);
+
+    display: grid;
+    grid-template-columns: 1fr $second-column-width var(--container-width) $second-column-width 1fr;
+  }
+
+  .bd-post {
+    grid-column: 2 / span 3;
+  }
+
+  .bd-post-link {
+    display: flex;
+  }
+
+  .bd-post-body {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .bd-post-content {
+    max-width: 30em;
+  }
+
+  .bd-post-image {
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: 240px;
+    margin-left: var(--padding);
+    width: 400px;
+  }
+
+  .bd-post-screenshot {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    height: 240px;
+    justify-content: center;
+    margin-left: var(--padding);
+    width: 70%;
+  }
+}

docs/_sass/pages/bootstrap.scss

@@ -0,0 +1,136 @@
+$bootstrap: #6f5499;
+$bootstrap-invert: #fff;
+
+.bd-bootstrap-table {
+  margin: 3em 0;
+}
+
+.bd-pros-heading {
+  padding: 0 2em;
+  text-align: center;
+}
+
+.bd-pros-icon {
+  margin-bottom: 3em;
+  text-align: center;
+
+  svg {
+    height: 3em;
+    width: auto;
+  }
+}
+
+.bd-pros-list {
+  margin: 0 auto;
+  max-width: 540px;
+}
+
+.bd-pro {
+  .icon {
+    font-size: 1.25em;
+    height: 1.125em;
+    position: relative;
+    top: -1px;
+    width: 1.125em;
+  }
+
+  .title {
+    font-size: 1.25em;
+    margin-bottom: 0.5em;
+  }
+}
+
+.bd-pro + .bd-pro {
+  margin-top: 2em;
+  padding-top: 2em;
+}
+
+.bd-pro-content {
+  p:not(:last-child) {
+    margin-bottom: 0.5em;
+  }
+}
+
+.bd-pro.bd-is-bulma {
+  .icon {
+    color: $primary;
+  }
+}
+
+.bd-pro.bd-is-bootstrap {
+  .icon {
+    color: $bootstrap;
+  }
+}
+
+.bd-bootstrap-comparison {
+  margin: 0 auto;
+  max-width: 42em;
+
+  .table {
+    color: $red;
+
+    thead,
+    tfoot {
+      th {
+        font-size: 1.5em;
+        text-align: center;
+      }
+
+      svg {
+        height: 1.5em;
+        margin-right: 1em;
+        position: relative;
+        top: 0.25em;
+        width: auto;
+      }
+    }
+
+    tbody {
+      th {
+        font-size: 1.25em;
+        text-align: center;
+      }
+
+      td {
+        font-family: $family-monospace;
+        width: 50%;
+      }
+
+      a {
+        color: currentColor;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .bd-is-empty {
+      background-color: $background;
+      color: $text-light;
+    }
+
+    .bd-is-unique {
+      background-color: rgba($green, 0.25);
+      color: $text-strong;
+      font-weight: $weight-bold;
+    }
+  }
+}
+
+.bd-bootstrap-comparison-header {
+  margin-bottom: 3em;
+}
+
+@include desktop {
+  .bd-bootstrap-table {
+    font-size: 1.125rem;
+  }
+}
+
+@include widescreen {
+  .bd-bootstrap-table {
+    font-size: 1.25rem;
+  }
+}

docs/_sass/pages/docs.scss

@@ -0,0 +1,267 @@
+.bd-docs {
+  --docs-outer: 1.5rem;
+  --docs-inner: 1.5rem;
+  --docs-side-padding: 1rem;
+
+  border-top: 2px solid $scheme-main-ter;
+  position: relative;
+
+  .bd-hero {
+    margin-top: 0;
+  }
+}
+
+%bd-docs-edge {
+  background-color: $scheme-main-bis;
+  width: $bd-edge-width;
+  z-index: 3;
+}
+
+.bd-docs-toggles {
+  border-top: 2px solid $scheme-main-ter;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+}
+
+.bd-docs-overlay {
+  @extend %overlay;
+  background-color: black;
+  display: none;
+  opacity: 0;
+  pointer-events: none;
+  transition-duration: 200ms;
+  transition-property: opacity;
+  z-index: 2;
+}
+
+.bd-docs-main {
+  padding-bottom: var(--docs-outer);
+  padding-left: var(--docs-outer);
+  padding-right: var(--docs-outer);
+
+  .bd-hero .hero-body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.bd-docs-nav {
+  @extend %bd-docs-edge;
+}
+
+.bd-docs-side {
+  @extend %bd-docs-edge;
+}
+
+.bd-docs-body {
+  border-top: 2px solid $scheme-main-ter;
+  padding-top: var(--docs-inner);
+}
+
+.bd-docs-pagination {
+  border-top: 2px solid $scheme-main-ter;
+  margin-top: var(--docs-inner);
+  padding-top: var(--docs-inner);
+}
+
+.bd-docs-typo {
+  margin-top: var(--docs-inner);
+}
+
+.bd-side-sponsrs {
+  @extend %block;
+  display: none;
+  text-align: center;
+}
+
+.bd-side-sponsor-label {
+  color: $text-light;
+  font-size: 0.75em;
+}
+
+.bd-side-sponsor {
+  @extend %center;
+  height: 4rem;
+}
+
+.bd-docs-content {
+  .bd-example.is-fullwidth,
+  .section.is-fullwidth {
+    margin-left: calc(-1 * var(--docs-outer));
+    margin-right: calc(-1 * var(--docs-outer));
+  }
+}
+
+@include mobile {
+  %bd-docs-edge {
+    background-color: $scheme-main;
+    bottom: 0;
+    position: absolute;
+    top: 0;
+    transition-duration: 200ms;
+    transition-property: transform;
+  }
+
+  .bd-docs-overlay {
+    display: block;
+  }
+
+  .bd-docs {
+    border-top: none;
+    overflow: hidden;
+
+    &.bd-showing-overlay .bd-docs-overlay {
+      opacity: 0.8;
+      pointer-events: auto;
+    }
+  }
+
+  .bd-docs-nav {
+    left: -1 * $bd-edge-width;
+
+    &.bd-is-shown {
+      transform: translateX(100%);
+    }
+  }
+
+  .bd-docs-side {
+    right: -1 * $bd-edge-width;
+
+    &.bd-is-shown {
+      transform: translateX(-100%);
+    }
+  }
+}
+
+@include tablet {
+  .bd-docs {
+    --docs-outer: 3rem;
+    --docs-inner: 3rem;
+    display: grid;
+    grid-template-columns: $bd-edge-width 1fr $bd-edge-width;
+  }
+
+  .bd-docs-main {
+    overflow: hidden;
+  }
+
+  .bd-docs-toggles {
+    display: none;
+  }
+
+  .bd-docs.bd-is-fullwidth {
+    display: block;
+
+    %bd-docs-edge {
+      bottom: 0;
+      position: absolute;
+      top: 0;
+
+      &.bd-is-stickied {
+        position: fixed;
+      }
+
+      &:not(:hover) {
+        background: none;
+        overflow: hidden;
+        padding-left: 0;
+        padding-right: 0;
+
+        .bd-categories {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      }
+    }
+
+    .bd-docs-nav {
+      left: 0;
+
+      &:not(:hover) {
+        left: $bd-edge-offset -$bd-edge-width;
+
+        .bd-categories-filter,
+        .bd-categories-no-results {
+          visibility: hidden;
+        }
+
+        .bd-category-list {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        .bd-category a {
+          position: relative;
+          text-indent: -9999px;
+          width: 100%;
+
+          &::after {
+            align-items: center;
+            bottom: 0;
+            content: '•';
+            display: flex;
+            justify-content: center;
+            position: absolute;
+            right: 0;
+            text-align: center;
+            text-indent: 0;
+            top: 0;
+            width: $bd-edge-offset;
+          }
+        }
+      }
+    }
+
+    .bd-docs-side {
+      right: 0;
+
+      &:not(:hover) {
+        right: $bd-edge-offset -$bd-edge-width;
+
+        .bd-features,
+        .bd-anchors {
+          padding-left: 0;
+          padding-right: calc(2 * var(--docs-side-padding));
+        }
+
+        .bd-features-title,
+        .bd-feature,
+        .bd-anchors-title,
+        .bd-anchors-list li {
+          position: relative;
+          transform: translateX($bd-edge-offset);
+          width: 100%;
+
+          &::after {
+            align-items: center;
+            bottom: 0;
+            content: '•';
+            display: flex;
+            justify-content: center;
+            position: absolute;
+            right: 100%;
+            text-align: center;
+            top: 0;
+            width: $bd-edge-offset;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include touch {
+  .bd-docs-pagination {
+    .bd-fat-button {
+      font-size: 1rem;
+    }
+  }
+}
+
+@include desktop {
+  .bd-docs {
+    --docs-outer: 6rem;
+    --docs-inner: 3rem;
+  }
+}

docs/_sass/pages/expo.scss

@@ -0,0 +1,97 @@
+$website-gap: 0px;
+$website-width: 672px;
+
+.bd-websites {
+  --gap: #{$website-gap};
+  --width: #{$website-width};
+  --spacing: 1.5rem;
+  display: grid;
+  grid-gap: var(--gap);
+  grid-template-columns: 1fr;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(
+    calc(2 * calc(var(--width) + var(--spacing)) + calc(3 * var(--gap)))
+  );
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
+}
+
+.bd-website {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(2 * var(--width));
+  padding-bottom: var(--spacing);
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+  position: relative;
+
+  &:hover {
+    background-color: var(--expo-light);
+
+    .title {
+      color: var(--expo-dark);
+    }
+
+    .bd-website-date {
+      color: $text-strong;
+    }
+
+    .bd-website-shadow {
+      opacity: 0;
+    }
+    .bd-website-overlay {
+      background-color: rgba($scheme-invert, 0.1);
+    }
+  }
+
+  &.bd-is-highlighted {
+    grid-column: span 2;
+  }
+}
+
+.bd-website-date {
+  color: $text-light;
+}
+
+.bd-website-image {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--spacing);
+  position: relative;
+
+  img {
+    border-radius: $radius;
+  }
+
+  .b-lazy {
+    opacity: 0;
+    transition: opacity 500ms $easing;
+  }
+
+  .b-loaded {
+    opacity: 1;
+  }
+}
+
+.bd-website-shadow {
+  border: 1px solid rgba(#000, 0.04);
+  transition: opacity 200ms $easing;
+}
+
+.bd-website-overlay {
+  background-color: transparent;
+  border-radius: $radius;
+  box-shadow: inset 0 0 0 1px rgba(#000, 0.04);
+  transition: background-color 200ms $easing;
+}
+
+@include tablet {
+  .bd-websites {
+    --spacing: 3rem;
+    grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
+  }
+}

docs/_sass/pages/extensions.scss

@@ -0,0 +1,27 @@
+.bd-extension {
+  border-bottom: 2px solid $scheme-main-bis;
+  display: block;
+  padding: 1.5rem;
+
+  .subtitle {
+    color: $text-light;
+  }
+
+  &:hover {
+    background-color: $scheme-main-bis;
+
+    .title {
+      color: $link;
+    }
+
+    .subtitle {
+      color: $text-strong;
+    }
+  }
+}
+
+@include tablet {
+  .bd-extension {
+    padding: 3rem 0;
+  }
+}

docs/_sass/pages/index.scss

@@ -0,0 +1,127 @@
+:root {
+  --bd-index-vertical: #{$block-spacing};
+  --bd-index-gap: 3rem;
+}
+
+$linear-gradient: linear-gradient(
+  180deg,
+  hsla(var(--bd-section-h), 100%, 67%, 0.1),
+  transparent
+);
+
+.bd-index-section {
+  --bd-section-vertical: #{$block-spacing};
+  --bd-section-horizontal: #{$block-spacing};
+  --bd-section-h: 171deg;
+
+  background-image: linear-gradient(
+    180deg,
+    hsla(var(--bd-section-h), 100%, 67%, 0.1),
+    transparent var(--bd-index-vertical)
+  );
+  // background-image: radial-gradient(
+  //   ellipse at top,
+  //   hsla(var(--bd-section-h), 100%, 67%, 0.1),
+  //   transparent calc(4 * var(--bd-index-vertical))
+  // ), $linear-gradient;
+  background-repeat: repeat-x;
+  // background-size: 100% var(--bd-index-vertical);
+
+  .bd-tw {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 28em;
+  }
+}
+
+.bd-index-content {
+  font-size: 1rem;
+
+  strong {
+    font-weight: $weight-semibold;
+  }
+
+  .title {
+    color: $text-strong;
+    font-size: 2em;
+    font-weight: $weight-normal;
+    position: relative;
+
+    .icon {
+      height: 1.125em;
+      position: absolute;
+      right: calc(100% + #{$block-spacing});
+      top: 0;
+      width: 1.125em;
+    }
+
+    a {
+      font-weight: $weight-semibold;
+    }
+  }
+
+  .subtitle {
+    strong {
+      color: inherit;
+    }
+  }
+
+  .icon-text {
+    strong {
+      color: inherit;
+    }
+  }
+
+  .highlight {
+    margin-bottom: 1em;
+  }
+}
+
+@include mobile {
+  .bd-index-section {
+    padding: ($block-spacing * 2) $block-spacing;
+
+    .bd-tws {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+@include tablet {
+  :root {
+    --bd-index-vertical: 3rem;
+  }
+
+  .bd-index-section {
+    padding-bottom: var(--bd-index-vertical);
+    padding-top: var(--bd-index-vertical);
+  }
+}
+
+@include desktop {
+  .bd-index-content {
+    font-size: 1.125rem;
+  }
+}
+
+@include widescreen {
+  :root {
+    --bd-index-vertical: 6rem;
+  }
+
+  .bd-index-content {
+    font-size: 1.25rem;
+    max-width: 23em;
+  }
+}
+
+@include fullhd {
+  :root {
+    --bd-index-vertical: 9rem;
+  }
+
+  .bd-index-content {
+    font-size: 1.5rem;
+  }
+}

docs/_sass/pages/love.scss

@@ -0,0 +1,190 @@
+.bd-tws {
+  --tws-spacing: #{$block-spacing};
+  --column-min-width: 100%;
+
+  padding-left: var(--tws-spacing);
+  padding-right: var(--tws-spacing);
+}
+
+@include tablet {
+  .bd-tws {
+    --column-min-width: 24em;
+  }
+}
+
+@include widescreen {
+  .bd-tws {
+    font-size: 1.125rem;
+  }
+}
+
+.bd-tws-list {
+  display: grid;
+  grid-gap: var(--tws-spacing);
+  grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width), 1fr));
+}
+
+.bd-tw {
+  background-color: $scheme-main-bis;
+  border-radius: $radius-large;
+  flex-shrink: 0;
+  font-size: 1em;
+  padding: 1.25em;
+  text-align: left;
+
+  &.bd-is-white {
+    background-color: $scheme-main;
+  }
+
+  > .mb-4 {
+    float: right;
+    font-size: 0.75em;
+  }
+}
+
+.bd-tw-header {
+  align-items: stretch;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.bd-tw-author {
+  align-items: center;
+  display: flex;
+  line-height: 1.2;
+
+  &:hover {
+    .bd-tw-fullname {
+      text-decoration: underline;
+    }
+  }
+}
+
+.bd-tw-avatar {
+  flex-shrink: 0;
+  height: 2.25em;
+  margin-right: 0.5em;
+  width: 2.25em;
+
+  img {
+    border-radius: $radius-rounded;
+    display: block;
+    height: 2.25em;
+    width: 2.25em;
+  }
+}
+
+.bd-tw-fullname {
+  color: $text-strong;
+  display: block;
+  font-size: 1em;
+  font-weight: $weight-bold;
+}
+
+.bd-tw-username {
+  color: $text-light;
+  display: block;
+  font-size: 0.875em;
+}
+
+.bd-tw-content {
+  color: $text-strong;
+  font-size: 1em;
+  line-height: 1.4;
+  margin-top: 1em;
+
+  a {
+    color: $link;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.bd-tw-date {
+  font-size: 0.875em;
+  line-height: 1.4;
+  margin-top: 0.25em;
+
+  a {
+    color: $text-light;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.bd-tw-actions {
+  align-items: center;
+  display: flex;
+  margin-top: 0.5em;
+}
+
+.bd-tw-action {
+  margin-right: 1.25em;
+}
+
+.bd-tw-action-link {
+  align-items: center;
+  color: $text-light;
+  display: flex;
+  height: 1.25em;
+  min-width: 1.25em;
+}
+
+.bd-tw-icon {
+  background-size: contain;
+  height: 1.25em;
+  width: 1.25em;
+}
+
+.bd-tw-action-stat {
+  color: currentColor;
+  font-size: 0.875em;
+  margin-left: 0.5em;
+  margin-top: 1px;
+}
+
+.bd-tw-action.is-reply {
+  .bd-tw-icon {
+    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E);
+  }
+
+  .bd-tw-action-link:hover {
+    color: var(--info);
+
+    .bd-tw-icon {
+      background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%231DA1F2%22%20d%3D%22M14.046%202.242l-4.148-.01h-.002c-4.374%200-7.8%203.427-7.8%207.802%200%204.098%203.186%207.206%207.465%207.37v3.828c0%20.108.045.286.12.403.143.225.385.347.633.347.138%200%20.277-.038.402-.118.264-.168%206.473-4.14%208.088-5.506%201.902-1.61%203.04-3.97%203.043-6.312v-.017c-.006-4.368-3.43-7.788-7.8-7.79zm3.787%2012.972c-1.134.96-4.862%203.405-6.772%204.643V16.67c0-.414-.334-.75-.75-.75h-.395c-3.66%200-6.318-2.476-6.318-5.886%200-3.534%202.768-6.302%206.3-6.302l4.147.01h.002c3.532%200%206.3%202.766%206.302%206.296-.003%201.91-.942%203.844-2.514%205.176z%22%2F%3E%3C%2Fsvg%3E);
+    }
+  }
+}
+
+.bd-tw-action.is-retweet {
+  .bd-tw-icon {
+    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E);
+  }
+
+  .bd-tw-action-link:hover {
+    color: var(--success);
+
+    .bd-tw-icon {
+      background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2317BF63%22%20d%3D%22M23.77%2015.67c-.292-.293-.767-.293-1.06%200l-2.22%202.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414%200-.75.336-.75.75s.336.75.75.75h5.85c1.24%200%202.25%201.01%202.25%202.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06%200s-.294.768%200%201.06l3.5%203.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767%200-1.06zm-10.66%203.28H7.26c-1.24%200-2.25-1.01-2.25-2.25V6.46l2.22%202.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768%200-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06%200l-3.5%203.5c-.294.292-.294.767%200%201.06s.767.293%201.06%200l2.22-2.22V16.7c0%202.068%201.683%203.75%203.75%203.75h5.85c.414%200%20.75-.336.75-.75s-.337-.75-.75-.75z%22%2F%3E%3C%2Fsvg%3E);
+    }
+  }
+}
+
+.bd-tw-action.is-heart {
+  .bd-tw-icon {
+    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23657786%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
+  }
+
+  .bd-tw-action-link:hover {
+    color: var(--danger);
+
+    .bd-tw-icon {
+      background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E0245E%22%20d%3D%22M12%2021.638h-.014C9.403%2021.59%201.95%2014.856%201.95%208.478c0-3.064%202.525-5.754%205.403-5.754%202.29%200%203.83%201.58%204.646%202.73.813-1.148%202.353-2.73%204.644-2.73%202.88%200%205.404%202.69%205.404%205.755%200%206.375-7.454%2013.11-10.037%2013.156H12zM7.354%204.225c-2.08%200-3.903%201.988-3.903%204.255%200%205.74%207.035%2011.596%208.55%2011.658%201.52-.062%208.55-5.917%208.55-11.658%200-2.267-1.822-4.255-3.902-4.255-2.528%200-3.94%202.936-3.952%202.965-.23.562-1.156.562-1.387%200-.015-.03-1.426-2.965-3.955-2.965z%22%2F%3E%3C%2Fsvg%3E);
+    }
+  }
+}

docs/_sass/pages/made-with-bulma.scss

@@ -0,0 +1,43 @@
+.bd-mwb {
+  padding: 1.5rem;
+}
+
+.bd-mwb-table {
+  td {
+    vertical-align: middle;
+    img {
+      vertical-align: middle;
+    }
+  }
+}
+
+@include tablet {
+  .bd-mwb {
+    font-size: 1.125rem;
+    padding: 3rem;
+  }
+}
+
+@include desktop {
+  .bd-mwb {
+    font-size: 1.25rem;
+  }
+}
+
+.bd-snippet-preview.bd-is-mwb {
+  align-items: stretch;
+  padding-top: 0;
+}
+
+.bd-snippet-code.bd-is-mwb {
+  .highlight {
+    border-top-left-radius: $radius;
+  }
+}
+
+.bd-snippet-mwb {
+  @extend %center;
+  border-radius: $radius;
+  flex-grow: 1;
+  height: 10.5rem;
+}

docs/_sass/pages/single.scss

@@ -0,0 +1,178 @@
+.bd-single-header {
+  --font-size-title: #{$size-3};
+  --font-size-subtitle: #{$size-5};
+  --font-size-date: #{$size-6};
+  --margin: 3rem;
+  --padding: 3rem;
+
+  margin-bottom: var(--margin);
+  margin-top: var(--margin);
+  padding-left: var(--padding);
+  padding-right: var(--padding);
+  text-align: center;
+
+  code {
+    background: none;
+    padding: 0;
+  }
+
+  .title {
+    font-size: var(--font-size-title);
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 16em;
+  }
+
+  .subtitle {
+    color: $text-light;
+    font-size: var(--font-size-subtitle);
+
+    &.is-date {
+      font-size: var(--font-size-date);
+      opacity: 0.5;
+    }
+  }
+}
+
+.bd-single-carbon {
+  @extend %center;
+  margin-bottom: 3rem;
+  margin-top: 3rem;
+}
+
+.bd-single-body {
+  padding: 0 3rem;
+}
+
+.bd-single-content {
+  hr {
+    margin: 3rem 0;
+  }
+
+  .table {
+    font-size: 1rem;
+  }
+}
+
+.bd-single-hr {
+  &:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 3rem;
+  }
+}
+
+.bd-single-image {
+  @extend %center;
+  margin-bottom: 3rem;
+
+  div {
+    flex-grow: 1;
+    max-width: 1600px;
+    min-height: 1px;
+  }
+
+  figure {
+    background: $background;
+    padding-top: 56.25%;
+    position: relative;
+  }
+
+  img {
+    left: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+@include touch() {
+  .bd-single-body {
+    &.bd-is-last {
+      padding-bottom: 3rem;
+    }
+  }
+}
+
+@include tablet() {
+  .bd-single-image {
+    padding-left: 3rem;
+    padding-right: 3rem;
+
+    img {
+      border-radius: $radius-large;
+    }
+  }
+
+  .bd-single-content {
+    font-size: 1.125rem;
+  }
+}
+
+@include desktop() {
+  .bd-single-header {
+    --font-size-title: #{$size-2};
+    --font-size-subtitle: #{$size-4};
+    --font-size-date: #{$size-5};
+    --margin: 4.5rem;
+    --padding: 4.5rem;
+  }
+
+  .bd-single-body {
+    &.bd-is-last {
+      padding-bottom: 4.5rem;
+    }
+  }
+}
+
+@include widescreen() {
+  .bd-single-header {
+    --font-size-title: #{$size-1};
+    --font-size-subtitle: #{$size-3};
+    --font-size-date: #{$size-4};
+    --margin: 6rem;
+    --padding: 6rem;
+  }
+
+  .bd-single-content {
+    font-size: 1.25rem;
+  }
+
+  .bd-single-body {
+    &.bd-is-last {
+      padding-bottom: 6rem;
+    }
+  }
+}
+
+@include fullhd() {
+  .bd-single-header {
+    --margin: 9rem;
+  }
+
+  .bd-single-content {
+    font-size: 1.5rem;
+  }
+
+  .bd-single-body {
+    &.bd-is-last {
+      padding-bottom: 9rem;
+    }
+  }
+}
+
+// Post stuff
+
+.bd-post-fullwidth {
+  text-align: center;
+}
+
+@include from(60rem) {
+  .bd-post-fullwidth {
+    margin-left: calc(28rem - 50vw);
+    margin-right: calc(28rem - 50vw);
+  }
+}

docs/_sass/pages/videos.scss

@@ -0,0 +1,53 @@
+.bd-video {
+  --spacing: 1.5rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  padding: var(--spacing);
+
+  &:not(:last-child) {
+    border-bottom: 2px solid var(--videos-light);
+  }
+}
+
+.bd-video-figure {
+  img,
+  video {
+    max-width: 100%;
+    vertical-align: top;
+  }
+}
+
+@include mobile {
+  .bd-video {
+    grid-gap: var(--spacing);
+  }
+}
+
+@include tablet {
+  .bd-video {
+    --spacing: 3rem;
+    grid-template-columns: 1fr 24em 4em calc(var(--container-width) - 28em) 1fr;
+  }
+
+  .bd-video-info {
+    grid-column: 2;
+  }
+
+  .bd-video-figure {
+    grid-column: 4 / span 2;
+
+    img {
+      max-width: 1440px;
+    }
+
+    video {
+      max-width: 1280px;
+    }
+  }
+}
+
+@include desktop {
+  .bd-video {
+    --spacing: 4.5rem;
+  }
+}