Add PageFrame, PrimaryButton, and shared layout for non-title pages

- PageFrame: parchment-background frame with title, diamond-rule divider,
  scrollable content area, and optional bottom-pinned footer slot
- PrimaryButton: shared full-width button (light blue, drop shadow, pressed
  state via translateY + shadow reduction) — used by TitleScreen and PlayerSetup
- Global button base in index.css ensures touch-friendly sizing everywhere
- TitleScreen consolidated to use PrimaryButton instead of its own button style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-26 20:28:49 -05:00
parent 3c9c101829
commit b3e7df9ba8
10 changed files with 121 additions and 24 deletions
+17
View File
@@ -0,0 +1,17 @@
.button {
width: 100%;
padding: 1rem;
background: #a8d5e8;
border: none;
border-radius: 1rem;
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
transition: transform 80ms ease, box-shadow 80ms ease;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}