refactor: rename style to styles

styles/bulma/sass/layout/_index.scss

@@ -0,0 +1,9 @@
+/* Bulma Components */
+@charset "utf-8";
+
+@forward "container";
+@forward "footer";
+@forward "hero";
+@forward "level";
+@forward "media";
+@forward "section";

styles/bulma/sass/layout/container.scss

@@ -0,0 +1,51 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$container-offset: 2 * iv.$gap !default;
+$container-max-width: iv.$fullhd !default;
+
+.#{iv.$class-prefix}container {
+  flex-grow: 1;
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+
+  &.#{iv.$class-prefix}is-fluid {
+    max-width: none !important;
+    padding-left: iv.$gap;
+    padding-right: iv.$gap;
+    width: 100%;
+  }
+
+  @include mx.desktop {
+    max-width: iv.$desktop - $container-offset;
+  }
+
+  @include mx.until-widescreen {
+    &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) {
+      max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
+    }
+  }
+
+  @include mx.until-fullhd {
+    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not(
+        .#{iv.$class-prefix}is-max-widescreen
+      ) {
+      max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
+    }
+  }
+
+  @include mx.widescreen {
+    &:not(.#{iv.$class-prefix}is-max-desktop) {
+      max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
+    }
+  }
+
+  @include mx.fullhd {
+    &:not(.#{iv.$class-prefix}is-max-desktop):not(
+        .#{iv.$class-prefix}is-max-widescreen
+      ) {
+      max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
+    }
+  }
+}

styles/bulma/sass/layout/footer.scss

@@ -0,0 +1,23 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$footer-background-color: cv.getVar("scheme-main-bis") !default;
+$footer-color: false !default;
+$footer-padding: 3rem 1.5rem 6rem !default;
+
+.#{iv.$class-prefix}footer {
+  @include cv.register-vars(
+    (
+      "footer-background-color": #{$footer-background-color},
+      "footer-color": #{$footer-color},
+      "footer-padding": #{$footer-padding},
+    )
+  );
+
+  background-color: cv.getVar("footer-background-color");
+  padding: cv.getVar("footer-padding");
+
+  @if $footer-color {
+    color: cv.getVar("footer-color");
+  }
+}

styles/bulma/sass/layout/hero.scss

