Add v1 banner

docs/_includes/global/footer.html

@@ -1,5 +1,79 @@
-{% include footer/support.html %}
+{% include footer/support.html %} {% include global/native.html %} {% include
+footer/main.html %}
 
-{% include global/native.html %}
+<div class="v1-modal modal">
+  <div class="bd-book-modal-background"></div>
+  <h3 class="v1-modal-title title">
+    <span class="v1-modal-emoji">🎉</span>
+    Bulma v1 is coming soon!
+  </h3>
 
-{% include footer/main.html %}
+  <ul class="v1-tags">
+    <li class="v1-tag" style="background-color: #2a2e37; color: #fff">
+      <span class="icon" style="color: #8158f5">
+        <i class="fas fa-moon"></i>
+      </span>
+      Dark Mode
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-danger">
+        <i class="fas fa-th-large"></i>
+      </span>
+      Smart Grid
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-link">
+        <i class="fab fa-css3"></i>
+      </span>
+      CSS Variables
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-amazon">
+        <i class="fas fa-tint"></i>
+      </span>
+      Auto-Color
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-success">
+        <i class="fas fa-paint-brush"></i>
+      </span>
+      Themes
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-rss">
+        <i class="fas fa-spinner"></i>
+      </span>
+      Skeleton Loaders
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-info">
+        <i class="fas fa-palette"></i>
+      </span>
+      Auto-Palettes
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-sass">
+        <i class="fas fa-bullseye"></i>
+      </span>
+      Dart Sass Support
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-primary">
+        <i class="fas fa-info-circle"></i>
+      </span>
+      Improved Accessibility
+    </li>
+    <li class="v1-tag">
+      <span class="icon has-text-fortyfour">
+        <i class="fas fa-swatchbook"></i>
+      </span>
+      HSLA
+    </li>
+    <li class="v1-tag is-last">and much more…</li>
+  </ul>
+
+  <button
+    class="bd-book-modal-close modal-close is-large"
+    aria-label="close"
+  ></button>
+</div>

docs/_includes/global/v1.html

@@ -0,0 +1,73 @@
+<div class="v1-banner">
+  <h3 class="v1-title">
+    <span class="v1-emoji">🎉</span>
+    Bulma v1 is coming soon!
+  </h3>
+
+  <div class="v1-features">
+    <ul class="v1-tags">
+      <li class="v1-tag" style="background-color: #2a2e37; color: #fff">
+        <span class="icon" style="color: #8158f5">
+          <i class="fas fa-moon"></i>
+        </span>
+        Dark Mode
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-danger">
+          <i class="fas fa-th-large"></i>
+        </span>
+        Smart Grid
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-link">
+          <i class="fab fa-css3"></i>
+        </span>
+        CSS Variables
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-amazon">
+          <i class="fas fa-tint"></i>
+        </span>
+        Auto-Color
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-success">
+          <i class="fas fa-paint-brush"></i>
+        </span>
+        Themes
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-rss">
+          <i class="fas fa-spinner"></i>
+        </span>
+        Skeleton Loaders
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-info">
+          <i class="fas fa-palette"></i>
+        </span>
+        Auto-Palettes
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-sass">
+          <i class="fas fa-bullseye"></i>
+        </span>
+        Dart Sass Support
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-primary">
+          <i class="fas fa-info-circle"></i>
+        </span>
+        Improved Accessibility
+      </li>
+      <li class="v1-tag">
+        <span class="icon has-text-fortyfour">
+          <i class="fas fa-swatchbook"></i>
+        </span>
+        HSLA
+      </li>
+    </ul>
+  </div>
+
+  <div class="v1-more">and much more…</div>
+</div>

docs/_layouts/default.html

@@ -7,9 +7,7 @@
   <body
     class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}"
   >
-    {% include global/deprecated.html %}
+    {% include global/v1.html %} {% include global/deprecated.html %} {{ content
-    {{ content }}
+    }} {% include global/footer.html %} {% include global/scripts.html %}
-    {% include global/footer.html %}
-    {% include global/scripts.html %}
   </body>
 </html>

docs/_sass/components/v1.scss

