Skip to content

Commit 5b0217e

Browse files
OgeonX-AiOgeonX-Ai
authored
Merge pull request #5 from Coding-Autopilot-System/codex/review-repository-for-improvements
Modernize docs site UI and styling; update static HTML/CSS/JS and remove duplicate site copies
2 parents 620f3c1 + 8107058 commit 5b0217e

40 files changed

Lines changed: 563 additions & 1051 deletions

‎CODEX_INSTRUCTIONS.md‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Tone: crisp, enterprise, practical. Avoid buzzword soup. Prefer clear boundaries
3131
- Use Mermaid (`.mmd` or embedded in MD) for flows.
3232
- Use YAML for templates/workflows.
3333
- Use JSON for Azure Policy stubs.
34-
- Use HTML/CSS for `/site` static docs with a simple nav and search (JS optional).
34+
- Use HTML/CSS for `/docs` static docs with a simple nav and search (JS optional).
3535
- Provide consistent naming, cross-links, and an index.
3636
- Avoid inline newline escapes like `\n` in Markdown lists.
3737

@@ -170,24 +170,6 @@ Tagline: “A pragmatic, enterprise Cloud Security service operating model (Azur
170170
kpi-cadence.md
171171

172172
docs/
173-
site/
174-
README.md
175-
index.html
176-
assets/
177-
style.css
178-
app.js
179-
pages/
180-
overview.html
181-
service-definition.html
182-
operating-model.html
183-
architecture.html
184-
kpis.html
185-
roadmap.html
186-
runbooks.html
187-
templates.html
188-
hybrid.html
189-
site/
190-
README.md
191173
index.html
192174
assets/
193175
style.css
@@ -374,8 +356,8 @@ Create real usable templates:
374356
- sprint ceremonies md
375357
- kpi dashboard md
376358

377-
## 9) HTML site (site/*)
378-
Create a minimal docs site:
359+
## 9) HTML site (docs/*)
360+
Create a minimal docs site with modern, enterprise styling:
379361
- left nav
380362
- mobile friendly
381363
- search (simple JS search over page titles or a small index array)
@@ -414,6 +396,7 @@ Keep it stable and not overcomplicated.
414396
- Prefer explicit tables (RACI, KPIs, cadences, responsibilities).
415397
- Include “anti-patterns” sections to show maturity (e.g., security as blocker, PDF policies, hero culture).
416398
- Ensure Markdown content is lint-friendly and free of formatting artifacts.
399+
- Continuously refine the docs site UX to reflect modern enterprise styling and usability.
417400

418401
## 13) Execution steps (what you should do now)
419402
1) Create all files and folders above.

‎README.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ interfaces, measurable outcomes, and lifecycle management across Azure and hybri
4747
- Runbooks: [`docs/20-runbooks/README.md`](docs/20-runbooks/README.md)
4848
- Templates: [`docs/21-templates/README.md`](docs/21-templates/README.md)
4949
- Diagrams: [`docs/22-diagrams/README.md`](docs/22-diagrams/README.md)
50-
- Static site: [`docs/site/index.html`](docs/site/index.html)
51-
- Static site: [`site/index.html`](site/index.html)
50+
- Static site: [`docs/index.html`](docs/index.html)
5251

