Fix banner overflow

[Docs] Mention required order on form controls' modifiers

.github/PULL_REQUEST_TEMPLATE.md

@@ -22,10 +22,10 @@ This is a **new feature | improvement | bugfix | documentation fix**.
 None.
 
 <!-- BEFORE SUBMITTING YOUR PR, MAKE SURE TO FOLLOW THESE STEPS: -->
-<!-- 1. Pull the latest `master` branch -->
-<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
+<!-- 1. Pull the latest `main` branch -->
+<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
 <!-- 3. Make sure your PR only affects `.sass` or documentation files -->
-<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#try-your-changes). -->
+<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#try-your-changes). -->
 
 <!-- How have you confirmed this feature works? -->
 <!-- Please explain more than "Yes". -->

.gitignore

@@ -6,7 +6,9 @@ npm-debug.log
 test.css
 test.css.map
 test.html
+test*.html
 test.sass
+test.scss
 test.css
 test.css.map
 

CHANGELOG.md

@@ -1,7 +1,45 @@
 # Bulma Changelog
 
+## 1.0.3
+
+### Bug Fixes
+
+- Fix #3842: restore use of `$easing`, `$radius-rounded` and `$speed` Sass variables
+- Fix #3920: migrate code to avoid Sass 1.80 deprecation warning of global built-in functions
+- Fix #3822: Non-minified version of bulma-prefixed was missing
+- Fix #3805: helper classes were missing prefix
+
+### Documentation Fixes
+
+- 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
 
+### Improvements
+
+- Smart Grid `is-col-min` now goes up to `32` (Fixes #3829)
+- Remove need for `is-variable` modifier for Column gaps
+- You can have a list of radio buttons or checkboxes with the `radios` and `checkboxes` classes respectively
+- Add `is-max-tablet` modifier to the Container element
+- Add `currentColor` and `inherit` as possible values for the color and background helpers
+- The Section can now have a minimum height of `100vh` with the `is-fullheight` modifier
+- Add more SCSS variables:
+  - `$input-border-style`
+  - `$input-border-width`
+  - `$label-spacing`
+  - `$field-block-spacing`
+- Add more CSS variables:
+  - `--bulma-input-border-style`
+  - `--bulma-input-border-width`
+  - `--bulma-label-color`
+  - `--bulma-label-spacing`
+  - `--bulma-label-weight` 
+  - `--bulma-help-size`
+  - `--bulma-field-block-spacing`
+
 ### Bug fixes
 
 - Fix #3824: ability to override `$scheme-h`, `$scheme-s`, `$dark-l` and `$light-l` Sass variables
@@ -9,6 +47,9 @@
 - Fix #3743: make sure 12 columns system take up whole width
 - Fix #3799: restore variable columns
 - Fix #3846: restore `--bulma-column-gap` CSS variable
+- Fix #3775: `has-background` helpers should only affect element it's applied to
+- Fix #3856: Sass nested rule deprecation warning
+- Fix #3757: restore use of `$navbar-burger-color`
 
 ## 1.0.1
 

README.md

@@ -52,7 +52,7 @@ Feel free to raise an issue or submit a pull request.
 
 ## CSS only
 
-Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css)
+Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/main/css/bulma.css)
 
 You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/customize/#docsNav).
 
