Skip to content

Commit 60e25e6

Browse files
author
DavidQ
committed
Fix the main entry pages so they match the working tools/index.html baseline for full-width header behavior and shared body/theme colors.
Scope is limited to the four main entry pages and shared consistency fixes only. PR: BUILD_PR_STYLE_INDEX_HEADER_AND_BODY_CONSISTENCY_FIX
1 parent e3abab8 commit 60e25e6

8 files changed

Lines changed: 198 additions & 54 deletions

File tree

‎docs/dev/reports/index_consistency_fix_strategy.txt‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Entry page consistency fix strategy
2+
3+
Known good baseline:
4+
- tools/index.html
5+
6+
Known mismatches:
7+
- index.html
8+
- games/index.html
9+
- samples/index.html
10+
11+
Fix method:
12+
- compare shared CSS imports
13+
- compare body classes
14+
- compare page shell/header wrapper structure
15+
- normalize the three non-matching pages to the same working shared-theme path as tools/index.html
16+
17+
Keep scope surgical.

‎docs/operations/dev/codex_commands.md‎

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,27 @@ MODEL: GPT-5.4-codex
22
REASONING: high
33

44
COMMAND:
5-
Create BUILD_PR_STYLE_FINAL_SYSTEM_COMPLETION_AND_UAT_READY
5+
Create BUILD_PR_STYLE_INDEX_HEADER_AND_BODY_CONSISTENCY_FIX
66

77
Rules:
88
- output ONLY the final zip to:
9-
<project folder>/tmp/BUILD_PR_STYLE_FINAL_SYSTEM_COMPLETION_AND_UAT_READY.zip
9+
<project folder>/tmp/BUILD_PR_STYLE_INDEX_HEADER_AND_BODY_CONSISTENCY_FIX.zip
1010
- do NOT create staging folders in <project folder>/tmp
1111
- do NOT modify roadmap in the PR bundle
12-
- Codex updates roadmap during execution only
13-
- roadmap changes must be execution-backed
14-
- do NOT delete existing roadmap text
15-
- do NOT rewrite existing roadmap text
12+
- Codex updates roadmap during execution only if execution-backed status changes are earned
1613
- no embedded <style> blocks
1714
- no inline style=""
18-
- no JS-generated styling introduced
15+
- no JS-generated styling
16+
- keep scope limited to:
17+
/index.html
18+
/games/index.html
19+
/samples/index.html
20+
/tools/index.html only as needed for shared consistency
1921

2022
Required work:
21-
1. Audit remaining unfinished items in Tracks A, B, E, F, and G of MASTER_ROADMAP_STYLE.md.
22-
2. Implement the minimum execution-backed work needed to complete them.
23-
3. Complete Track F:
24-
- explicit spacing scale
25-
- margin/padding audit
26-
- typography standardization
27-
4. Complete Track G:
28-
- per-PR migration rule
29-
- validation rule
30-
- old-style retirement rule
31-
5. Close remaining partials in Tracks A, B, and E only if repo state supports them.
32-
6. Mark roadmap items complete only when execution-backed.
33-
7. Include a closeout report mapping each newly completed roadmap item to repo evidence.
34-
8. End with the repo UAT-ready.
35-
36-
UAT-ready means:
37-
- no inline style system violations
38-
- shared theme/tokens/spacing/typography are coherent
39-
- rules are documented and enforced by repo state
40-
- no false roadmap completions
23+
1. Treat /tools/index.html as the current good visual baseline.
24+
2. Compare it against /index.html, /games/index.html, and /samples/index.html.
25+
3. Normalize the three non-matching pages so the shared header stretches full width the same way.
26+
4. Normalize the three non-matching pages so the body/theme colors match the tools page.
27+
5. Prefer fixing shared CSS imports, body classes, and shared shell usage over ad hoc page-specific hacks.
28+
6. Keep the change narrow, testable, and visually consistent.

‎docs/operations/dev/commit_comment.txt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
Finish the remaining style-system foundation and rules work before UAT.
1+
Fix the main entry pages so they match the working tools/index.html baseline for full-width header behavior and shared body/theme colors.
22

3-
Complete Track F and Track G, then close the remaining partial roadmap items only where execution-backed by the repo state.
3+
Scope is limited to the four main entry pages and shared consistency fixes only.
44

5-
PR: BUILD_PR_STYLE_FINAL_SYSTEM_COMPLETION_AND_UAT_READY
5+
PR: BUILD_PR_STYLE_INDEX_HEADER_AND_BODY_CONSISTENCY_FIX

