barua-ui 0.11.0 → 0.12.1

package/css/components/marketing.css

@@ -60,9 +60,18 @@
   /* ---- Chapter: one idea, centred, with room around it --------------------- */
   .b-chapter {
     padding-block: var(--b-chapter-gap);
-    padding-inline: var(--b-space-6);
+    /* The page's margin, and now the only one: it is a sixth of a phone's width
+       at 390 and sixty pixels on a desktop, where before the chapter and the
+       container each took their own and the phone paid for both. */
+    padding-inline: clamp(var(--b-space-4), 4.5vw, var(--b-space-16));
     text-align: center;
   }
+  /* Padding stacks, and nobody notices on a desktop. A chapter pads, a
+     container inside it pads again, and a list row inside that pads a third
+     time: on a 390px phone that left 236px for the words, which is under thirty
+     characters a line. The chapter already holds the page's margins, so a
+     container inside one does not repeat them. */
+  .b-chapter > .b-container { padding-inline: 0; }
   .b-chapter--tight { padding-block: calc(var(--b-chapter-gap) * 0.55); }
   .b-chapter--start { text-align: start; }
   .b-chapter__eyebrow {
@@ -228,23 +237,34 @@
     width: max-content;
     animation: b-marquee var(--b-marquee-time, 40s) linear infinite;
   }
-  .b-marquee__group {
+  /* Named twice on purpose. A group almost always carries a row class as well
+     (.b-logo-wall is the usual one), and those are defined later in this layer,
+     so at equal specificity they were winning: the wall's justify-content
+     centred each group inside its floored width and the two dead ends met at
+     the seam as one wide hole, which is the bug the group was added to fix.
+     The three properties that make a marquee a marquee are not the row's to
+     decide. The rhythm still is: set --b-marquee-gap. */
+  .b-marquee .b-marquee__group {
+    --b-marquee-gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
     display: flex;
     flex: none;
+    flex-wrap: nowrap;
     align-items: center;
     justify-content: space-around;
-    gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
+    gap: var(--b-marquee-gap);
     min-width: 100cqi;
-    /* Half the gap on each end, so the seam between the two groups is spaced
-       exactly like the gaps inside one. */
-    padding-inline: clamp(var(--b-space-3), 2.5vw, var(--b-space-6));
+    /* space-around leaves half a share at each end, so a seam is already half
+       plus half. The gap is a separate, fixed minimum that only applies BETWEEN
+       items, so without this the seam came up exactly one gap short of every
+       other space in the belt. Half at each end restores it. */
+    padding-inline: calc(var(--b-marquee-gap) / 2);
   }
   .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
   @keyframes b-marquee { to { translate: -50% 0; } }
   @media (prefers-reduced-motion: reduce) {
     .b-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
     .b-marquee__track { animation: none; }
-    .b-marquee__group { min-width: 0; }
+    .b-marquee .b-marquee__group { min-width: 0; }
   }
 
   /* ---- Quote card: a number, a sentence, and who said it -------------------
@@ -329,6 +349,18 @@
     height: var(--b-space-12);
     color: color-mix(in srgb, var(--b-color-accent) 55%, var(--b-text-tertiary));
   }
+  /* Stacked one per phone screen, a 16:9 plate is nearly two hundred pixels of
+     nothing but a glyph, three times over. It becomes a banner instead: the
+     type badge still reads, the card still has a face, and the section stops
+     costing half a screen per card. */
+  @media (max-width: 40rem) {
+    .b-resource-card__poster { aspect-ratio: 4 / 1; }
+    .b-resource-card__poster > svg,
+    .b-resource-card__poster > :not(img):not(.b-resource-card__type) svg {
+      width: var(--b-space-8);
+      height: var(--b-space-8);
+    }
+  }
   .b-resource-card__type {
     position: absolute;
     inset-block-start: var(--b-space-3);
@@ -422,6 +454,10 @@
      middle of a tall column and stops looking like the title of what is next
      to it. --top puts both columns on the same line. */
   .b-feature-row--top { align-items: start; }
+  /* Same argument one level down: a list that IS a column of the row has the
+     row's margins already, and indenting every row inside it pushes the text
+     off the page's grid for no gain. */
+  .b-feature-row > .b-list--plain > .b-list-item { padding-inline: 0; }
   .b-feature-row__title {
     font-size: clamp(1.5rem, 3vw, 2.25rem);
     font-weight: var(--b-weight-semibold);

package/css/utilities.css

@@ -108,10 +108,27 @@
     gap: var(--b-gap, var(--b-space-4));
     grid-template-columns: repeat(var(--b-cols, 12), minmax(0, 1fr));
   }
-  .b-grid--2  { --b-cols: 2; }
-  .b-grid--3  { --b-cols: 3; }
-  .b-grid--4  { --b-cols: 4; }
-  .b-grid--6  { --b-cols: 6; }
+  /* N equal cards side by side is a desktop shape, and these modifiers held N
+     at every width: three pricing cards on a 390px phone came out 110px wide
+     with one word per line, and every page in the system that used them looked
+     like that on the device most people arrive on. They start at one column
+     and earn more. Anything that genuinely wants a fixed count at every size
+     sets --b-cols itself, which is what these are written in terms of. */
+  .b-grid--2,
+  .b-grid--3,
+  .b-grid--4,
+  .b-grid--6  { --b-cols: 1; }
+  @media (min-width: 36rem) {
+    .b-grid--2 { --b-cols: 2; }
+    .b-grid--3 { --b-cols: 2; }
+    .b-grid--4 { --b-cols: 2; }
+    .b-grid--6 { --b-cols: 3; }
+  }
+  @media (min-width: 62rem) {
+    .b-grid--3 { --b-cols: 3; }
+    .b-grid--4 { --b-cols: 4; }
+    .b-grid--6 { --b-cols: 6; }
+  }
   .b-grid--auto {
     grid-template-columns: repeat(auto-fill, minmax(var(--b-col-min, 16rem), 1fr));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barua-ui",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "Barua UI — Apple-DNA design system (glass materials, Barua blue) as React components over pure CSS.",
   "license": "MIT",
   "type": "module",