@@ -0,0 +1,96 @@
+.v1-banner {
+  display: flex;
+}
+
+.v1-modal {
+  font-family: "Inter", $family-sans-serif;
+  z-index: 100;
+}
+
+.v1-banner,
+.v1-modal {
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #040435 0deg,
+    #430677 60.00000178813934deg,
+    #b61bbd 97.50000357627869deg,
+    #fe5c65 149.9999964237213deg,
+    #ff896f 179.72567439079285deg,
+    #fc8433 209.51215267181396deg,
+    #fd8d4d 226.2606167793274deg,
+    #f45b10 244.58197116851807deg,
+    #ad267d 279.1821026802063deg,
+    #4b1acd 300.7368063926697deg,
+    #004e9c 319.7864770889282deg,
+    #003773 338.803768157959deg,
+    #040435 360deg
+  );
+}
+
+.v1-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.v1-emoji {
+  display: block;
+}
+
+.v1-title {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  font-weight: 800;
+  line-height: 112.5%;
+  text-align: center;
+  font-size: 1.25rem;
+  white-space: nowrap;
+}
+
+.v1-features {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 10%);
+  mask-image: linear-gradient(to left, transparent 0%, black 10%);
+}
+
+.v1-tags {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  gap: 1em;
+}
+
+.v1-tag {
+  background-color: white;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+  display: flex;
+  font-size: 1em;
+  font-weight: 500;
+  line-height: 1.25;
+  padding: 0.5em 0.75em 0.5em 0.5em;
+  align-items: center;
+  border-radius: 0.5em;
+  white-space: nowrap;
+}
+
+.v1-more {
+  background: none;
+  box-shadow: none;
+  color: white;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+@include tablet {
+  .v1-banner {
+    flex-wrap: nowrap;
+  }
+}

docs/_sass/global/newsletter.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 :root {
   --newsletter-strip-size: 16px;
   --newsletter-border-size: #{$block-spacing};
@@ -51,13 +53,13 @@
 
 .bd-newsletter-fields {
   display: grid;
-  grid-gap: $block-spacing / 2;
+  grid-gap: math.div($block-spacing, 2);
   grid-template-columns: minmax(20em, 1fr) auto;
 }
 
 .bd-newsletter-box {
   background-color: $scheme-main;
-  background-image: url('/images/hab/newsletter-strip.png');
+  background-image: url("/images/hab/newsletter-strip.png");
   background-repeat: repeat-x;
   background-size: 96px var(--newsletter-strip-size);
   border-radius: 1.5em;
@@ -90,11 +92,11 @@
 
     .icon {
       float: left;
-      margin-right: $block-spacing / 2;
+      margin-right: math.div($block-spacing, 2);
     }
 
     .subtitle {
-      margin: ($block-spacing / 2) 0 !important;
+      margin: (math.div($block-spacing, 2)) 0 !important;
     }
 
     form {
@@ -143,7 +145,7 @@
 
 @include widescreen {
   :root {
-    --newsletter-border-size: #{$bd-edge-width / 2};
+    --newsletter-border-size: #{math.div($bd-edge-width, 2)};
   }
 
   #newsletter {

docs/_sass/index/best.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $best-item-width: 520;
 $best-screenshot-width: 504;
 $best-count: 6;
@@ -5,7 +7,7 @@ $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: $best-total-width / $best-speed * 1s;
+$best-duration: math.div($best-total-width, $best-speed) * 1s;
 $best-padding: $block-spacing;
 $best-height: 386px;
 

docs/_sass/index/focus-animations.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @keyframes bdGrow {
   from {
     transform: scale(0);
@@ -49,7 +51,7 @@ $focus-delay: 0;
   transform-origin: center center;
 }
 
-$delay-subtitle: $delay / 2;
+$delay-subtitle: math.div($delay, 2);
 
 // Titles
 .bd-focus-item {

docs/_sass/index/heading.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .bd-heading {
   > .icon {
     font-size: $title-size;
@@ -40,11 +42,11 @@
 
     .icon {
       float: left;
-      margin-right: $block-spacing / 2;
+      margin-right: math.div($block-spacing, 2);
     }
 
     .subtitle {
-      margin: ($block-spacing / 2) 0 !important;
+      margin: (math.div($block-spacing, 2)) 0 !important;
     }
 
     form {

docs/_sass/index/sponsors.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $bd-sponsor-padding: $block-spacing;
 $bd-sponsor-width: 12rem;
 
@@ -31,7 +33,7 @@ $bd-sponsor-width: 12rem;
   @extend %center;
   @extend %link-before-background;
 
-  padding: $bd-sponsor-padding ($bd-sponsor-padding / 2);
+  padding: $bd-sponsor-padding (math.div($bd-sponsor-padding, 2));
 
   strong,
   img {

docs/bulma-docs.scss

@@ -223,6 +223,7 @@ $navbar-breakpoint: $tablet;
 @import "./_sass/components/survey";
 @import "./_sass/components/color";
 @import "./_sass/components/pill";
+@import "./_sass/components/v1";
 
 @import "./_sass/pages/index";
 @import "./_sass/pages/docs";

docs/package.json

@@ -13,16 +13,16 @@
     "cypress": "^13.6.0",
     "metalsmith": "^2.6.2",
     "metalsmith-filter": "^1.0.2",
-    "node-sass": "^9.0.0",
+    "sass": "^1.69.5",
-    "postcss-cli": "^10.1.0"
+    "postcss-cli": "^11.0.0"
   },
   "scripts": {
-    "bulma-sass": "node-sass --output-style expanded bulma.scss css/bulma.css",
+    "bulma-sass": "sass --style expanded bulma.scss css/bulma.css",
     "bulma-watch": "npm run bulma-sass -- --watch",
     "css-build": "npm run css-sass && npm run css-autoprefix && npm run css-cleancss",
     "css-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-docs.css css/bulma-docs.css",
     "css-cleancss": "cleancss -o css/bulma-docs.min.css css/bulma-docs.css",
-    "css-sass": "node-sass --output-style expanded bulma-docs.scss css/bulma-docs.css",
+    "css-sass": "sass --style expanded bulma-docs.scss css/bulma-docs.css",
     "css-watch": "npm run css-sass -- --watch",
     "cypress-open": "./node_modules/.bin/cypress open",
     "cypress-run": "./node_modules/.bin/cypress run",
@@ -31,7 +31,7 @@
     "js-watch": "npm run js-build -- --watch",
     "start": "npm run css-watch | npm run js-watch",
     "start-test": "npm run test-scss -- --watch",
-    "test-scss": "node-sass --output-style expanded bulma-test.scss css/bulma-test.css",
+    "test-scss": "sass --style expanded bulma-test.scss css/bulma-test.css",
     "test-watch": "npm run test-scss -- --watch"
   }
 }