Adjust Image rendering in header

there are now layers in the card header so that the image does not overlap any readable text
2026-08-03 17:15:03 +02:00
parent e7ecbcabc0
commit 96bcc975a7
3 changed files with 65 additions and 6 deletions
@@ -73,6 +73,26 @@ Two properties of the card header are less obvious than they look:
 Only the 10th-edition and 11th-edition renderers show lore. Leave the
 9th-edition renderer in `src/9th/` alone. It lays out its header differently.

+## The header has five layers
+
+The card header stacks the coloured accent bar (1), the model image (2), the
+name and the stat line (3) and the two lore elements (4, 5). The order comes
+from the official cards, where a wide image passes *behind* the text. Every
+layer therefore carries an explicit `z-index`, and the header sets
+`isolation: isolate` so those five numbers never meet the rest of the card. A
+new absolutely positioned element in the header needs a number from this scale;
+without one it lands under the image.
+
+The name and the stat line are wide, mostly empty boxes, and they now lie over
+the image. `pointer-events: none` on the box with `auto` on the text inside
+keeps the drag and the wheel that place the image (`ImgEditor`) reaching it. A
+new element on layer 3 needs the same treatment, or it takes the pointer away
+from the image behind it.
+
+The image box also carries a `mask-image` (`imageFade` in
+[`src/10th/Roster.jsx`](src/10th/Roster.jsx)). A picture wider than its box
+would otherwise end at a hard vertical edge in the middle of the stat line.
+
 ## Tests

 The transforms began as three standalone Python scripts