‎docs/pr/BUILD_PR_STYLE_INDEX_HEADER_AND_BODY_CONSISTENCY_FIX.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# BUILD_PR_STYLE_INDEX_HEADER_AND_BODY_CONSISTENCY_FIX
2+
3+
## Purpose
4+
Fix the inconsistency where `tools/index.html` correctly shows the full-width stretched header and correct page-body colors, but `index.html`, `games/index.html`, and `samples/index.html` do not.
5+
6+
## Single PR Purpose
7+
Make the four main entry pages render the shared header and body theme consistently.
8+
9+
## Confirmed Symptom
10+
- `tools/index.html` is the current good baseline.
11+
- `index.html`, `games/index.html`, and `samples/index.html` do not match it for:
12+
- full-width header stretch behavior
13+
- page body colors / shared theme rendering
14+
15+
## Required Fix Direction
16+
1. Treat `tools/index.html` as the visual baseline for:
17+
- shared header stretch behavior
18+
- shared body/theme color behavior
19+
2. Audit the differences between:
20+
- `/tools/index.html`
21+
- `/index.html`
22+
- `/games/index.html`
23+
- `/samples/index.html`
24+
3. Fix the three non-matching pages so they render consistently with the tools page.
25+
4. Keep the change narrow and limited to the main entry pages only.
26+
27+
## Required Rules
28+
- no embedded `<style>` blocks
29+
- no inline `style=""`
30+
- no JS-generated styling
31+
- do not redesign the pages
32+
- do not change header structure unless required for consistency
33+
- prefer fixing shared CSS imports, shared body classes, and shared shell/theme usage
34+
- preserve the working `tools/index.html` behavior unless a shared fix requires an equivalent adjustment
35+
36+
## Likely Root Causes To Check
37+
- missing or different shared CSS imports
38+
- different body class names
39+
- different wrapper/container structure around the shared header
40+
- header constrained by a centered container on the non-matching pages
41+
- missing theme/layout class on the body or page shell
42+
- inconsistent use of shared header mount point or shared page shell markup
43+
44+
## Acceptance
45+
- `/index.html` matches the full-width header behavior of `/tools/index.html`
46+
- `/games/index.html` matches the full-width header behavior of `/tools/index.html`
47+
- `/samples/index.html` matches the full-width header behavior of `/tools/index.html`
48+
- the three pages also match the body/theme color behavior of `/tools/index.html`
49+
- no regressions to the working tools page
50+
- change is visually testable

‎games/index.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,26 @@
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1212
<title>Games - HTML JavaScript Gaming</title>
1313
<link rel="stylesheet" href="../src/engine/theme/main.css" />
14+
<link rel="stylesheet" href="../src/engine/ui/hubCommon.css" />
1415
</head>
15-
<body>
16-
<main class="page-shell">
17-
<details class="is-collapsible" open>
18-
<summary class="is-collapsible__summary">Header and Intro</summary>
19-
<div class="is-collapsible__content">
20-
<div id="shared-theme-header"></div>
16+
<body class="hub-page-games">
17+
<details class="is-collapsible" open>
18+
<summary class="is-collapsible__summary">Header and Intro</summary>
19+
<div class="is-collapsible__content">
20+
<div id="shared-theme-header"></div>
21+
<main class="page-shell">
2122
<section class="page-intro">
2223
<h1>Games Hub</h1>
2324
<p>
2425
Launch playable game builds and follow the current progression from foundational arcade loops
2526
through advanced systems.
2627
</p>
2728
</section>
28-
</div>
29-
</details>
29+
</main>
30+
</div>
31+
</details>
32+
33+
<main class="page-shell">
3034

3135
<section class="content-section">
3236
<h2>Playable Now</h2>

‎index.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,26 @@
1212
<title>HTML JavaScript Gaming</title>
1313
<link rel="icon" href="favicon.ico" />
1414
<link rel="stylesheet" href="src/engine/theme/main.css" />
15+
<link rel="stylesheet" href="src/engine/ui/hubCommon.css" />
1516
</head>
16-
<body>
17-
<main class="page-shell">
18-
<details class="is-collapsible" open>
19-
<summary class="is-collapsible__summary">Header and Intro</summary>
20-
<div class="is-collapsible__content">
21-
<div id="shared-theme-header"></div>
17+
<body class="hub-page-home">
18+
<details class="is-collapsible" open>
19+
<summary class="is-collapsible__summary">Header and Intro</summary>
20+
<div class="is-collapsible__content">
21+
<div id="shared-theme-header"></div>
22+
<main class="page-shell">
2223
<section class="page-intro">
2324
<h1>HTML JavaScript Gaming</h1>
2425
<p>
2526
A home base for playable arcade builds, sample-driven engine patterns, and shared tooling.
2627
Use the hub links below to open games, samples, and tools.
2728
</p>
2829
</section>
29-
</div>
30-
</details>
30+
</main>
31+
</div>
32+
</details>
33+
34+
<main class="page-shell">
3135