@@ -0,0 +1,270 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$hero-body-padding: 3rem 1.5rem !default;
+$hero-body-padding-tablet: 3rem 3rem !default;
+$hero-body-padding-small: 1.5rem !default;
+$hero-body-padding-medium: 9rem 4.5rem !default;
+$hero-body-padding-large: 18rem 6rem !default;
+
+$hero-gradient-h-offset: 5deg;
+$hero-gradient-s-offset: 10%;
+$hero-gradient-l-offset: 5%;
+
+$hero-colors: dv.$colors !default;
+
+// Main container
+.#{iv.$class-prefix}hero {
+  @include cv.register-vars(
+    (
+      "hero-body-padding": #{$hero-body-padding},
+      "hero-body-padding-tablet": #{$hero-body-padding-tablet},
+      "hero-body-padding-small": #{$hero-body-padding-small},
+      "hero-body-padding-medium": #{$hero-body-padding-medium},
+      "hero-body-padding-large": #{$hero-body-padding-large},
+    )
+  );
+}
+
+.#{iv.$class-prefix}hero {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .#{iv.$class-prefix}navbar {
+    background: none;
+  }
+
+  .#{iv.$class-prefix}tabs {
+    ul {
+      border-bottom: none;
+    }
+  }
+
+  // Colors
+  @each $name, $pair in $hero-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      @include cv.register-vars(
+        (
+          "hero-h": #{cv.getVar($name, "", "-h")},
+          "hero-s": #{cv.getVar($name, "", "-s")},
+          "hero-background-l": #{cv.getVar($name, "", "-l")},
+          "hero-color-l": #{cv.getVar($name, "", "-invert-l")},
+        )
+      );
+
+      $background-color: hsl(
+        #{cv.getVar("hero-h")},
+        #{cv.getVar("hero-s")},
+        #{cv.getVar("hero-background-l")}
+      );
+      $color: hsl(
+        #{cv.getVar("hero-h")},
+        #{cv.getVar("hero-s")},
+        #{cv.getVar("hero-color-l")}
+      );
+
+      background-color: hsl(
+        #{cv.getVar("hero-h")},
+        #{cv.getVar("hero-s")},
+        #{cv.getVar("hero-background-l")}
+      );
+      color: $color;
+
+      .#{iv.$class-prefix}navbar {
+        @include cv.register-vars(
+          (
+            "navbar-item-color": $color,
+            "navbar-item-hover-background-color": $color,
+            "navbar-item-hover-color": $background-color,
+            "navbar-item-active-background-color": $color,
+            "navbar-item-active-color": $background-color,
+          )
+        );
+      }
+
+      .#{iv.$class-prefix}tabs {
+        @include cv.register-vars(
+          (
+            "tabs-link-color": $color,
+            "tabs-boxed-link-active-background-color": $color,
+            "tabs-boxed-link-active-border-color": $background-color,
+            "tabs-link-active-color": $background-color,
+          )
+        );
+      }
+
+      .#{iv.$class-prefix}subtitle {
+        @include cv.register-vars(
+          (
+            "subtitle-color": $color,
+            "subtitle-strong-color": $color,
+          )
+        );
+      }
+
+      .#{iv.$class-prefix}title {
+        @include cv.register-vars(
+          (
+            "title-color": $color,
+            "title-strong-color": $color,
+          )
+        );
+      }
+
+      // Modifiers
+      &.#{iv.$class-prefix}is-bold {
+        $gradient-top-left: hsl(
+          calc(#{cv.getVar("hero-h")} - $hero-gradient-h-offset),
+          calc(#{cv.getVar("hero-s")} + $hero-gradient-s-offset),
+          calc(#{cv.getVar("hero-background-l")} + $hero-gradient-l-offset)
+        );
+        $gradient-middle: hsl(
+          #{cv.getVar("hero-h")},
+          #{cv.getVar("hero-s")},
+          #{cv.getVar("hero-background-l")}
+        );
+        $gradient-bottom-right: hsl(
+          calc(#{cv.getVar("hero-h")} + $hero-gradient-h-offset),
+          calc(#{cv.getVar("hero-s")} - $hero-gradient-s-offset),
+          calc(#{cv.getVar("hero-background-l")} - $hero-gradient-l-offset)
+        );
+
+        background-image: linear-gradient(
+          141deg,
+          $gradient-top-left 0%,
+          $gradient-middle 71%,
+          $gradient-bottom-right 100%
+        );
+
+        @include mx.mobile {
+          .#{iv.$class-prefix}navbar-menu {
+            background-image: linear-gradient(
+              141deg,
+              $gradient-top-left 0%,
+              $color 71%,
+              $gradient-bottom-right 100%
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    .#{iv.$class-prefix}hero-body {
+      padding: cv.getVar("hero-body-padding-small");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    @include mx.tablet {
+      .#{iv.$class-prefix}hero-body {
+        padding: cv.getVar("hero-body-padding-medium");
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    @include mx.tablet {
+      .#{iv.$class-prefix}hero-body {
+        padding: cv.getVar("hero-body-padding-large");
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-halfheight,
+  &.#{iv.$class-prefix}is-fullheight,
+  &.#{iv.$class-prefix}is-fullheight-with-navbar {
+    .#{iv.$class-prefix}hero-body {
+      align-items: center;
+      display: flex;
+
+      & > .#{iv.$class-prefix}container {
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-halfheight {
+    min-height: 50vh;
+  }
+
+  &.#{iv.$class-prefix}is-fullheight {
+    min-height: 100vh;
+  }
+}
+
+// Components
+
+.#{iv.$class-prefix}hero-video {
+  @extend %overlay;
+  overflow: hidden;
+
+  video {
+    left: 50%;
+    min-height: 100%;
+    min-width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  // Modifiers
+  &.#{iv.$class-prefix}is-transparent {
+    opacity: 0.3;
+  }
+
+  // Responsiveness
+  @include mx.mobile {
+    display: none;
+  }
+}
+
+.#{iv.$class-prefix}hero-buttons {
+  margin-top: 1.5rem;
+
+  // Responsiveness
+  @include mx.mobile {
+    .#{iv.$class-prefix}button {
+      display: flex;
+
+      &:not(:last-child) {
+        margin-bottom: 0.75rem;
+      }
+    }
+  }
+
+  @include mx.tablet {
+    display: flex;
+    justify-content: center;
+
+    .#{iv.$class-prefix}button:not(:last-child) {
+      margin-inline-end: 1.5rem;
+    }
+  }
+}
+
+// Containers
+
+.#{iv.$class-prefix}hero-head,
+.#{iv.$class-prefix}hero-foot {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.#{iv.$class-prefix}hero-body {
+  flex-grow: 1;
+  flex-shrink: 0;
+  padding: cv.getVar("hero-body-padding");
+
+  @include mx.tablet {
+    padding: cv.getVar("hero-body-padding-tablet");
+  }
+}

styles/bulma/sass/layout/level.scss

@@ -0,0 +1,107 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$level-item-spacing: calc(#{cv.getVar("block-spacing")} * 0.5) !default;
+
+.#{iv.$class-prefix}level {
+  @extend %block;
+  @include cv.register-var("level-item-spacing", #{$level-item-spacing});
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: cv.getVar("level-item-spacing");
+
+  code {
+    border-radius: cv.getVar("radius");
+  }
+
+  img {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  // Modifiers
+  &.#{iv.$class-prefix}is-mobile {
+    display: flex;
+    flex-direction: row;
+
+    .#{iv.$class-prefix}level-left,
+    .#{iv.$class-prefix}level-right {
+      display: flex;
+    }
+
+    .#{iv.$class-prefix}level-item {
+      &:not(.#{iv.$class-prefix}is-narrow) {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  // Responsiveness
+  @include mx.tablet {
+    display: flex;
+    flex-direction: row;
+
+    & > .#{iv.$class-prefix}level-item {
+      &:not(.#{iv.$class-prefix}is-narrow) {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+.#{iv.$class-prefix}level-item {
+  align-items: center;
+  display: flex;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
+
+  .#{iv.$class-prefix}title,
+  .#{iv.$class-prefix}subtitle {
+    margin-bottom: 0;
+  }
+}
+
+.#{iv.$class-prefix}level-left,
+.#{iv.$class-prefix}level-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  gap: $level-item-spacing;
+
+  .#{iv.$class-prefix}level-item {
+    // Modifiers
+    &.#{iv.$class-prefix}is-flexible {
+      flex-grow: 1;
+    }
+  }
+}
+
+.#{iv.$class-prefix}level-left {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  // Responsiveness
+  @include mx.tablet {
+    flex-direction: row;
+  }
+}
+
+.#{iv.$class-prefix}level-right {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  // Responsiveness
+  @include mx.tablet {
+    flex-direction: row;
+  }
+}

styles/bulma/sass/layout/media.scss

@@ -0,0 +1,106 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$media-border-color: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("border-l")},
+  0.5
+) !default;
+$media-border-size: 1px !default;
+$media-spacing: 1rem !default;
+$media-spacing-large: 1.5rem !default;
+$media-content-spacing: 0.75rem !default;
+$media-level-1-spacing: 0.75rem !default;
+$media-level-1-content-spacing: 0.5rem !default;
+$media-level-2-spacing: 0.5rem !default;
+
+.#{iv.$class-prefix}media {
+  @extend %block;
+  @include cv.register-vars(
+    (
+      "media-border-color": #{$media-border-color},
+      "media-border-size": #{$media-border-size},
+      "media-spacing": #{$media-spacing},
+      "media-spacing-large": #{$media-spacing-large},
+      "media-content-spacing": #{$media-content-spacing},
+      "media-level-1-spacing": #{$media-level-1-spacing},
+      "media-level-1-content-spacing": #{$media-level-1-content-spacing},
+      "media-level-2-spacing": #{$media-level-2-spacing},
+    )
+  );
+  align-items: flex-start;
+  display: flex;
+  text-align: inherit;
+
+  .#{iv.$class-prefix}content:not(:last-child) {
+    margin-bottom: cv.getVar("media-content-spacing");
+  }
+
+  .#{iv.$class-prefix}media {
+    border-top-color: cv.getVar("media-border-color");
+    border-top-style: solid;
+    border-top-width: cv.getVar("media-border-size");
+    display: flex;
+    padding-top: cv.getVar("media-level-1-spacing");
+
+    .#{iv.$class-prefix}content:not(:last-child),
+    .#{iv.$class-prefix}control:not(:last-child) {
+      margin-bottom: cv.getVar("media-level-1-content-spacing");
+    }
+
+    .#{iv.$class-prefix}media {
+      padding-top: cv.getVar("media-level-2-spacing");
+
+      & + .#{iv.$class-prefix}media {
+        margin-top: cv.getVar("media-level-2-spacing");
+      }
+    }
+  }
+
+  & + .#{iv.$class-prefix}media {
+    border-top-color: cv.getVar("media-border-color");
+    border-top-style: solid;
+    border-top-width: cv.getVar("media-border-size");
+    margin-top: cv.getVar("media-spacing");
+    padding-top: cv.getVar("media-spacing");
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-large {
+    & + .#{iv.$class-prefix}media {
+      margin-top: cv.getVar("media-spacing-large");
+      padding-top: cv.getVar("media-spacing-large");
+    }
+  }
+}
+
+.#{iv.$class-prefix}media-left,
+.#{iv.$class-prefix}media-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.#{iv.$class-prefix}media-left {
+  margin-inline-end: cv.getVar("media-spacing");
+}
+
+.#{iv.$class-prefix}media-right {
+  margin-inline-start: cv.getVar("media-spacing");
+}
+
+.#{iv.$class-prefix}media-content {
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: inherit;
+}
+
+@include mx.mobile {
+  .#{iv.$class-prefix}media-content {
+    overflow-x: auto;
+  }
+}

styles/bulma/sass/layout/section.scss

@@ -0,0 +1,34 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$section-padding: 3rem 1.5rem !default;
+$section-padding-desktop: 3rem 3rem !default;
+$section-padding-medium: 9rem 4.5rem !default;
+$section-padding-large: 18rem 6rem !default;
+
+.#{iv.$class-prefix}section {
+  @include cv.register-vars(
+    (
+      "section-padding": #{$section-padding},
+      "section-padding-desktop": #{$section-padding-desktop},
+      "section-padding-medium": #{$section-padding-medium},
+      "section-padding-large": #{$section-padding-large},
+    )
+  );
+  padding: cv.getVar("section-padding");
+
+  // Responsiveness
+  @include mx.desktop {
+    padding: cv.getVar("section-padding-desktop");
+
+    // Sizes
+    &.#{iv.$class-prefix}is-medium {
+      padding: cv.getVar("section-padding-medium");
+    }
+
+    &.#{iv.$class-prefix}is-large {
+      padding: cv.getVar("section-padding-large");
+    }
+  }
+}