@usableapp/cardds 0.6.2 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/css/step.css +2 -6
- package/dist/cardds.css +2 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
> For: a project that consumes `@usableapp/cardds` and its AI — what changed between versions, written as before → after, so a screen can be brought up to date without reading the source. Newest first. A consumer never edits cardds; if something here leaves you without a way to do what you did before, report the gap.
|
|
4
4
|
|
|
5
|
+
## 0.6.3 — 2026-09-23
|
|
6
|
+
|
|
7
|
+
- **The picture is not shrunk** (Lh 2026-09-23): the 40% cap from 0.6.2 and its knob `--step-media-share` are gone. The sticky picture is `--base-content-media-h` tall, always. For 230px: `:root { --base-content-media-h: 14.375rem; }`.
|
|
8
|
+
|
|
5
9
|
## 0.6.2 — 2026-09-23
|
|
6
10
|
|
|
7
11
|
- **The picture stays put, only the words scroll** (Lh 2026-09-23): in a `Step`, a `BaseContent` whose FIRST child is a picture (`img` / `Placeholder`) keeps it sticky at the top of the reading block, and the heading and words scroll under it. The picture is capped at 40% of the step's height (`min(--base-content-media-h, --step-media-share)`, new knob `--step-media-share`, default `40cqh`), so on a short phone or at a large text size the picture gives way, never the words. Nothing to change in an app.
|
package/css/step.css
CHANGED
|
@@ -104,16 +104,12 @@
|
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
/* a picture that opens the words stays put, only the words scroll under it (Lh 2026-09-23, timebank's walk at large text:
|
|
107
|
-
the picture scrolled away with the words). Sticky at the top of the reading block's scroller
|
|
108
|
-
|
|
109
|
-
the picture gives way on a short phone or at a big text size, never the words. */
|
|
107
|
+
the picture scrolled away with the words). Sticky at the top of the reading block's scroller; its height is
|
|
108
|
+
--base-content-media-h as everywhere, never shrunk (Lh 2026-09-23: a fixed height, no scaling). */
|
|
110
109
|
.step > .base-content > :is(img, .ph):first-child,
|
|
111
110
|
.step > .pages > .base-content > :is(img, .ph):first-child {
|
|
112
111
|
position: sticky;
|
|
113
112
|
top: 0;
|
|
114
113
|
z-index: 1;
|
|
115
114
|
background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
|
|
116
|
-
max-height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh));
|
|
117
115
|
}
|
|
118
|
-
.step > .base-content > .ph:first-child,
|
|
119
|
-
.step > .pages > .base-content > .ph:first-child { height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh)); }
|
package/dist/cardds.css
CHANGED
|
@@ -1564,19 +1564,15 @@ button { font: inherit; cursor: pointer; }
|
|
|
1564
1564
|
}
|
|
1565
1565
|
|
|
1566
1566
|
/* a picture that opens the words stays put, only the words scroll under it (Lh 2026-09-23, timebank's walk at large text:
|
|
1567
|
-
the picture scrolled away with the words). Sticky at the top of the reading block's scroller
|
|
1568
|
-
|
|
1569
|
-
the picture gives way on a short phone or at a big text size, never the words. */
|
|
1567
|
+
the picture scrolled away with the words). Sticky at the top of the reading block's scroller; its height is
|
|
1568
|
+
--base-content-media-h as everywhere, never shrunk (Lh 2026-09-23: a fixed height, no scaling). */
|
|
1570
1569
|
.step > .base-content > :is(img, .ph):first-child,
|
|
1571
1570
|
.step > .pages > .base-content > :is(img, .ph):first-child {
|
|
1572
1571
|
position: sticky;
|
|
1573
1572
|
top: 0;
|
|
1574
1573
|
z-index: 1;
|
|
1575
1574
|
background-color: var(--surface); /* the words pass UNDER it, never through a transparent picture */
|
|
1576
|
-
max-height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh));
|
|
1577
1575
|
}
|
|
1578
|
-
.step > .base-content > .ph:first-child,
|
|
1579
|
-
.step > .pages > .base-content > .ph:first-child { height: min(var(--base-content-media-h, 14rem), var(--step-media-share, 40cqh)); }
|
|
1580
1576
|
|
|
1581
1577
|
/* ---- css/forms.css — outlined fields, add-row ---- */
|
|
1582
1578
|
/* ============================================================
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usableapp/cardds",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "card-first mobile design system, React-first: the components in src/ are thin wrappers over the CSS contract (css/*.css stays the only truth); gallery/ shows every story live (npm run dev), tests/ measures the geometry.",
|