Init v1

2026-03-21 12:44:30 -07:00 · 2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
--- a/docs/_sass/global/feature.scss
+++ b/docs/_sass/global/feature.scss
@@ -0,0 +1,131 @@
+@use "sass/utilities/css-variables" as cv;
+
+$gap: 2rem;
+$width: 20rem;
+
+.bd-features {
+  --gap: #{$gap};
+  --width: #{$width};
+
+  align-items: center;
+  background-image: linear-gradient(
+    0deg,
+    hsla(
+        var(--bulma-scheme-h),
+        var(--bulma-scheme-s),
+        var(--bulma-scheme-main-l),
+        1
+      )
+      0%,
+    hsla(
+        var(--bulma-scheme-h),
+        var(--bulma-scheme-s),
+        var(--bulma-scheme-main-l),
+        0
+      )
+      100%
+  );
+  padding: var(--gap);
+  position: relative;
+  container-type: inline-size;
+  container-name: home-features;
+}
+
+.bd-features-grid {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: 1fr;
+  justify-content: stretch;
+  justify-items: stretch;
+}
+
+@container home-features (min-width: #{(2 * $width + 1 * $gap)}) {
+  .bd-features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@container home-features (min-width: #{(4 * $width + 3 * $gap)}) {
+  .bd-features-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: #{(4 * $width + 10 * $gap)}) {
+  .bd-features {
+    padding: calc(2 * var(--gap));
+  }
+}
+
+.bd-feature {
+  --h: 348;
+  --s: 86%;
+  --l: 61%;
+  --a: 0.1;
+  --bg: var(--grad-red);
+  --bd-width: 0.125em;
+  --radius: 0.75em;
+  --p: 1em;
+  --icon: #{cv.getVar("danger")};
+  background: var(--bg);
+  border-radius: calc(var(--bd-width) + var(--radius));
+  box-shadow:
+    0px 0.5em 1em 0px hsla(var(--h), var(--s), var(--l), var(--a)),
+    0px 1em 2em 0px hsla(var(--h), var(--s), var(--l), var(--a));
+  padding: var(--bd-width);
+  transition-duration: cv.getVar("duration");
+  transition-property: box-shadow, transform;
+
+  &:hover {
+    --a: 0.05;
+    box-shadow:
+      0px 1em 2em 0px hsla(var(--h), var(--s), var(--l), var(--a)),
+      0px 2em 4em 0px hsla(var(--h), var(--s), var(--l), var(--a));
+    transform: translateY(-1em);
+  }
+
+  &.is-modern {
+    --h: 220;
+    --bg: var(--grad-blue);
+    --icon: #{cv.getVar("info-50")};
+  }
+
+  &.is-easy {
+    --h: 160;
+    --bg: var(--grad-green);
+    --icon: #{cv.getVar("success")};
+  }
+
+  &.is-free {
+    --h: 348;
+    --s: 6%;
+    --bg: var(--grad-grey);
+    --icon: #{cv.getVar("text")};
+  }
+}
+
+.bd-feature-body {
+  align-items: center;
+  background-color: cv.getVar("scheme-main");
+  border-radius: var(--radius);
+  display: grid;
+  column-gap: var(--p);
+  grid-template-columns: auto 1fr;
+  padding: var(--p) calc(var(--p) * 1.25);
+
+  .icon {
+    color: var(--icon);
+    grid-row: 1 / span 2;
+  }
+}
+
+.bd-feature-title {
+  color: cv.getVar("text-strong");
+  font-size: 1.25em;
+  font-weight: cv.getVar("weight-semibold");
+}
+
+.bd-feature-subtitle {
+  color: cv.getVar("text-weak");
+  white-space: nowrap;
+}