refactor: clarify mobile hero geometry

This commit is contained in:
Keith Solomon
2026-06-27 18:06:34 -05:00
parent a360b8192a
commit 81785c4aec
2 changed files with 23 additions and 9 deletions
+10 -1
View File
@@ -21,16 +21,25 @@ test("mobile header preserves its layout and uses the designed hamburger", async
await page.goto(homepage);
const header = await getBox(page.locator(".site-header"));
const toggle = page.locator(".nav-main__toggle");
const logo = await getBox(page.locator(".site-header__logo"));
const toggle = page.locator(".nav-main__toggle").first();
const toggleBox = await getBox(toggle);
const hamburgerIcon = toggle.locator(".nav-toggle-hamburger svg");
const closeIcon = toggle.locator(".nav-toggle-x svg");
expectNear(header.height, 70, 2);
expectNear(logo.x, 16, 2);
expectNear(logo.width, 116, 2);
expectNear(logo.height, 36, 2);
expectNear(toggleBox.width, 72, 2);
expectNear(toggleBox.height, 45, 2);
await expect(toggle).toHaveCSS(
"background-color",
"oklch(0.6353 0.1751 29.61)",
);
await expect(toggle).toHaveCSS("border-radius", "22.4px 5.6px");
await expect(hamburgerIcon).toHaveCSS("fill", "oklch(1 0 0)");
await expect(closeIcon).toHaveCSS("stroke", "oklch(1 0 0)");
});
test("mobile hero matches the 402px reference composition", async ({