From 8107058d0308c4c1aac1b46fe55ea763386b18e8 Mon Sep 17 00:00:00 2001 From: Kim Harjamaki Date: Sat, 3 Jan 2026 18:02:36 +0200 Subject: [PATCH] Refresh docs site styling --- CODEX_INSTRUCTIONS.md | 25 +-- README.md | 4 +- docs/assets/app.js | 18 ++- docs/assets/style.css | 206 ++++++++++++++++++++---- docs/index.html | 83 ++++++++-- docs/pages/architecture.html | 44 +++-- docs/pages/hybrid.html | 45 ++++-- docs/pages/kpis.html | 46 ++++-- docs/pages/operating-model.html | 43 +++-- docs/pages/overview.html | 49 ++++-- docs/pages/roadmap.html | 46 ++++-- docs/pages/runbooks.html | 43 +++-- docs/pages/service-definition.html | 46 ++++-- docs/pages/templates.html | 44 +++-- docs/site/README.md | 3 - docs/site/assets/app.js | 43 ----- docs/site/assets/style.css | 80 --------- docs/site/index.html | 39 ----- docs/site/pages/architecture.html | 31 ---- docs/site/pages/hybrid.html | 30 ---- docs/site/pages/kpis.html | 30 ---- docs/site/pages/operating-model.html | 30 ---- docs/site/pages/overview.html | 30 ---- docs/site/pages/roadmap.html | 30 ---- docs/site/pages/runbooks.html | 30 ---- docs/site/pages/service-definition.html | 30 ---- docs/site/pages/templates.html | 30 ---- site/README.md | 3 - site/assets/app.js | 43 ----- site/assets/style.css | 80 --------- site/index.html | 39 ----- site/pages/architecture.html | 31 ---- site/pages/hybrid.html | 30 ---- site/pages/kpis.html | 30 ---- site/pages/operating-model.html | 30 ---- site/pages/overview.html | 30 ---- site/pages/roadmap.html | 30 ---- site/pages/runbooks.html | 30 ---- site/pages/service-definition.html | 30 ---- site/pages/templates.html | 30 ---- 40 files changed, 563 insertions(+), 1051 deletions(-) delete mode 100644 docs/site/README.md delete mode 100644 docs/site/assets/app.js delete mode 100644 docs/site/assets/style.css delete mode 100644 docs/site/index.html delete mode 100644 docs/site/pages/architecture.html delete mode 100644 docs/site/pages/hybrid.html delete mode 100644 docs/site/pages/kpis.html delete mode 100644 docs/site/pages/operating-model.html delete mode 100644 docs/site/pages/overview.html delete mode 100644 docs/site/pages/roadmap.html delete mode 100644 docs/site/pages/runbooks.html delete mode 100644 docs/site/pages/service-definition.html delete mode 100644 docs/site/pages/templates.html delete mode 100644 site/README.md delete mode 100644 site/assets/app.js delete mode 100644 site/assets/style.css delete mode 100644 site/index.html delete mode 100644 site/pages/architecture.html delete mode 100644 site/pages/hybrid.html delete mode 100644 site/pages/kpis.html delete mode 100644 site/pages/operating-model.html delete mode 100644 site/pages/overview.html delete mode 100644 site/pages/roadmap.html delete mode 100644 site/pages/runbooks.html delete mode 100644 site/pages/service-definition.html delete mode 100644 site/pages/templates.html diff --git a/CODEX_INSTRUCTIONS.md b/CODEX_INSTRUCTIONS.md index 8d186e0..b631154 100644 --- a/CODEX_INSTRUCTIONS.md +++ b/CODEX_INSTRUCTIONS.md @@ -31,7 +31,7 @@ Tone: crisp, enterprise, practical. Avoid buzzword soup. Prefer clear boundaries - Use Mermaid (`.mmd` or embedded in MD) for flows. - Use YAML for templates/workflows. - Use JSON for Azure Policy stubs. -- Use HTML/CSS for `/site` static docs with a simple nav and search (JS optional). +- Use HTML/CSS for `/docs` static docs with a simple nav and search (JS optional). - Provide consistent naming, cross-links, and an index. - Avoid inline newline escapes like `\n` in Markdown lists. @@ -170,24 +170,6 @@ Tagline: “A pragmatic, enterprise Cloud Security service operating model (Azur kpi-cadence.md docs/ - site/ - README.md - index.html - assets/ - style.css - app.js - pages/ - overview.html - service-definition.html - operating-model.html - architecture.html - kpis.html - roadmap.html - runbooks.html - templates.html - hybrid.html - site/ - README.md index.html assets/ style.css @@ -374,8 +356,8 @@ Create real usable templates: - sprint ceremonies md - kpi dashboard md -## 9) HTML site (site/*) -Create a minimal docs site: +## 9) HTML site (docs/*) +Create a minimal docs site with modern, enterprise styling: - left nav - mobile friendly - search (simple JS search over page titles or a small index array) @@ -414,6 +396,7 @@ Keep it stable and not overcomplicated. - Prefer explicit tables (RACI, KPIs, cadences, responsibilities). - Include “anti-patterns” sections to show maturity (e.g., security as blocker, PDF policies, hero culture). - Ensure Markdown content is lint-friendly and free of formatting artifacts. +- Continuously refine the docs site UX to reflect modern enterprise styling and usability. ## 13) Execution steps (what you should do now) 1) Create all files and folders above. diff --git a/README.md b/README.md index 352ef8a..4e6e9c9 100644 --- a/README.md +++ b/README.md @@ -47,8 +47,7 @@ interfaces, measurable outcomes, and lifecycle management across Azure and hybri - Runbooks: [`docs/20-runbooks/README.md`](docs/20-runbooks/README.md) - Templates: [`docs/21-templates/README.md`](docs/21-templates/README.md) - Diagrams: [`docs/22-diagrams/README.md`](docs/22-diagrams/README.md) -- Static site: [`docs/site/index.html`](docs/site/index.html) -- Static site: [`site/index.html`](site/index.html) +- Static site: [`docs/index.html`](docs/index.html) ## Service lifecycle (preview) ```mermaid @@ -76,7 +75,6 @@ The repository includes: - `/docs` — service model documentation and diagrams - `/impl` — Azure and hybrid implementation stubs - `/agile` — backlog, ceremonies, and metrics -- `/site` — lightweight static documentation site ## License See [`LICENSE`](LICENSE). diff --git a/docs/assets/app.js b/docs/assets/app.js index 7257f88..2d91f36 100644 --- a/docs/assets/app.js +++ b/docs/assets/app.js @@ -30,13 +30,18 @@ function resolveHref(targetPath) { return `${trimmedBase}/${targetPath}`; } +function createNavLink(page) { + const link = document.createElement("a"); + link.href = resolveHref(page.path); + link.textContent = page.title; + link.classList.add("nav-link"); + return link; +} + function buildNav() { const nav = document.getElementById("nav-links"); pageDefinitions.forEach((page) => { - const link = document.createElement("a"); - link.href = resolveHref(page.path); - link.textContent = page.title; - nav.appendChild(link); + nav.appendChild(createNavLink(page)); }); } @@ -51,10 +56,7 @@ function setupSearch() { const nav = document.getElementById("nav-links"); nav.innerHTML = ""; results.forEach((page) => { - const link = document.createElement("a"); - link.href = resolveHref(page.path); - link.textContent = page.title; - nav.appendChild(link); + nav.appendChild(createNavLink(page)); }); }); } diff --git a/docs/assets/style.css b/docs/assets/style.css index 0ee9c39..697676d 100644 --- a/docs/assets/style.css +++ b/docs/assets/style.css @@ -1,8 +1,15 @@ :root { - --bg: #f7f9fb; - --text: #1f2933; - --nav: #ffffff; - --accent: #0b5cab; + color-scheme: light; + --bg: #f4f7fb; + --surface: #ffffff; + --surface-muted: #f0f4fa; + --text: #0f172a; + --text-muted: #475569; + --border: #e2e8f0; + --accent: #2563eb; + --accent-strong: #1d4ed8; + --accent-soft: rgba(37, 99, 235, 0.12); + --shadow: 0 18px 48px rgba(15, 23, 42, 0.08); } * { @@ -11,70 +18,199 @@ body { margin: 0; - font-family: Arial, sans-serif; + font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--text); background: var(--bg); + line-height: 1.6; } -header { - background: var(--nav); - padding: 1rem 1.5rem; - border-bottom: 1px solid #e0e6ed; +.topbar { + background: linear-gradient(120deg, #0f172a, #1e293b 45%, #1e40af 100%); + color: #f8fafc; + padding: 2.5rem 3rem 2rem; } -.container { +.topbar-content { display: flex; - min-height: calc(100vh - 60px); + align-items: flex-start; + justify-content: space-between; + gap: 2rem; + flex-wrap: wrap; } -nav { - width: 260px; - background: var(--nav); - border-right: 1px solid #e0e6ed; - padding: 1rem; +.eyebrow { + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 0.75rem; + color: rgba(248, 250, 252, 0.7); + margin: 0 0 0.5rem; } -main { - flex: 1; - padding: 2rem; +.topbar h1 { + margin: 0 0 0.75rem; + font-size: clamp(2rem, 3vw, 2.75rem); +} + +.subhead { + margin: 0; + max-width: 640px; + color: rgba(248, 250, 252, 0.78); +} + +.topbar-actions { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; +} + +.button { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.55rem 1rem; + border-radius: 999px; + font-size: 0.9rem; + text-decoration: none; + font-weight: 600; + border: 1px solid transparent; +} + +.button.primary { + background: #f8fafc; + color: #0f172a; } -nav a { +.button.secondary { + background: transparent; + color: #f8fafc; + border-color: rgba(248, 250, 252, 0.4); +} + +.layout { + display: flex; + min-height: calc(100vh - 140px); +} + +.sidebar { + width: 270px; + background: var(--surface); + border-right: 1px solid var(--border); + padding: 1.5rem; + position: sticky; + top: 0; + height: calc(100vh - 140px); + overflow-y: auto; +} + +.nav-title { + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted); + margin-bottom: 1rem; +} + +.nav-link { display: block; color: var(--text); text-decoration: none; - padding: 0.4rem 0; + padding: 0.5rem 0.5rem; + border-radius: 10px; + margin-bottom: 0.2rem; } -nav a:hover { - color: var(--accent); +.nav-link:hover { + background: var(--accent-soft); + color: var(--accent-strong); } .search { - margin-bottom: 1rem; + margin-bottom: 1.25rem; } .search input { width: 100%; - padding: 0.5rem; - border: 1px solid #ccd6e0; - border-radius: 4px; + padding: 0.55rem 0.75rem; + border: 1px solid var(--border); + border-radius: 12px; + background: var(--surface-muted); +} + +.content { + flex: 1; + padding: 2.5rem 3rem 3rem; } .card { - background: white; - padding: 1rem; - border-radius: 6px; - border: 1px solid #e0e6ed; - margin-bottom: 1rem; + background: var(--surface); + padding: 1.5rem; + border-radius: 18px; + border: 1px solid var(--border); + box-shadow: var(--shadow); + margin-bottom: 1.5rem; +} + +.card h2, +.card h3 { + margin-top: 0; +} + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1rem; +} + +.card-grid .card { + margin: 0; + box-shadow: none; + border: 1px solid var(--border); + background: var(--surface); +} + +.pill-group { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 1rem; +} + +.pill { + padding: 0.25rem 0.7rem; + border-radius: 999px; + background: var(--surface-muted); + color: var(--text-muted); + font-size: 0.8rem; + font-weight: 600; +} + +.link-list { + display: grid; + gap: 0.4rem; +} + +.link-list a { + color: var(--accent-strong); + text-decoration: none; + font-weight: 600; +} + +.link-list a:hover { + text-decoration: underline; } -@media (max-width: 900px) { - .container { +@media (max-width: 1000px) { + .layout { flex-direction: column; } - nav { + .sidebar { width: 100%; + height: auto; + position: relative; + } + + .content { + padding: 2rem 1.5rem 3rem; } } diff --git a/docs/index.html b/docs/index.html index d1f99ab..43f91b9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,31 +7,80 @@ -
- Cloud Security Service Model -
Azure + Hybrid operating model
+
+
+
+

Cloud Security Service Model

+

Cloud Security Service Model

+

+ A modern, enterprise-ready operating model for security services across Azure and hybrid environments. +

+
+
+ Explore overview + View executive doc +
+
-
-