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;
+  }
+}