@@ -131,12 +131,14 @@ Browse the [online documentation here.](https://bulma.io/documentation/start/ove
 | [@angular-bulma](https://quinnjr.github.io/angular-bulma)                            | [Angular](https://angular.io/) directives and components to use in your Bulma projects                           |
 | [Bulma CSS Class Completion](https://github.com/eliutdev/bulma-css-class-completion) | CSS class name completion for the HTML class attribute based on Bulma CSS classes.                               |
 | [Crispy-Bulma](https://github.com/ckrybus/crispy-bulma)                              | Bulma template pack for django-crispy-forms                                                                      |
-| [CASE](https://case.app)                                                             | CASE is Lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK         |
+| [Manifest](https://manifest.build)                                                   | Manifest is a lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK             |
 | [Reactive Bulma](https://github.com/NicolasOmar/reactive-bulma)                                                             | A component library based on React, Bulma, Typescript and Rollup         |
 
+<p>Browser testing via<br /><a href="https://www.lambdatest.com/" target="_blank"><img src="https://bulma.io/assets/images/amis/lambdatest-logo.png" width="168" height="40" /></a></p>
+
 ## Copyright and license ![Github](https://img.shields.io/github/license/jgthms/bulma?logo=Github)
 
-Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
+Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/main/LICENSE).
 
 [npm-link]: https://www.npmjs.com/package/bulma
 [awesome-link]: https://github.com/awesome-css-group/awesome-css

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "homepage": "https://bulma.io",
   "authors": ["jgthms <bbxdesign@gmail.com>"],
   "description": "Modern CSS framework based on Flexbox",

bulma.scss

@@ -1,4 +1,4 @@
 @charset "utf-8";
 
-/*! bulma.io v1.0.1 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
 @use "sass";

docs/_data/links.json

@@ -757,7 +757,7 @@
       "path": "/documentation/helpers/other-helpers/"
     }
   },
-  "navbar": ["docs", "expo", "love", "sponsor", "shop"],
+  "navbar": ["docs", "expo", "love", "sponsor"],
   "navbar_icons": ["github", "twitter"],
   "navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
   "category_ids": [

docs/_data/love.json

@@ -1984,9 +1984,9 @@
       "id": "1161404522331344896",
       "date": "11:29 PM - 13 Aug 2019",
       "content": "Bloody hell.... To think that I was using my own simple framework for all of the <a href=\"https://twitter.com/search?q=%23Frontend\">#Frontend</a> <a href=\"https://twitter.com/search?q=%23webdevelopment\">#webdevelopment</a>. Here is a my old login page vs <a href=\"https://twitter.com/search?q=%23bulmaio\">#bulmaio</a> framework... Me so dumb. Why reinvent the wheel? Amazing job <a href=\"https://twitter.com/jgthms\">@jgthms</a> <a href=\"https://twitter.com/search?q=%23CSS\">#CSS</a> <a href=\"https://t.co/X5NnKZxyQq\">pic.twitter.com/X5NnKZxyQq</a>",
-      "fullname": "db4you",
-      "username": "db4you2",
-      "avatar": "https://pbs.twimg.com/profile_images/1283183292683038727/wVhp9AQr_normal.jpg",
+      "fullname": "gebsystems",
+      "username": "gebsystems",
+      "avatar": "https://pbs.twimg.com/profile_images/1713156593137639424/Wwz0i_rj_400x400.jpg",
       "hearts": 22,
       "retweets": 4
     },

docs/_data/meta.json

@@ -2,11 +2,11 @@
   "title": "Bulma: Free, open source, and modern CSS framework based on Flexbox",
   "description": "Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
   "documentation": "/documentation",
-  "download": "https://github.com/jgthms/bulma/releases/download/1.0.1/bulma-1.0.1.zip",
-  "release_notes": "https://github.com/jgthms/bulma/releases/tag/1.0.1",
+  "download": "https://github.com/jgthms/bulma/releases/download/1.0.2/bulma-1.0.2.zip",
+  "release_notes": "https://github.com/jgthms/bulma/releases/tag/1.0.2",
   "github": "https://github.com/jgthms/bulma",
   "twitter": "https://twitter.com/jgthms",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
   "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
   "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",

docs/_data/variables/components/card.json

@@ -37,7 +37,7 @@
     },
     {
       "name": "card-header-shadow",
-      "value": "0 0.125em 0.25em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.1\n  )",
+      "value": "0 0.125em 0.25em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n)",
       "css-var": "card-header-shadow"
     },
     {
@@ -138,4 +138,4 @@
       "value": "var(--bulma-block-spacing)"
     }
   ]
-}
+}

docs/_data/variables/components/modal.json

@@ -99,10 +99,6 @@
       "name": "modal-card-body-padding",
       "value": "2rem",
       "css-var": "modal-card-body-padding"
-    },
-    {
-      "name": "modal-breakpoint",
-      "value": "iv.$tablet"
     }
   ],
   "css-vars": [
@@ -187,4 +183,4 @@
       "value": "2rem"
     }
   ]
-}
+}

docs/_data/variables/components/navbar.json

@@ -2,14 +2,17 @@
   "sass-vars": [
     {
       "name": "navbar-background-color",
+      "css-var": "navbar-background-color",
       "value": "var(--bulma-scheme-main)"
     },
     {
       "name": "navbar-box-shadow-size",
+      "css-var": "navbar-box-shadow-size",
       "value": "0 0.125em 0 0"
     },
     {
       "name": "navbar-box-shadow-color",
+      "css-var": "navbar-box-shadow-color",
       "value": "var(--bulma-background)"
     },
     {
@@ -19,125 +22,145 @@
     },
     {
       "name": "navbar-padding-vertical",
+      "css-var": "navbar-padding-vertical",
       "value": "1rem"
     },
     {
       "name": "navbar-padding-horizontal",
+      "css-var": "navbar-padding-horizontal",
       "value": "2rem"
     },
     {
       "name": "navbar-z",
+      "css-var": "navbar-z",
       "value": "30"
     },
     {
       "name": "navbar-fixed-z",
+      "css-var": "navbar-fixed-z",
       "value": "30"
     },
     {
       "name": "navbar-item-img-max-height",
+      "css-var": "navbar-item-img-max-height",
       "value": "1.75rem"
     },
     {
       "name": "navbar-burger-color",
+      "css-var": "navbar-burger-color",
       "value": "var(--bulma-navbar-item-color)"
     },
     {
       "name": "navbar-tab-hover-background-color",
+      "css-var": "navbar-tab-hover-background-color",
       "value": "transparent"
     },
     {
       "name": "navbar-tab-hover-border-bottom-color",
+      "css-var": "navbar-tab-hover-border-bottom-color",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-tab-active-color",
+      "css-var": "navbar-tab-active-color",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-tab-active-background-color",
+      "css-var": "navbar-tab-active-background-color",
       "value": "transparent"
     },
     {
       "name": "navbar-tab-active-border-bottom-color",
+      "css-var": "navbar-tab-active-border-bottom-color",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-tab-active-border-bottom-style",
+      "css-var": "navbar-tab-active-border-bottom-style",
       "value": "solid"
     },
     {
       "name": "navbar-tab-active-border-bottom-width",
+      "css-var": "navbar-tab-active-border-bottom-width",
       "value": "0.1875em"
     },
     {
       "name": "navbar-dropdown-background-color",
+      "css-var": "navbar-dropdown-background-color",
       "value": "var(--bulma-scheme-main)"
     },
     {
       "name": "navbar-dropdown-border-l",
+      "css-var": "navbar-dropdown-border-l",
       "value": "var(--bulma-border-l)"
     },
     {
       "name": "navbar-dropdown-border-color",
+      "css-var": "navbar-dropdown-border-color",
       "value": "hsl(\n  var(--bulma-navbar-h),\n  var(--bulma-navbar-s),\n  var(--bulma-navbar-dropdown-border-l)\n)"
     },
     {
       "name": "navbar-dropdown-border-style",
+      "css-var": "navbar-dropdown-border-style",
       "value": "solid"
     },
     {
       "name": "navbar-dropdown-border-width",
+      "css-var": "navbar-dropdown-border-width",
       "value": "0.125em"
     },
     {
       "name": "navbar-dropdown-offset",
+      "css-var": "navbar-dropdown-offset",
       "value": "-0.25em"
     },
     {
       "name": "navbar-dropdown-arrow",
+      "css-var": "navbar-dropdown-arrow",
       "value": "var(--bulma-link)"
     },
     {
       "name": "navbar-dropdown-radius",
+      "css-var": "navbar-dropdown-radius",
       "value": "var(--bulma-radius-large)"
     },
     {
       "name": "navbar-dropdown-z",
+      "css-var": "navbar-dropdown-z",
       "value": "20"
     },
     {
       "name": "navbar-dropdown-boxed-radius",
+      "css-var": "navbar-dropdown-boxed-radius",
       "value": "var(--bulma-radius-large)"
     },
     {
       "name": "navbar-dropdown-boxed-shadow",
-      "value": "0 0.5em 0.5em\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.1\n    ),\n  0 0 0 1px\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.1\n    )"
+      "css-var": "navbar-dropdown-boxed-shadow",
+      "value": "0 0.5em 0.5em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n),\n0 0 0 1px hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n)"
     },
     {
       "name": "navbar-divider-background-l",
+      "css-var": "navbar-divider-background-l",
       "value": "var(--bulma-background-l)"
     },
     {
       "name": "navbar-divider-height",
+      "css-var": "navbar-divider-height",
       "value": "0.125em"
     },
     {
       "name": "navbar-bottom-box-shadow-size",
+      "css-var": "navbar-bottom-box-shadow-size",
       "value": "0 -0.125em 0 0"
-    },
-    {
-      "name": "navbar-breakpoint",
-      "value": "iv.$desktop"
-    },
-    {
-      "name": "navbar-colors",
-      "value": "dv.$colors"
     }
   ],
   "css-vars": [
     {
       "name": "navbar-height",
+      "css-var": "navbar-height",
       "value": "3.25rem"
     }
   ]
-}
+}

docs/_data/variables/components/pagination.json

@@ -87,7 +87,7 @@
     },
     {
       "name": "pagination-shadow-inset",
-      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.2\n  )",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n)",
       "css-var": "pagination-shadow-inset"
     }
   ],
@@ -226,7 +226,7 @@
     },
     {
       "name": "pagination-shadow-inset",
-      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.2\n  )"
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n)"
     },
     {
       "name": "pagination-selected-item-h",
@@ -253,4 +253,4 @@
       "value": "#{$pagination-selected-item-color-l},"
     }
   ]
-}
+}

docs/_data/variables/elements/block.json

@@ -1,4 +1,9 @@
 {
   "sass-vars": [],
-  "css-vars": []
-}
+  "css-vars": [
+    {
+      "name": "block-spacing",
+      "value": "1.5rem"
+    }
+  ]
+}

docs/_data/variables/elements/box.json

@@ -27,12 +27,12 @@
     },
     {
       "name": "box-link-hover-shadow",
-      "value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n          \"scheme-invert-l\"\n        )}, 0.1),\n  0 0 0 1px var(--bulma-link)",
+      "value": "0 0.5em 1em -0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.1\n),\n0 0 0 1px var(--bulma-link)",
       "css-var": "box-link-hover-shadow"
     },
     {
       "name": "box-link-active-shadow",
-      "value": "inset 0 1px 2px\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.2\n    ),\n  0 0 0 1px var(--bulma-link)",
+      "value": "inset 0 1px 2px hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.2\n),\n0 0 0 1px var(--bulma-link)",
       "css-var": "box-link-active-shadow"
     }
   ],
@@ -59,11 +59,11 @@
     },
     {
       "name": "box-link-hover-shadow",
-      "value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n          \"scheme-invert-l\"\n        )}, 0.1),\n  0 0 0 1px var(--bulma-link)"
+      "value": "0 0.5em 1em -0.125em hsla(\nvar(--bulma-scheme-h),\nvar(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1),\n0 0 0 1px var(--bulma-link)"
     },
     {
       "name": "box-link-active-shadow",
-      "value": "inset 0 1px 2px\n    hsla(\n      var(--bulma-scheme-h),\n      var(--bulma-scheme-s),\n      var(--bulma-scheme-invert-l),\n      0.2\n    ),\n  0 0 0 1px var(--bulma-link)"
+      "value": "inset 0 1px 2px hsla( var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2),\n0 0 0 1px var(--bulma-link)"
     }
   ]
-}
+}

docs/_data/variables/elements/button.json

@@ -148,10 +148,6 @@
     {
       "name": "button-colors",
       "value": "dv.$colors"
-    },
-    {
-      "name": "button-responsive-sizes",
-      "value": "(\n  \"mobile\": (\n    \"small\": calc(var(--bulma-size-small) * 0.75),\n    \"normal\": calc(var(--bulma-size-small) * 0.875),\n    \"medium\": var(--bulma-size-small),\n    \"large\": var(--bulma-size-normal),\n  ),\n  \"tablet-only\": (\n    \"small\": calc(var(--bulma-size-small) * 0.875),\n    \"normal\": var(--bulma-size-small),\n    \"medium\": var(--bulma-size-normal),\n    \"large\": var(--bulma-size-medium),\n  ),\n)"
     }
   ],
   "css-vars": [
@@ -272,4 +268,4 @@
       "value": "var(--bulma-border)"
     }
   ]
-}
+}

docs/_data/variables/elements/delete.json

@@ -1,4 +1,21 @@
 {
   "sass-vars": [],
-  "css-vars": []
-}
+  "css-vars": [
+    {
+      "name": "delete-dimensions",
+      "value": "1.25rem"
+    },
+    {
+      "name": "delete-background-l",
+      "value": "0%"
+    },
+    {
+      "name": "delete-background-alpha",
+      "value": "0.5"
+    },
+    {
+      "name": "delete-color",
+      "value": "var(--bulma-white)"
+    }
+  ]
+}

docs/_data/variables/elements/table.json

@@ -97,7 +97,7 @@
     },
     {
       "name": "table-striped-row-even-hover-background-color",
-      "value": "cv.getVar(\n  \"scheme-main-ter\"\n)",
+      "value": "var(--bulma-scheme-main-ter)",
       "css-var": "table-striped-row-even-hover-background-color"
     },
     {
@@ -187,4 +187,4 @@
       "value": "cv.getVar(\n  \"scheme-main-ter\"\n)"
     }
   ]
-}
+}

docs/_data/variables/form/file.json

@@ -36,10 +36,6 @@
       "name": "file-name-max-width",
       "value": "16em",
       "css-var": "file-name-max-width"
-    },
-    {
-      "name": "file-colors",
-      "value": "shared.$form-colors"
     }
   ],
   "css-vars": [
@@ -124,4 +120,4 @@
       "value": "#{$file-active-color-l-delta},"
     }
   ]
-}
+}

docs/_data/variables/form/general.json

@@ -0,0 +1,174 @@
+{
+  "sass-vars": [
+    {
+      "name": "control-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "control-radius"
+    },
+    {
+      "name": "control-radius-small",
+      "value": "var(--bulma-radius-small)",
+      "css-var": "control-radius-small"
+    },
+    {
+      "name": "control-border-width",
+      "value": "1px",
+      "css-var": "control-border-width"
+    },
+    {
+      "name": "control-size",
+      "value": "var(--bulma-size-normal)",
+      "css-var": "control-size"
+    },
+    {
+      "name": "control-height",
+      "value": "2.5em",
+      "css-var": "control-height"
+    },
+    {
+      "name": "control-line-height",
+      "value": "1.5",
+      "css-var": "control-line-height"
+    },
+    {
+      "name": "control-padding-vertical",
+      "value": "calc(0.5em - 1px)",
+      "css-var": "control-padding-vertical"
+    },
+    {
+      "name": "control-padding-horizontal",
+      "value": "calc(0.75em - 1px)",
+      "css-var": "control-padding-horizontal"
+    },
+    {
+      "name": "control-focus-shadow-l",
+      "value": "50%",
+      "css-var": "control-focus-shadow-l"
+    },
+    {
+      "name": "label-color",
+      "css-var": "label-color",
+      "value": "var(--bulma-text-strong)"
+    },
+    {
+      "name": "label-weight",
+      "css-var": "label-weight",
+      "value": "var(--bulma-weight-semibold)"
+    },
+    {
+      "name": "help-size",
+      "css-var": "help-size",
+      "value": "var(--bulma-size-small)"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em\n  hsla(\n    var(--bulma-scheme-h),\n    var(--bulma-scheme-s),\n    var(--bulma-scheme-invert-l),\n    0.05\n  )"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)"
+    }
+  ]
+}

docs/_data/variables/form/input.json

@@ -0,0 +1,249 @@
+{
+  "sass-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)",
+      "css-var": "input-h"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)",
+      "css-var": "input-s"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-l"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)",
+      "css-var": "input-border-l"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%",
+      "css-var": "input-border-l-delta"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)",
+      "css-var": "input-hover-border-l-delta"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)",
+      "css-var": "input-active-border-l-delta"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)",
+      "css-var": "input-color-l"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)",
+      "css-var": "input-background-l"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%",
+      "css-var": "input-background-l-delta"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)",
+      "css-var": "input-height"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.05\n)",
+      "css-var": "input-shadow"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)",
+      "css-var": "input-placeholder-color"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)",
+      "css-var": "input-focus-h"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)",
+      "css-var": "input-focus-s"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)",
+      "css-var": "input-focus-l"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)",
+      "css-var": "input-focus-shadow-size"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)",
+      "css-var": "input-focus-shadow-alpha"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-disabled-color"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-background-color"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)",
+      "css-var": "input-disabled-border-color"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)",
+      "css-var": "input-disabled-placeholder-color"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)",
+      "css-var": "input-arrow"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)",
+      "css-var": "input-icon-color"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)",
+      "css-var": "input-icon-hover-color"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)",
+      "css-var": "input-icon-focus-color"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)",
+      "css-var": "input-radius"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "var(--bulma-scheme-h)"
+    },
+    {
+      "name": "input-s",
+      "value": "var(--bulma-scheme-s)"
+    },
+    {
+      "name": "input-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-border-l",
+      "value": "var(--bulma-border-l)"
+    },
+    {
+      "name": "input-border-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-hover-border-l-delta",
+      "value": "var(--bulma-hover-border-l-delta)"
+    },
+    {
+      "name": "input-active-border-l-delta",
+      "value": "var(--bulma-active-border-l-delta)"
+    },
+    {
+      "name": "input-focus-h",
+      "value": "var(--bulma-focus-h)"
+    },
+    {
+      "name": "input-focus-s",
+      "value": "var(--bulma-focus-s)"
+    },
+    {
+      "name": "input-focus-l",
+      "value": "var(--bulma-focus-l)"
+    },
+    {
+      "name": "input-focus-shadow-size",
+      "value": "var(--bulma-focus-shadow-size)"
+    },
+    {
+      "name": "input-focus-shadow-alpha",
+      "value": "var(--bulma-focus-shadow-alpha)"
+    },
+    {
+      "name": "input-color-l",
+      "value": "var(--bulma-text-strong-l)"
+    },
+    {
+      "name": "input-background-l",
+      "value": "var(--bulma-scheme-main-l)"
+    },
+    {
+      "name": "input-background-l-delta",
+      "value": "0%"
+    },
+    {
+      "name": "input-height",
+      "value": "var(--bulma-control-height)"
+    },
+    {
+      "name": "input-shadow",
+      "value": "inset 0 0.0625em 0.125em hsla(\n  var(--bulma-scheme-h),\n  var(--bulma-scheme-s),\n  var(--bulma-scheme-invert-l),\n  0.05\n)"
+    },
+    {
+      "name": "input-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-strong-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-disabled-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-disabled-background-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-border-color",
+      "value": "var(--bulma-background)"
+    },
+    {
+      "name": "input-disabled-placeholder-color",
+      "value": "hsla(\n  var(--bulma-text-h),\n  var(--bulma-text-s),\n  var(--bulma-text-weak-l),\n  0.3\n)"
+    },
+    {
+      "name": "input-arrow",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-icon-color",
+      "value": "var(--bulma-text-light)"
+    },
+    {
+      "name": "input-icon-hover-color",
+      "value": "var(--bulma-text-weak)"
+    },
+    {
+      "name": "input-icon-focus-color",
+      "value": "var(--bulma-link)"
+    },
+    {
+      "name": "input-radius",
+      "value": "var(--bulma-radius)"
+    }
+  ]
+}

docs/_data/variables/form/textarea.json

@@ -0,0 +1,41 @@
+{
+  "sass-vars": [
+    {
+      "name": "textarea-padding",
+      "css-var": "textarea-padding",
+      "value": "var(--bulma-control-padding-horizontal)"
+    },
+    {
+      "name": "textarea-max-height",
+      "css-var": "textarea-max-height",
+      "value": "40em"
+    },
+    {
+      "name": "textarea-min-height",
+      "css-var": "textarea-min-height",
+      "value": "8em"
+    }
+  ],
+  "css-vars": [
+    {
+      "name": "input-h",
+      "value": "#{cv.getVar(\"scheme-h\")},"
+    },
+    {
+      "name": "input-s",
+      "value": "#{cv.getVar(\"scheme-s\")},"
+    },
+    {
+      "name": "input-border-style",
+      "value": "solid,"
+    },
+    {
+      "name": "input-border-width",
+      "value": "1px,"
+    },
+    {
+      "name": "input-border-l",
+      "value": "#{cv.getVar(\"border-l\")},"
+    }
+  ]
+}

docs/_data/variables/layout/container.json

@@ -2,12 +2,14 @@
   "sass-vars": [
     {
       "name": "container-offset",
-      "value": "2 * iv.$gap"
+      "css-var": "container-offset",
+      "value": "64px"
     },
     {
       "name": "container-max-width",
-      "value": "iv.$fullhd"
+      "css-var": "container-max-width",
+      "value": "1408px"
     }
   ],
   "css-vars": []
-}
+}

docs/_data/variables/layout/hero.json

@@ -26,8 +26,19 @@
       "css-var": "hero-body-padding-large"
     },
     {
-      "name": "hero-colors",
-      "value": "dv.$colors"
+      "name": "hero-gradient-h-offset",
+      "value": "5deg",
+      "css-var": "hero-gradient-h-offset"
+    },
+    {
+      "name": "hero-gradient-s-offset",
+      "value": "10%",
+      "css-var": "hero-gradient-s-offset"
+    },
+    {
+      "name": "hero-gradient-l-offset",
+      "value": "5%",
+      "css-var": "hero-gradient-l-offset:"
     }
   ],
   "css-vars": [
@@ -52,4 +63,4 @@
       "value": "18rem 6rem"
     }
   ]
-}
+}

docs/_data/variables/layout/level.json

@@ -6,4 +6,4 @@
     }
   ],
   "css-vars": []
-}
+}

docs/_includes/docs/color/current.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: currentColor"></span>
+<code>currentColor</code>

docs/_includes/docs/color/inherit.html

@@ -0,0 +1,2 @@
+<span class="bd-color" style="background: inherit"></span>
+<code>inherit</code>

docs/_includes/docs/components/logos-item.html

@@ -1,7 +1,7 @@
 <div
   {% if include.unsplash %}
     class="bd-logos-item"
-    style="background-image: url(https://source.unsplash.com/{{ include.unsplash }}/480x480)"
+    style="background-image: url(/assets/images/unsplash/{{ include.unsplash }}.jpg)"
   {% else %}
     class="bd-logos-item is-transparent"
   {% endif %}

docs/_includes/docs/components/variables.html

@@ -2,8 +2,14 @@
 {% assign subtab = include.subtab | default: page.doc-subtab %}
 {% assign data = include.data | default: site.data.variables[tab][subtab] %}
 {% assign sass_vars = include.data | default: data["sass-vars"] %}
+{% assign sass_vars_size = sass_vars | size %}
 {% assign css_vars = include.data | default: data["css-vars"] %}
+{% assign css_vars_size = css_vars | size %}
 
+{% if sass_vars_size > 0 or css_vars_size > 0 %}
+{% include docs/elements/anchor.html name="Sass and CSS variables" %}
+
+{% if sass_vars_size > 0 %}
 <div class="bd-vars-table block table-container">
   <table>
     <thead>
@@ -14,7 +20,7 @@
             <span>Sass Variable</span>
           </div>
         </th>
-        {% unless include.hide_css_vars %}
+        {% unless include.hide_css_vars or page.meta.hide_css_vars %}
           <th>
             <div class="icon-text">
               <span class="icon has-text-link"><i class="fab fa-css3"></i></span>
@@ -36,7 +42,7 @@
         {% unless sass_var["value"] == "dv.$colors" %}
         <tr>
           <td class="bd-theme-sass">{% highlight sass %}${{ sass_var["name"] }}{% endhighlight %}</td>
-          {% unless include.hide_css_vars %}
+          {% unless include.hide_css_vars or page.meta.hide_css_vars %}
             <td class="bd-theme-code">{% highlight css %}var(--bulma-{{ sass_var["css-var"] }}){% endhighlight %}</td>
           {% endunless %}
           <td class="bd-theme-docs">{% highlight css %}{{ sass_var["value"] }}{% endhighlight %}</td>
@@ -46,3 +52,35 @@
     </tbody>
   </table>
 </div>
+{% elsif css_vars_size > 0 %}
+<div class="bd-vars-table block table-container">
+  <table>
+    <thead>
+      <tr>
+        <th>
+          <div class="icon-text">
+            <span class="icon has-text-link"><i class="fab fa-css3"></i></span>
+            <span>CSS Variable</span>
+          </div>
+        </th>
+        <th>
+          <div class="icon-text">
+            <span class="icon has-text-success"><i class="fas fa-code"></i></span>
+            <span>Value</span>
+          </div>
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      {% for css_var in css_vars %}
+        <tr>
+          <td class="bd-theme-sass">{% highlight sass %}var(--bulma-{{ css_var["name"] }}){% endhighlight %}</td>
+          <td class="bd-theme-docs">{% highlight css %}{{ css_var["value"] }}{% endhighlight %}</td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% endif %}
+{% endif %}

docs/_includes/docs/elements/tw.html

@@ -33,13 +33,13 @@
 
   <ul class="bd-tw-actions">
     <li class="bd-tw-action is-reply">
-      <a class="bd-tw-action-link" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
+      <a class="bd-tw-action-link" href="https://x.com/intent/tweet?in_reply_to={{ tweet.id }}">
         <div class="bd-tw-icon"></div>
       </a>
     </li>
 
     <li class="bd-tw-action is-retweet">
-      <a class="bd-tw-action-link" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
+      <a class="bd-tw-action-link" href="https://x.com/intent/retweet?tweet_id={{ tweet.id }}">
         <div class="bd-tw-icon"></div>
         {% if tweet.retweets != 0 %}
           <span class="bd-tw-action-stat">
@@ -50,7 +50,7 @@
     </li>
 
     <li class="bd-tw-action is-heart">
-      <a class="bd-tw-action-link" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
+      <a class="bd-tw-action-link" href="https://x.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
         <div class="bd-tw-icon"></div>
         {% if tweet.hearts != 0 %}
           <span class="bd-tw-action-stat">

docs/_includes/docs/hero.html

@@ -13,7 +13,7 @@
     {% if include.prints %}
       <div class="bd-hero-prints">
         {% for print in include.prints %}
-          <a class="bd-hero-print icon-text">
+          <a class="bd-hero-print icon-text" href="{{ print.url }}" target="_blank">
             <span class="icon">
               <i class="{{ print.icon }}"></i>
             </span>

docs/_includes/docs/menu.html

@@ -63,3 +63,5 @@
     {% include docs/menu-list.html category_id="helpers" %}
   </div>
 </div>
+
+{% include docs/side-sponsr.html %}

docs/_includes/docs/side-sponsr.html

@@ -1,14 +1,14 @@
 <div class="bd-side-sponsrs">
-  <p class="bd-side-sponsor-label">Sponsors</p>
+  <p class="bd-side-sponsor-label">Sponsor</p>
 
-  <a class="bd-side-sponsor" href="https://password.link/" target="_blank">
+  <a class="bd-side-sponsor" href="https://www.route4me.com/" target="_blank">
     {%
       include docs/elements/responsive-image.html
-      path="amis/passwordlink"
+      path="amis/route4me"
       extension="png"
-      alt="Password.link"
-      width="332"
-      height="96"
+      alt="Route Planner and Route Optimizer"
+      width="224"
+      height="57"
     %}
   </a>
 </div>

docs/_includes/global/nav-item.html

@@ -1,5 +1,5 @@
-{% assign link = site.data.links.by_id[include.link_id] %}
-{% assign cleanpath = link.path | remove: '/' %}
+{% assign link = site.data.links.by_id[include.link_id] %} {% assign cleanpath =
+link.path | remove: '/' %}
 
 <a
   class="
@@ -17,28 +17,30 @@
     {% endif %}
   "
   title="{{ link.subtitle | strip_html }}"
-  {% if link.href %}
-    href="{{ link.href }}"
-    target="_blank"
-  {% else %}
-    href="{{ site.url }}{{ link.path }}"
-  {% endif %}
+  {%
+  if
+  link.href
+  %}
+  href="{{ link.href }}"
+  target="_blank"
+  {%
+  else
+  %}
+  href="{{ site.url }}{{ link.path }}"
+  {%
+  endif
+  %}
 >
   <span class="icon">
     <i class="{{ link.icon }}"></i>
   </span>
 
   {% unless link.icon_only %}
-    <span class="bd-nav-item-name">
-      {% if link.long_name %}
-        <span class="is-hidden-fullhd">{{ link.name }}</span>
-        <span class="is-hidden is-block-fullhd">{{ link.long_name }}</span>
-      {% else %}
-        {{ link.name }}
-      {% endif %}
-      {% if include.link_id == "shop" %}
-        <span class="tag is-success ml-1">New!</span>
-      {% endif %}
-    </span>
+  <span class="bd-nav-item-name">
+    {% if link.long_name %}
+    <span class="is-hidden-fullhd">{{ link.name }}</span>
+    <span class="is-hidden is-block-fullhd">{{ link.long_name }}</span>
+    {% else %} {{ link.name }} {% endif %}
+  </span>
   {% endunless %}
 </a>

docs/_includes/global/support.html

@@ -23,6 +23,14 @@
       </div>
     </div>
 
+    <div class="bd-footer-donation column">
+      <p class="bd-footer-donation-title"><strong>Browser testing</strong> via</p>
+      <div class="bd-footer-donation-action">
+        <a class="bd-hidden-dark" href="https://www.lambdatest.com/" target="_blank"><img src="https://www.lambdatest.com/support/img/logo.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a>
+        <a class="bd-hidden-light" href="https://www.lambdatest.com/" target="_blank"><img src="https://www.lambdatest.com/resources/images/logo-white.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a>
+      </div>
+    </div>
+
     {% if site.data.sponsors.footer.size > 0 %}
       <div class="bd-footer-donation column">
         <p class="bd-footer-donation-title">Visit our <strong>Sponsors</strong></p>

docs/_includes/library/layout/footer.html

@@ -2,8 +2,8 @@
   <div class="content has-text-centered">
     <p>
       <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
-      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed
-      <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
+      <a href="https://opensource.org/license/mit">MIT</a>. The website content is licensed
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
     </p>
   </div>
 </footer>

docs/_includes/website/banner.html

@@ -0,0 +1,13 @@
+<a href="https://cssmasterclass.io/" target="_blank" class="launch-code is-animated">
+  <h3><img
+        src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
+        height="40"
+        width="300"
+    />
+  </h3>
+
+  <small>
+    Learn CSS with 🎓 online interactive courses,📺 educational videos, and
+    🧑🏻‍💻project-building tutorials.
+  </small>
+</a>

docs/_includes/website/carbon.html

@@ -1,5 +1,8 @@
 <div id="carboncontainer" class="bd-carbon">
   <div id="carbon">
-    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js"></script>
+    <a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; aspect-ratio: 40 / 26; max-width: 400px; max-height: 260px;">
+      <img src="{{ site.url }}/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
+    </a>
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js" onerror="this.previousElementSibling.style.display = 'flex'"></script>
   </div>
 </div>

docs/_includes/website/masterclass.html

@@ -0,0 +1,43 @@
+<div id="masterclass" class="masterclass">
+  <div id="masterclass-background" class="masterclass-background"></div>
+
+  <a class="masterclass-body" href="https://cssmasterclass.io/" target="_blank">
+    <div class="masterclass-content is-hidden-desktop">
+      <img
+        src="{{site.url}}/assets/images/masterclass/logo-mobile.png"
+        height="68"
+        width="240"
+      />
+      <img
+        src="{{site.url}}/assets/images/masterclass/text-mobile.png"
+        height="99"
+        width="228"
+      />
+      <div class="shine">
+        <span>Get started for Free</span>
+      </div>
+    </div>
+
+    <div class="masterclass-content is-hidden-touch">
+      <img
+        src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
+        height="50"
+        width="378"
+      />
+      <img
+        src="{{site.url}}/assets/images/masterclass/text-desktop.png"
+        height="58"
+        width="571"
+      />
+      <div class="shine">
+        <span>Get started for Free</span>
+      </div>
+    </div>
+  </a>
+
+  <button
+    id="masterclass-close"
+    class="modal-close is-large"
+    aria-label="close"
+  ></button>
+</div>

docs/_layouts/default.html

@@ -4,6 +4,8 @@
     {% include global/head.html %}
   </head>
   <body>
+    {% include website/banner.html %}
+
     {{ content }}
 
     {% if page.modals %}
@@ -30,5 +32,6 @@
     </script>
     <script src="{{ site.url }}/assets/javascript/main.js"></script>
     {% include global/customizer.html %}
+    {% include website/masterclass.html %}
   </body>
 </html>

docs/_layouts/docs.html

@@ -39,10 +39,9 @@ route: documentation
         {{ content }}
       {% endif %}
 
-      {% if page.meta.variables %}
-        {% include docs/elements/anchor.html name="Sass and CSS variables" %}
-        {% include docs/components/variables.html %}
-      {% endif %}
+        {% if page.meta.variables %}
+          {% include docs/components/variables.html %}
+        {% endif %}
     </div>
 
     {% include docs/components/pagination.html %}

docs/_sass/docs/examples.scss

@@ -28,7 +28,7 @@
 }
 
 .bulma-overlay-mixin-parent {
-  background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320);
+  background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
   background-size: cover;
   border-radius: 0.5em;
   position: relative;
@@ -73,7 +73,7 @@
 }
 
 .bulma-center-mixin-parent {
-  background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
+  background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
   background-size: cover;
   border-radius: 0.5em;
   position: relative;

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"),
@@ -99,6 +93,10 @@
 }
 
 .bd-carbon {
+  aspect-ratio: 40 / 26;
+  max-height: 280px !important;
+  max-width: 400px !important;
+
   &,
   & > div {
     align-items: center;
@@ -107,7 +105,6 @@
   }
 
   > div {
-    height: 280px !important;
-    width: 400px !important;
+    aspect-ratio: 40 / 26;
   }
 }

docs/_sass/docs/menu.scss

@@ -171,10 +171,19 @@
   line-height: 1.25rem;
 }
 
+.bd-side-sponsrs {
+  margin: 0 1rem;
+}
+
+.bd-side-sponsor-label {
+  font-weight: 500;
+  font-size: 0.875em;
+  margin-bottom: 0.5em;
+  opacity: 0.5;
+}
+
 .bd-side-sponsor {
   display: flex;
-  margin: 0.5rem;
-  margin-top: 0;
 
   img {
     border-radius: 0.75rem;

docs/_sass/home/bubble.scss

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

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%);
       }
     }
   }

docs/assets/javascript/main.js

@@ -108,10 +108,18 @@ document.addEventListener("DOMContentLoaded", () => {
   // MODALS
   // Functions to open and close a modal
   function openModal($el) {
+    if (!$el) {
+      return;
+    }
+
     $el.classList.add("is-active");
   }
 
   function closeModal($el) {
+    if (!$el) {
+      return;
+    }
+
     $el.classList.remove("is-active");
   }
 
@@ -416,4 +424,38 @@ document.addEventListener("DOMContentLoaded", () => {
 
     new window.ClipboardJS(".bd-clipboard");
   }, 100);
+
+  // MASTERCLASS
+  const MASTERCLASS_KEY = "cssmasterclass";
+  const $masterclass = document.getElementById("masterclass");
+  const $masterclassBackground = document.getElementById(
+    "masterclass-background",
+  );
+  const $masterclassClose = document.getElementById("masterclass-close");
+  const masterclassStorage = window.localStorage.getItem(MASTERCLASS_KEY);
+
+  if (masterclassStorage !== "seen") {
+    window.setTimeout(() => {
+      openMasterclass();
+    }, 3000);
+  }
+
+  const openMasterclass = () => {
+    $masterclass.classList.add("is-open");
+  };
+
+  const closeMasterclass = () => {
+    window.localStorage.setItem(MASTERCLASS_KEY, "seen");
+    $masterclass.classList.remove("is-open");
+  };
+
+  $masterclassBackground.addEventListener("click", (event) => {
+    event.preventDefault();
+    closeMasterclass();
+  });
+
+  $masterclassClose.addEventListener("click", (event) => {
+    event.preventDefault();
+    closeMasterclass();
+  });
 });

docs/cyp/layout/footer.html

@@ -7,8 +7,8 @@ title: Layout/Footer
   <div class="content has-text-centered">
     <p>
       <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
-      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
-      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
+      <a href="https://opensource.org/license/mit">MIT</a>. The website content
+      is licensed <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
     </p>
   </div>
 </footer>

docs/documentation.html

@@ -6,8 +6,10 @@ subtitle: Everything you need to create a website with Bulma.
 hero_prints:
 - label: "Creative Commons"
   icon: "fab fa-creative-commons"
+  url: https://creativecommons.org/licenses/by-nc-sa/4.0/
 - label: "Contribute on GitHub"
   icon: "fas fa-code-pull-request"
+  url: https://github.com/jgthms/bulma
 ---
 {% assign category_ids = site.data.links.category_ids %}
 

docs/documentation/columns/gap.html

@@ -35,6 +35,14 @@ breadcrumb:
   <div class="column">No gap</div>
 </div>
 {% endcapture %}
+{% capture columns_variable_gap %}
+<div class="columns is-8">
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+  <div class="column">Column</div>
+</div>
+{% endcapture %}
 {% capture columns_gapless_multiline %}
 <div class="columns is-gapless is-multiline is-mobile">
   <div class="column is-one-quarter">is-one-quarter</div>
@@ -49,9 +57,7 @@ breadcrumb:
 </div>
 {% endcapture %}
 {% capture columns_variable_responsive_gaps %}
-<div
-  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
->
+<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
   <div class="column">Column</div>
   <div class="column">Column</div>
   <div class="column">Column</div>
@@ -155,28 +161,20 @@ breadcrumb:
     <li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li>
     <li><code>is-8</code> is the maximum gap of <code>2rem</code></li>
   </ul>
-  <p>Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.</p>
+</div>
+
+<div class="bd-highlight-full">
+  {% highlight html -%}
+  {{- columns_variable_gap -}}
+  {%- endhighlight %}
 </div>
 
 {% include docs/content/klmn.html %}
 
-<div class="message is-warning">
-  <div class="message-body">
-    <p>
-      This feature is only available in browsers that support
-      <a
-        href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables"
-        >CSS Variables</a
-      >.
-    </p>
-  </div>
-</div>
-
 {% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
 {% if vernum >= 72 %}
   {%
-    include docs/elements/anchor.html name="Breakpoint
-    based column gaps"
+    include docs/elements/anchor.html name="Breakpoint based column gaps"
   %}
 
   <div class="content">
@@ -184,19 +182,17 @@ breadcrumb:
 
     <p>
       For example, here's how it looks with the following modifiers:
-      <code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
+      <code>is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
     </p>
   </div>
 
   <div class="bd-highlight-full">
-    {% highlight html -%}
+    {%- highlight html -%}
     {{- columns_variable_responsive_gaps -}}
-    {%- endhighlight %}
+    {%- endhighlight -%}
   </div>
 
-  <div
-    class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
-  >
+  <div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
     <div class="column">
       <p class="bd-notification is-primary">Column</p>
     </div>

docs/documentation/components/modal.html

@@ -282,7 +282,7 @@ document.addEventListener('DOMContentLoaded', () => {
 <div class="content">
   <h4>3. Add the JS for the trigger</h4>
 
-  <p>In a <code>script</code> element (or in a seperate <code>.js</code> file), add the following JS code:</p>
+  <p>In a <code>script</code> element (or in a separate <code>.js</code> file), add the following JS code:</p>
 </div>
 
 {% highlight javascript -%}

docs/documentation/components/tabs.html

@@ -482,9 +482,8 @@ name="Combining" %}
 </div>
 
 {% include docs/elements/snippet.html content=tabs_centered_boxed_example
-horizontal=true more=true %} {% include docs/elements/snippet.html
-content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
-docs/elements/snippet.html content=tabs_centered_boxed_medium_example
-horizontal=true more=true %} {% include docs/elements/snippet.html
-content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {%
-include docs/components/variables.html type='component' %}
+horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_centered_boxed_medium_example
+horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}

docs/documentation/customize/with-modular-sass.html

@@ -82,6 +82,6 @@ If you wanted to import a component **and** customize it, do the same when impor
 
 {% highlight sass %}
 @use "bulma/sass/elements/image" with (
-  $dimensions: 20 40 80 160;
+  $dimensions: 20 40 80 160,
 );
 {% endhighlight %}

docs/documentation/elements/delete.html

@@ -78,3 +78,5 @@ meta:
 </div>
 
 {% include docs/elements/snippet.html content=cross_elements_example %}
+
+{% include docs/components/variables.html %}

docs/documentation/elements/image.html

@@ -21,6 +21,7 @@ meta:
   colors: false
   sizes: false
   variables: true
+  hide_css_vars: true
 ---
 {% capture image %}
 <figure class="image is-128x128">

docs/documentation/elements/table.html

@@ -862,7 +862,3 @@ meta:
 {{- scrollable_table -}}
 {%- endhighlight %}
 {{ simple_scrollable_table_example }}
-{%
-  include docs/components/variables.html
-  type='element'
-%}

docs/documentation/features/dark-mode.md

@@ -259,70 +259,70 @@ For Dark Mode, Bulma will keep the same hue and saturation of the main scheme co
     <tr>
       <th><code>--bulma-scheme-main-l</code></th>
       <td><code>100%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
       <td><code>11%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-scheme-main-bis-l</code></th>
       <td><code>98%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
       <td><code>13%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-scheme-main-ter-l</code></th>
       <td><code>98%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
       <td><code>15%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-background-l</code></th>
       <td><code>96%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
       <td><code>14%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-border-weak-l</code></th>
       <td><code>93%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
       <td><code>21%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-border-l</code></th>
       <td><code>86%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
       <td><code>24%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-weak-l</code></th>
       <td><code>48%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
       <td><code>53%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-l</code></th>
       <td><code>29%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
       <td><code>71%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-strong-l</code></th>
       <td><code>21%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
       <td><code>93%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-title-l</code></th>
       <td><code>14%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
       <td><code>100%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
     </tr>