Fix #3926

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Fix #3904, #3884: fix website horizontal overflow
 - Fix #3849: fix Light Mode color swatches in Dark Mode
 - Fix #3918: broken placeholder images
+- Fix #3926: broken documentation hero
 
 ## 1.0.2
 

docs/_sass/docs/hero.scss

@@ -37,7 +37,7 @@
   }
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: 1400px) {
   .bd-hero.is-docs {
     flex-wrap: nowrap;
 
@@ -47,12 +47,6 @@
   }
 }
 
-@media screen and (min-width: 1200px) {
-  .bd-hero.is-docs {
-    flex-wrap: nowrap;
-  }
-}
-
 .bd-hero-title {
   color: hsl(
     cv.getVar("text-h"),

docs/_sass/home/bubble.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "sass/utilities/css-variables" as cv;
 @use "../utils";
 
@@ -128,7 +129,7 @@
 $bubble-order: ("axbom", "jesseschoff", "ale_codes", "MyTopSecretName");
 $delay-factor: 0.3s;
 
-@for $index from 1 through length($bubble-order) {
+@for $index from 1 through list.length($bubble-order) {
   $name: list.nth($bubble-order, $index);
 
   .js-bubble-#{$name} {

docs/_sass/home/custom.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass/utilities/mixins" as mx;
 @use "sass/themes/light";
 
@@ -72,11 +73,11 @@ $sass: #bf4080;
       color: light.$scheme-main;
 
       &:hover {
-        background-color: darken($mauve, 2.5%);
+        background-color: color.adjust($mauve, $lightness: -2.5%);
       }
 
       &:active {
-        background-color: darken($mauve, 5%);
+        background-color: color.adjust($mauve, $lightness: -5%);
       }
     }
 
@@ -85,11 +86,11 @@ $sass: #bf4080;
       color: light.$scheme-main;
 
       &:hover {
-        background-color: darken($pink, 2.5%);
+        background-color: color.adjust($pink, $lightness: -2.5%);
       }
 
       &:active {
-        background-color: darken($pink, 5%);
+        background-color: color.adjust($pink, $lightness: -5%);
       }
     }
   }

sass/utilities/functions.scss

@@ -18,9 +18,12 @@
       @if meta.type-of($name) ==
         "string" and
         (
-          type-of($components) == "list" or meta.type-of($components) == "color"
+          meta.type-of($components) ==
+            "list" or
+            meta.type-of($components) ==
+            "color"
         ) and
-        length($components) >=
+        list.length($components) >=
         1
       {
         $color-base: null;
@@ -40,13 +43,13 @@
           $color-base: list.nth($components, 1);
 
           // If Invert, Light and Dark are provided
-          @if length($components) > 3 {
+          @if list.length($components) > 3 {
             $color-invert: list.nth($components, 2);
             $color-light: list.nth($components, 3);
             $color-dark: list.nth($components, 4);
 
             // If only Invert and Light are provided
-          } @else if length($components) > 2 {
+          } @else if list.length($components) > 2 {
             $color-invert: list.nth($components, 2);
             $color-light: list.nth($components, 3);
             $color-dark: bulmaFindDarkColor($color-base);
@@ -66,7 +69,7 @@
           // We merge this colors elements as map with Bulma's colors map
           // (we can override them this way, no multiple definition for the same name)
           // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
-          $merged-colors: map_merge(
+          $merged-colors: map.merge(
             $merged-colors,
             (
               $name: $value,
@@ -146,7 +149,7 @@
       $l: color.channel($color, "lightness", $space: hsl);
     }
 
-    @return change-color($color, $lightness: $l);
+    @return color.change($color, $lightness: $l);
   }
 
   @return $background;
@@ -158,7 +161,7 @@
     $luminance-delta: 0.53 - $luminance;
     $target-l: round($base-l + $luminance-delta * 53);
 
-    @return change-color($color, $lightness: max($base-l, $target-l));
+    @return color.change($color, $lightness: max($base-l, $target-l));
   }
 
   @return $text-strong;