Init v1

docs/_sass/home/_index.scss

@@ -0,0 +1,8 @@
+@forward "amis";
+@forward "best";
+@forward "bubble";
+@forward "columns";
+@forward "custom";
+@forward "intro";
+@forward "screenshots";
+@forward "section";

docs/_sass/home/amis.scss

@@ -0,0 +1,54 @@
+@use "sass/utilities/css-variables" as cv;
+
+.bd-amis {
+  background-color: cv.getVar("scheme-main");
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  position: relative;
+}
+
+.bd-ami {
+  background-color: var(--color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  max-width: 10.5rem;
+  height: 3.5rem;
+  vertical-align: top;
+}
+
+.bd-ami img {
+  border-radius: 0.25rem;
+  height: auto;
+  max-height: 3rem;
+  max-width: 6rem;
+  width: auto;
+}
+
+.bd-ami-footer {
+  border-radius: 0.25rem;
+}
+
+.bd-ami-footer img {
+  max-width: none;
+}
+
+.bd-footer-title,
+.bd-footer-donation-title {
+  font-size: 1.125em;
+  margin-bottom: 0.5em;
+}
+
+.bd-footer-donation-action {
+  min-height: 3.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .paypal-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

docs/_sass/home/best.scss

@@ -0,0 +1,89 @@
+@use "sass:math";
+
+$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: math.div($best-total-width, $best-speed) * 1s;
+$best-padding: 1.5rem;
+$best-height: 386px;
+
+.bd-best {
+  background-color: var(--bulma-scheme-main);
+  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;
+
+  &: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: var(--bulma-duration);
+  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: var(--bulma-duration);
+  transition-property: box-shadow, transform;
+
+  &,
+  img {
+    border-radius: var(--bulma-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/home/bubble.scss

@@ -0,0 +1,152 @@
+@use "sass/utilities/css-variables" as cv;
+@use "../utils";
+
+@mixin anim-bounce-jelly {
+  animation-duration: 1000ms;
+  animation-fill-mode: both;
+  animation-name: anim-bounce-jelly;
+  animation-timing-function: linear;
+}
+
+%anim-bounce-jelly {
+  @include anim-bounce-jelly;
+}
+
+.bd-dot-bounce {
+  --factor: 1;
+  @include anim-bounce-jelly;
+  animation-delay: calc(var(--factor) * 0.1s);
+}
+
+@for $index from 1 through 20 {
+  .bd-dot-bounce.is-#{$index} {
+    --factor: #{$index};
+  }
+}
+
+.bd-bubble {
+  --s: 75%;
+  --bg-l: 90%;
+  --fg-l: 30%;
+  --bg: hsl(var(--h), var(--s), var(--bg-l));
+  --fg: hsl(var(--h), var(--s), var(--fg-l));
+  --scale: 1.125;
+  display: flex;
+  flex-direction: column;
+  width: 17rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  perspective: 200px;
+  transform-style: preserve-3d;
+
+  &.is-bruhandle {
+    --scale: 0.875;
+  }
+
+  &.is-jesseschoff {
+    --scale: 1.25;
+  }
+
+  &.is-ale_codes {
+    --scale: 1.25;
+  }
+}
+
+.bd-bubble-content {
+  @extend %anim-3d;
+  animation-name: anim-rise-up;
+  transform-origin: bottom center;
+  background-color: var(--bg);
+  color: var(--fg);
+  font-size: calc(var(--scale, 1) * 1em);
+  font-weight: cv.getVar("weight-medium");
+  line-height: 1.25;
+  padding: 0.875em 1em;
+  position: relative;
+  border-radius: 0.75em;
+  margin-left: -1.5rem;
+}
+
+.bd-bubble-arrow {
+  @extend %anim-3d;
+  animation-name: anim-slide-down;
+  border-width: 0.5rem 0.75rem;
+  border-color: transparent;
+  border-style: solid;
+  border-top-color: var(--bg);
+  height: 1rem;
+  margin-top: -1px;
+  width: 1.5rem;
+}
+
+.bd-bubble-author {
+  @extend %anim-3d;
+  animation-name: anim-pivot-up;
+  align-items: center;
+  gap: 0.5rem;
+  display: flex;
+  transform-origin: top center;
+
+  img {
+    border-radius: 40%;
+    height: 1.5em;
+    width: 1.5em;
+    flex-shrink: 0;
+  }
+
+  strong {
+    color: cv.getVar("text-strong");
+    font-size: 0.875em;
+  }
+}
+
+@include cv.system-theme($name: "dark") {
+  .bd-bubble {
+    --s: 100%;
+    --fg-l: 70%;
+    --bg-l: 10%;
+  }
+}
+
+@include cv.bulma-theme($name: "light") {
+  .bd-bubble {
+    --s: 75%;
+    --bg-l: 90%;
+    --fg-l: 30%;
+  }
+}
+
+@include cv.bulma-theme($name: "dark") {
+  .bd-bubble {
+    --s: 100%;
+    --fg-l: 70%;
+    --bg-l: 10%;
+  }
+}
+
+$bubble-order: ("axbom", "jesseschoff", "ale_codes", "MyTopSecretName");
+$delay-factor: 0.3s;
+
+@for $index from 1 through length($bubble-order) {
+  $name: nth($bubble-order, $index);
+
+  .js-bubble-#{$name} {
+    .bd-bubble-content {
+      animation-delay: calc(
+        var(--animation-delay) + #{($index - 1) * $delay-factor}
+      );
+    }
+    .bd-bubble-arrow {
+      animation-delay: calc(
+        var(--animation-delay) + #{($index - 1) * $delay-factor + 0.5s}
+      );
+    }
+
+    .bd-bubble-author {
+      animation-delay: calc(
+        var(--animation-delay) + #{($index - 1) * $delay-factor + 0.7s}
+      );
+    }
+  }
+}

docs/_sass/home/columns.scss

@@ -0,0 +1,69 @@
+@use "sass/utilities/mixins" as mx;
+
+#grid {
+  .notification {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.bd-columns-tools {
+  margin-top: 3rem;
+}
+
+.bd-columns-tool {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .highlight {
+    font-size: 0.875em;
+  }
+
+  &.bd-is-try {
+    .buttons {
+      justify-content: center;
+    }
+    .button {
+      strong {
+        font-weight: var(--bulma-weight-semibold);
+      }
+    }
+  }
+}
+
+#markup {
+  width: 100%;
+
+  .highlight pre {
+    max-height: none;
+  }
+}
+
+#message {
+  display: none;
+  margin-top: 3rem;
+}
+
+@include mx.mobile {
+  .bd-columns-tool {
+    &.bd-is-markup {
+      margin-top: 3rem;
+    }
+  }
+}
+
+@include mx.tablet {
+  .bd-columns-tools {
+    align-items: flex-start;
+    display: flex;
+  }
+
+  .bd-columns-tool {
+    width: 50%;
+
+    &.bd-is-try {
+      padding-top: 60px;
+    }
+  }
+}

docs/_sass/home/custom.scss

@@ -0,0 +1,101 @@
+@use "sass/utilities/mixins" as mx;
+@use "sass/themes/light";
+
+$mauve: #8a4d76;
+$pink: #fa7c91;
+$rose: #ea4aaa;
+$brown: #757763;
+$beige-light: #d0d1cd;
+$beige-lighter: #eff0eb;
+$sass: #bf4080;
+
+// Customize
+
+.bd-index-custom-title {
+  color: var(--bulma-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: light.$scheme-main;
+
+      &:hover {
+        background-color: darken($mauve, 2.5%);
+      }
+
+      &:active {
+        background-color: darken($mauve, 5%);
+      }
+    }
+
+    &.is-link {
+      background-color: $pink;
+      color: light.$scheme-main;
+
+      &:hover {
+        background-color: darken($pink, 2.5%);
+      }
+
+      &:active {
+        background-color: darken($pink, 5%);
+      }
+    }
+  }
+
+  @include mx.selection {
+    background-color: $pink;
+    color: light.$scheme-main;
+  }
+}

docs/_sass/home/intro.scss

@@ -0,0 +1,210 @@
+@use "sass/utilities/css-variables" as cv;
+@use "sass/utilities/mixins" as mx;
+@use "../utils";
+
+$delay: 0.2s;
+
+.bd-home-intro {
+  --scale: 1;
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+.bd-home-intro-body {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  padding: 5rem 2.5rem;
+  text-align: center;
+}
+
+.bd-home-intro-content {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 35rem;
+  perspective: 200px;
+  position: relative;
+}
+
+.bd-home-title {
+  @extend %anim-3d;
+  animation-name: anim-slow-intro;
+  color: hsl(
+    cv.getVar("text-h"),
+    cv.getVar("text-s"),
+    cv.getVar("text-title-l")
+  );
+  font-size: calc(var(--scale) * 4rem);
+  font-weight: 800;
+  line-height: 1.125;
+  transform-origin: bottom center;
+}
+
+.bd-home-tagline {
+  @extend %anim-3d;
+  animation-delay: $delay;
+  animation-name: anim-slow-intro;
+  font-size: calc(var(--scale) * 1.25em);
+  transform-origin: top center;
+}
+
+.bd-home-knowledge {
+  --bd-width: 0.0625em;
+  @extend %anim-3d;
+  animation-delay: $delay * 2;
+  animation-name: anim-slow-intro;
+  align-self: center;
+  background-color: cv.getVar("scheme-main");
+  border-color: cv.getVar("success-80");
+  box-shadow: 0px 0.25em 0.5em 0px
+    hsla(
+      cv.getVar("success-h"),
+      cv.getVar("success-s"),
+      cv.getVar("success-l"),
+      0.08
+    );
+  color: cv.getVar("success-40");
+  font-size: calc(var(--scale) * 1.25em);
+  transform-origin: center;
+
+  .icon {
+    color: cv.getVar("success-base");
+  }
+}
+
+.bd-home-buttons {
+  gap: calc(var(--scale) * 1.5rem);
+
+  .button {
+    @extend %anim-3d;
+    animation-delay: $delay * 4;
+    animation-name: anim-slow-intro;
+    font-size: 1.25em;
+
+    strong {
+      font-weight: cv.getVar("weight-medium");
+    }
+
+    &.is-primary {
+      animation-delay: $delay * 3;
+      // color: white;
+    }
+  }
+}
+
+@include mx.desktop {
+  .bd-home-intro-content {
+    // padding-bottom: 6rem;
+  }
+
+  .bd-home-buttons {
+    .button {
+      @include cv.register-vars(
+        (
+          "button-padding-vertical": 0.8125em,
+        )
+      );
+
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+  }
+}
+
+.bd-home-circles {
+  left: 0;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+}
+
+.bd-circles {
+  --d: 1360px;
+  height: var(--d);
+  left: calc(calc(100% - var(--d)) / 2);
+  position: absolute;
+  top: calc(calc(100% - var(--d)) / 2);
+  width: var(--d);
+}
+
+.bd-dot {
+  // background-color: purple;
+  border-radius: 9999px;
+  height: 1.5rem;
+  left: calc(50% - 0.75rem);
+  position: absolute;
+  top: calc(50% - 0.75rem);
+  width: 1.5rem;
+
+  .thing {
+    // opacity: 0.5;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate3d(-50%, -10%, 0);
+    white-space: nowrap;
+  }
+}
+
+.bd-circle {
+  --h: 121;
+  --s: 0%;
+  --l: 90%;
+  --a: 0.2;
+  @extend %bd-animated;
+  animation-name: anim-grow;
+  animation-duration: 1s;
+  border: 1px dashed cv.getVar("border");
+  // box-shadow:
+  //   0 0 4em hsla(var(--h), var(--s), var(--l), var(--a)),
+  //   inset 0 0 4em hsla(var(--h), var(--s), var(--l), var(--a));
+  border-radius: 9999px;
+  left: calc(calc(100% - var(--d)) / 2);
+  height: var(--d);
+  position: absolute;
+  top: calc(calc(100% - var(--d)) / 2);
+  width: var(--d);
+
+  &.is-one {
+    --d: 800px;
+  }
+
+  &.is-two {
+    --h: 171;
+    --d: 1080px;
+    animation-delay: var(--circle-delay-b);
+  }
+
+  &.is-three {
+    --h: 191;
+    --d: 1360px;
+    animation-delay: var(--circle-delay-c);
+  }
+}
+
+@include mx.mobile {
+  .bd-home-intro {
+    --scale: 0.75;
+  }
+
+  .bd-circles {
+    display: none;
+  }
+}
+
+@include mx.tablet {
+  .bd-home-features {
+    display: none;
+  }
+}

docs/_sass/home/screenshots.scss

@@ -0,0 +1,24 @@
+@use "sass/utilities/mixins" as mx;
+
+.bd-screenshots {
+  display: grid;
+  grid-gap: var(--bulma-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 mx.tablet {
+  .bd-screenshots {
+    grid-template-columns: repeat(auto-fill, minmax(336px, 1fr));
+    margin: 0 auto;
+    max-width: var(--container-width);
+  }
+}

docs/_sass/home/section.scss

@@ -0,0 +1,129 @@
+@use "sass/utilities/mixins" as mx;
+
+.bd-home-section {
+  --spacing: 3rem;
+  --bd-section-vertical: var(--bulma-block-spacing);
+  --bd-section-horizontal: var(--bulma-block-spacing);
+
+  background-color: var(--bulma-body-background-color);
+  background-image: linear-gradient(
+    180deg,
+    hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.1),
+    transparent calc(var(--spacing) * 3)
+  );
+  background-repeat: repeat-x;
+  padding: calc(3 * var(--spacing)) var(--spacing) calc(3 * var(--spacing));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing);
+  align-items: stretch;
+  z-index: 1;
+
+  .bd-tw {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 28em;
+  }
+
+  &.is-support {
+    background: var(--bulma-background);
+    padding: 4.5rem 3rem;
+    gap: 1.5rem;
+
+    .title,
+    strong {
+      color: inherit;
+    }
+  }
+
+  &.theme-dark {
+    background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 9%);
+    min-height: 70vh;
+    justify-content: center;
+
+    .container {
+      flex-grow: 0;
+    }
+
+    .bd-nav-item {
+      padding: 0.5em 0.75em;
+    }
+  }
+}
+
+.bd-heading {
+  --side-width: 13.5em;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  font-size: 1.25em;
+  text-align: center;
+  column-gap: var(--spacing);
+  row-gap: calc(0.5 * var(--spacing));
+  grid-template-columns: 14rem 1fr 14rem;
+
+  .bd-heading-icon,
+  .bd-heading-button {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--side-width);
+  }
+
+  .bd-heading-icon .icon {
+    color: var(--theme-color);
+    font-size: 1.25em;
+  }
+
+  .title {
+    font-size: 2em;
+  }
+
+  .subtitle {
+    color: var(--theme-color);
+    font-size: 1.25em;
+
+    strong {
+      color: inherit;
+    }
+  }
+
+  .button {
+    font-size: 0.875em;
+  }
+}
+
+.bd-home-themes {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25em;
+}
+
+.bd-home-theme-preview {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+
+  > * {
+    flex-basis: auto;
+    flex-grow: 1;
+  }
+}
+
+@include mx.desktop {
+  .bd-heading {
+    flex-wrap: nowrap;
+  }
+}
+
+@include mx.widescreen {
+  .bd-heading {
+    font-size: 1.5em;
+  }
+}