Bulma v9 website (#3249)

* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
2026-03-21 04:34:30 -07:00 · 2021-01-27 23:30:42 +00:00
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
--- a/docs/_sass/components/hero.scss
+++ b/docs/_sass/components/hero.scss
@@ -0,0 +1,157 @@
+.bd-hero {
+  --color: #{$text-light};
+  --color-strong: #{$text-strong};
+  --icon-dimensions: 1.125em;
+  --icon-spacing: 0.25em;
+
+  background-color: var(--background-color);
+
+  &.bd-is-basic {
+    .title {
+      font-weight: $weight-semibold;
+    }
+  }
+
+  &.bd-is-primary {
+    --background-color: var(--primary-light);
+    --color-strong: var(--primary-dark);
+    --color-icon: var(--primary);
+  }
+
+  &.bd-is-bleeding {
+    --background-color: var(--bleeding-light);
+    --color-strong: var(--bleeding-dark);
+    --color-icon: var(--bleeding);
+  }
+
+  &.bd-is-link {
+    --background-color: var(--link-light);
+    --color-strong: var(--link-dark);
+    --color-icon: var(--link);
+  }
+
+  &.bd-is-love {
+    --background-color: var(--love-light);
+    --color-strong: var(--love);
+    --color-icon: var(--love);
+  }
+
+  &.bd-is-expo {
+    --background-color: var(--expo-light);
+    --color-strong: var(--expo-dark);
+    --color-icon: var(--expo);
+  }
+
+  &.bd-is-sponsor {
+    --background-color: var(--sponsor-light);
+    --color-strong: var(--sponsor-dark);
+    --color: var(--sponsor);
+    --color-icon: var(--sponsor);
+  }
+
+  &.bd-is-videos {
+    --background-color: var(--videos-light);
+    --color-strong: var(--videos-dark);
+    --color: var(--videos);
+    --color-icon: var(--videos);
+  }
+
+  &.bd-is-extensions {
+    --background-color: var(--extensions-light);
+    --color-strong: var(--extensions-dark);
+    --color: var(--extensions);
+    --color-icon: var(--extensions);
+  }
+
+  &.bd-is-success {
+    --background-color: var(--success-light);
+    --color-strong: var(--success-dark);
+    --color: var(--success);
+    --color-icon: var(--success);
+  }
+
+  &.bd-is-bootstrap {
+    --background-color: var(--bootstrap-light);
+    --color-strong: var(--bootstrap-dark);
+    --color: var(--bootstrap);
+    --color-icon: var(--bootstrap);
+  }
+}
+
+$grid-gap: 1.5;
+
+.bd-hero-body {
+  align-items: center;
+  display: grid;
+  grid-gap: $grid-gap * 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(#{$carbon-width}, 1fr));
+}
+
+.bd-hero-heading {
+  .title {
+    color: var(--color-strong);
+    display: flex;
+    font-weight: $weight-normal;
+    position: relative;
+
+    a {
+      color: currentColor;
+      font-weight: $weight-semibold;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    code {
+      background: none;
+      padding: 0;
+    }
+
+    strong {
+      font-weight: $weight-semibold;
+    }
+
+    .icon {
+      color: var(--color-icon);
+      height: var(--icon-dimensions);
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin-right: var(--icon-spacing);
+      width: var(--icon-dimensions);
+    }
+  }
+
+  .subtitle {
+    color: var(--color);
+
+    strong {
+      color: currentColor;
+    }
+  }
+}
+
+$breakpoint: ($carbon-width * 2) + (16px * 3 * $grid-gap);
+
+@include from($breakpoint) {
+  .bd-hero-carbon {
+    justify-self: flex-end;
+  }
+}
+
+@include desktop {
+  .bd-hero {
+    --icon-spacing: 0.5em;
+
+    .hero-body {
+      padding: 6rem;
+    }
+  }
+
+  .bd-hero-heading {
+    .title .icon {
+      margin-left: calc(-1 * (var(--icon-dimensions) + var(--icon-spacing)));
+      margin-right: var(--icon-spacing);
+    }
+  }
+}