5352
## Service lifecycle (preview)
5453
```mermaid
@@ -76,7 +75,6 @@ The repository includes:
7675
- `/docs` — service model documentation and diagrams
7776
- `/impl` — Azure and hybrid implementation stubs
7877
- `/agile` — backlog, ceremonies, and metrics
79-
- `/site` — lightweight static documentation site
8078

8179
## License
8280
See [`LICENSE`](LICENSE).

‎docs/assets/app.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,18 @@ function resolveHref(targetPath) {
3030
return `${trimmedBase}/${targetPath}`;
3131
}
3232

33+
function createNavLink(page) {
34+
const link = document.createElement("a");
35+
link.href = resolveHref(page.path);
36+
link.textContent = page.title;
37+
link.classList.add("nav-link");
38+
return link;
39+
}
40+
3341
function buildNav() {
3442
const nav = document.getElementById("nav-links");
3543
pageDefinitions.forEach((page) => {
36-
const link = document.createElement("a");
37-
link.href = resolveHref(page.path);
38-
link.textContent = page.title;
39-
nav.appendChild(link);
44+
nav.appendChild(createNavLink(page));
4045
});
4146
}
4247

@@ -51,10 +56,7 @@ function setupSearch() {
5156
const nav = document.getElementById("nav-links");
5257
nav.innerHTML = "";
5358
results.forEach((page) => {
54-
const link = document.createElement("a");
55-
link.href = resolveHref(page.path);
56-
link.textContent = page.title;
57-
nav.appendChild(link);
59+
nav.appendChild(createNavLink(page));
5860
});
5961
});
6062
}

‎docs/assets/style.css‎

Lines changed: 171 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
:root {
2-
--bg: #f7f9fb;
3-
--text: #1f2933;
4-
--nav: #ffffff;
5-
--accent: #0b5cab;
2+
color-scheme: light;
3+
--bg: #f4f7fb;
4+
--surface: #ffffff;
5+
--surface-muted: #f0f4fa;
6+
--text: #0f172a;
7+
--text-muted: #475569;
8+
--border: #e2e8f0;
9+
--accent: #2563eb;
10+
--accent-strong: #1d4ed8;
11+
--accent-soft: rgba(37, 99, 235, 0.12);
12+
--shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
613
}
714

815
* {
@@ -11,70 +18,199 @@
1118

1219
body {
1320
margin: 0;
14-
font-family: Arial, sans-serif;
21+
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
1522
color: var(--text);
1623
background: var(--bg);
24+
line-height: 1.6;
1725
}
1826

19-
header {
20-
background: var(--nav);
21-
padding: 1rem 1.5rem;
22-
border-bottom: 1px solid #e0e6ed;
27+
.topbar {
28+
background: linear-gradient(120deg, #0f172a, #1e293b 45%, #1e40af 100%);
29+
color: #f8fafc;
30+
padding: 2.5rem 3rem 2rem;
2331
}
2432

25-
.container {
33+
.topbar-content {
2634
display: flex;
27-
min-height: calc(100vh - 60px);
35+
align-items: flex-start;
36+
justify-content: space-between;
37+
gap: 2rem;
38+
flex-wrap: wrap;
2839
}
2940

30-
nav {
31-
width: 260px;
32-
background: var(--nav);
33-
border-right: 1px solid #e0e6ed;
34-
padding: 1rem;
41+
.eyebrow {
42+
text-transform: uppercase;
43+
letter-spacing: 0.08em;
44+
font-size: 0.75rem;
45+
color: rgba(248, 250, 252, 0.7);
46+
margin: 0 0 0.5rem;
3547
}
3648

37-
main {
38-
flex: 1;
39-
padding: 2rem;
49+
.topbar h1 {
50+
margin: 0 0 0.75rem;
51+
font-size: clamp(2rem, 3vw, 2.75rem);
52+
}
53+
54+
.subhead {
55+
margin: 0;
56+
max-width: 640px;
57+
color: rgba(248, 250, 252, 0.78);
58+
}
59+
60+
.topbar-actions {
61+
display: flex;
62+
gap: 0.75rem;
63+
flex-wrap: wrap;
64+
}
65+
66+
.button {
67+
display: inline-flex;
68+
align-items: center;
69+
gap: 0.4rem;
70+
padding: 0.55rem 1rem;
71+
border-radius: 999px;
72+
font-size: 0.9rem;
73+
text-decoration: none;
74+
font-weight: 600;
75+
border: 1px solid transparent;
76+
}
77+
78+
.button.primary {
79+
background: #f8fafc;
80+
color: #0f172a;
4081
}
4182

42-
nav a {
83+
.button.secondary {
84+
background: transparent;
85+
color: #f8fafc;
86+
border-color: rgba(248, 250, 252, 0.4);
87+
}
88+
89+
.layout {
90+
display: flex;
91+
min-height: calc(100vh - 140px);
92+
}
93+
94+
.sidebar {
95+
width: 270px;
96+
background: var(--surface);
97+
border-right: 1px solid var(--border);
98+
padding: 1.5rem;
99+
position: sticky;
100+
top: 0;
101+
height: calc(100vh - 140px);
102+
overflow-y: auto;
103+
}
104+
105+
.nav-title {
106+
font-size: 0.85rem;
107+
text-transform: uppercase;
108+
letter-spacing: 0.08em;
109+
color: var(--text-muted);
110+
margin-bottom: 1rem;
111+
}
112+
113+
.nav-link {
43114
display: block;
44115
color: var(--text);
45116
text-decoration: none;
46-
padding: 0.4rem 0;
117+
padding: 0.5rem 0.5rem;
118+
border-radius: 10px;
119+
margin-bottom: 0.2rem;
47120
}
48121

49-
nav a:hover {
50-
color: var(--accent);
122+
.nav-link:hover {
123+
background: var(--accent-soft);
124+
color: var(--accent-strong);
51125
}
52126

53127
.search {
54-
margin-bottom: 1rem;
128+
margin-bottom: 1.25rem;
55129
}
56130

57131
.search input {
58132
width: 100%;
59-
padding: 0.5rem;
60-
border: 1px solid #ccd6e0;
61-
border-radius: 4px;
133+
padding: 0.55rem 0.75rem;
134+
border: 1px solid var(--border);
135+
border-radius: 12px;
136+
background: var(--surface-muted);
137+
}
138+
139+
.content {
140+
flex: 1;
141+
padding: 2.5rem 3rem 3rem;
62142
}
63143

64144
.card {
65-
background: white;
66-
padding: 1rem;
67-
border-radius: 6px;
68-
border: 1px solid #e0e6ed;
69-
margin-bottom: 1rem;
145+
background: var(--surface);
146+
padding: 1.5rem;
147+
border-radius: 18px;
148+
border: 1px solid var(--border);
149+
box-shadow: var(--shadow);
150+
margin-bottom: 1.5rem;
151+
}
152+
153+
.card h2,
154+
.card h3 {
155+
margin-top: 0;
156+
}
157+
158+
.card-grid {
159+
display: grid;
160+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
161+
gap: 1rem;
162+
}
163+
164+
.card-grid .card {
165+
margin: 0;
166+
box-shadow: none;
167+
border: 1px solid var(--border);
168+
background: var(--surface);
169+
}
170+
171+
.pill-group {
172+
display: flex;
173+
flex-wrap: wrap;
174+
gap: 0.5rem;
175+
margin-top: 1rem;
176+
}
177+
178+
.pill {
179+
padding: 0.25rem 0.7rem;
180+
border-radius: 999px;
181+
background: var(--surface-muted);
182+
color: var(--text-muted);
183+
font-size: 0.8rem;
184+
font-weight: 600;
185+
}
186+
187+
.link-list {
188+
display: grid;
189+
gap: 0.4rem;
190+
}
191+
192+
.link-list a {
193+
color: var(--accent-strong);
194+
text-decoration: none;
195+
font-weight: 600;
196+
}
197+
198+
.link-list a:hover {
199+
text-decoration: underline;
70200
}
71201

72-
@media (max-width: 900px) {
73-
.container {
202+
@media (max-width: 1000px) {
203+
.layout {
74204
flex-direction: column;
75205
}
76206

77-
nav {
207+
.sidebar {
78208
width: 100%;
209+
height: auto;
210+
position: relative;
211+
}
212+
213+
.content {
214+
padding: 2rem 1.5rem 3rem;
79215
}
80216
}

0 commit comments

Comments
 (0)