3236
<section class="content-section">
3337
<h2>Primary Hubs</h2>

‎samples/index.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,26 @@
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1212
<title>Samples - HTML JavaScript Gaming</title>
1313
<link rel="stylesheet" href="../src/engine/theme/main.css" />
14+
<link rel="stylesheet" href="../src/engine/ui/hubCommon.css" />
1415
</head>
15-
<body>
16-
<main class="page-shell">
17-
<details class="is-collapsible" open>
18-
<summary class="is-collapsible__summary">Header and Intro</summary>
19-
<div class="is-collapsible__content">
20-
<div id="shared-theme-header"></div>
16+
<body class="hub-page-samples">
17+
<details class="is-collapsible" open>
18+
<summary class="is-collapsible__summary">Header and Intro</summary>
19+
<div class="is-collapsible__content">
20+
<div id="shared-theme-header"></div>
21+
<main class="page-shell">
2122
<section class="page-intro">
2223
<h1>Samples Hub</h1>
2324
<p>
2425
Browse phase-based sample collections that demonstrate engine systems and gameplay patterns.
2526
Start from the phase links below and open individual sample entries from each phase page.
2627
</p>
2728
</section>
28-
</div>
29-
</details>
29+
</main>
30+
</div>
31+
</details>
32+
33+
<main class="page-shell">
3034

3135
<section class="content-section">
3236
<h2>Core Phases</h2>

‎src/engine/theme/pages.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,80 @@
2626
color: var(--theme-muted);
2727
font-size: var(--font-size-helper);
2828
}
29+
30+
body.hub-page-home .page-shell,
31+
body.hub-page-games .page-shell,
32+
body.hub-page-samples .page-shell {
33+
width: min(1600px, calc(100% - 32px));
34+
margin: 0 auto 16px;
35+
padding: 24px;
36+
border-radius: 20px;
37+
border: 1px solid var(--line, rgba(221, 214, 254, 0.26));
38+
background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
39+
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26);
40+
}
41+
42+
body.hub-page-home .page-intro,
43+
body.hub-page-games .page-intro,
44+
body.hub-page-samples .page-intro {
45+
border-color: var(--line, rgba(221, 214, 254, 0.26));
46+
background: rgba(43, 16, 91, 0.5);
47+
box-shadow: none;
48+
}
49+
50+
body.hub-page-home .page-intro h1,
51+
body.hub-page-games .page-intro h1,
52+
body.hub-page-samples .page-intro h1,
53+
body.hub-page-home .content-section h2,
54+
body.hub-page-games .content-section h2,
55+
body.hub-page-samples .content-section h2 {
56+
color: var(--text, #f7f4ff);
57+
}
58+
59+
body.hub-page-home .page-intro p,
60+
body.hub-page-games .page-intro p,
61+
body.hub-page-samples .page-intro p,
62+
body.hub-page-home .content-section > p,
63+
body.hub-page-games .content-section > p,
64+
body.hub-page-samples .content-section > p,
65+
body.hub-page-home .footer-note,
66+
body.hub-page-games .footer-note,
67+
body.hub-page-samples .footer-note {
68+
color: var(--muted, #e9ddff);
69+
border-color: var(--line, rgba(221, 214, 254, 0.26));
70+
}
71+
72+
body.hub-page-home .card-link,
73+
body.hub-page-games .card-link,
74+
body.hub-page-samples .card-link {
75+
border-color: var(--line, rgba(221, 214, 254, 0.26));
76+
background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
77+
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
78+
}
79+
80+
body.hub-page-home .card-link:hover,
81+
body.hub-page-games .card-link:hover,
82+
body.hub-page-samples .card-link:hover {
83+
border-color: var(--card-hover-border, #c4b5fd);
84+
}
85+
86+
body.hub-page-home .card-link h3,
87+
body.hub-page-games .card-link h3,
88+
body.hub-page-samples .card-link h3 {
89+
color: var(--accent, #ddd6fe);
90+
}
91+
92+
body.hub-page-home .card-link p,
93+
body.hub-page-games .card-link p,
94+
body.hub-page-samples .card-link p {
95+
color: var(--muted, #e9ddff);
96+
}
97+
98+
@media (max-width: 900px) {
99+
body.hub-page-home .page-shell,
100+
body.hub-page-games .page-shell,
101+
body.hub-page-samples .page-shell {
102+
width: min(100%, calc(100% - 20px));
103+
padding: 18px;
104+
}
105+
}

0 commit comments

Comments
 (0)