Fix README

README.md

@@ -134,7 +134,7 @@ Browse the [online documentation here.](https://bulma.io/documentation/start/ove
 | [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 <a 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></p>
+<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)
 

docs/_includes/website/banner.html

@@ -1,13 +1,15 @@
 <div class="launch-code is-animated">
-  <h3><a href="https://cssmasterclass.io/" target="_blank"><img src="{{site.url}}/assets/images/masterclass/logo-desktop.png" height="40" width="300"></a></h3>
+  <h3>
-
+    <a href="https://cssmasterclass.io/" target="_blank"
-  <div class="launch-shine">
+      ><img
-    <a class="shine" href="https://cssmasterclass.io/" target="_blank">
+        src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
-      <span>Get <strong>20% off</strong> with code <code>BULMA</code></span>
+        height="40"
-    </a>
+        width="300"
-  </div>
+    /></a>
+  </h3>
 
   <small>
-    Valid until the end of <strong>November 2024</strong>
+    Learn CSS with 🎓 online interactive courses,📺 educational videos, and
+    🧑🏻‍💻project-building tutorials.
   </small>
 </div>

docs/_includes/website/masterclass.html

@@ -3,23 +3,41 @@
 
   <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
-      <img src="{{site.url}}/assets/images/masterclass/text-mobile.png" height="99" width="228">
+        src="{{site.url}}/assets/images/masterclass/logo-mobile.png"
-      <img src="{{site.url}}/assets/images/masterclass/code-mobile.png" height="89" width="225">
+        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
-      <img src="{{site.url}}/assets/images/masterclass/text-desktop.png" height="58" width="571">
+        src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
-      <img src="{{site.url}}/assets/images/masterclass/code-desktop.png" height="89" width="375">
+        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>
+  <button
+    id="masterclass-close"
+    class="modal-close is-large"
+    aria-label="close"
+  ></button>
 </div>

docs/assets/css/website.css

@@ -7223,6 +7223,10 @@ a.box:active {
   --bulma-button-border-width: max(2px, 0.125em);
   --bulma-button-outer-shadow-alpha: 1;
 }
+.button.is-outlined[disabled], fieldset[disabled] .button.is-outlined {
+  background-color: transparent;
+  box-shadow: none;
+}
 .button.is-inverted {
   background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-color-l) + var(--bulma-button-background-l-delta)));
   color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-background-l));
@@ -37358,7 +37362,6 @@ div.shine {
   }
   .launch-code h3,
   .launch-code small {
-    flex-grow: 1;
     width: auto;
     text-align: center;
     max-width: none;
@@ -37368,8 +37371,6 @@ div.shine {
 @media screen and (min-width: 1024px) {
   .launch-code {
     animation-name: anim-slide-down;
-    position: sticky;
-    top: 0;
     z-index: 40;
   }
 }

docs/website.scss

@@ -719,7 +719,8 @@ $container-max-width: iv.$fullhd;
 .masterclass-body {
   background-color: #333;
   position: relative;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/assets/images/coding-background.jpg);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
+    url(/assets/images/coding-background.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -729,8 +730,8 @@ $container-max-width: iv.$fullhd;
   padding: 2rem;
   border-radius: 1rem;
   width: calc(100% - 2rem);
-  box-shadow: 0px 0px 64px 0px rgba(15, 219, 128, 0.20);
+  box-shadow: 0px 0px 64px 0px rgba(15, 219, 128, 0.2);
-  border: 2px solid rgba(15, 219, 128, 0.20);
+  border: 2px solid rgba(15, 219, 128, 0.2);
   overflow: hidden;
   max-width: 400px;
   animation-name: anim-slide-up;
@@ -779,7 +780,8 @@ div.shine {
 .launch-code {
   animation-name: anim-fade-in;
   animation-duration: 1s;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/assets/images/coding-background.jpg);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url(/assets/images/coding-background.jpg);
   background-size: cover;
   background-position: center;
   position: relative;
@@ -861,7 +863,6 @@ div.shine {
 
     h3,
     small {
-      flex-grow: 1;
       width: auto;
       text-align: center;
       max-width: none;
@@ -873,8 +874,6 @@ div.shine {
 @media screen and (min-width: 1024px) {
   .launch-code {
     animation-name: anim-slide-down;
-    position: sticky;
-    top: 0;
     z-index: 40;
   }
 }