feat: [verified] compose Skills Adoption diagrams around their stories
Build and publish Eldorado documentation / build (pull_request) Successful in 40s

This commit is contained in:
jarvis-at-skic committed 2026-10-06 22:35:48 +00:00
1 parent ef169cec58
commit a35cade49c
19 files changed
+2377 -834

No files matched your search

+1 -1
View File
@@ -15,7 +15,7 @@ export default function ArchifyDiagram({name, title, compact = false, story = fa
const skillsStory = /^strategy-(governance|quality|adoption|measurement|maintenance)$/.test(name);
useEffect(() => {
if (!name.startsWith('strategy-roadmap') && !skillsStory) return;
const media = window.matchMedia(skillsStory ? '(max-width: 700px)' : '(max-width: 999px)');
const media = window.matchMedia(skillsStory ? '(max-width: 1100px)' : '(max-width: 999px)');
const update = () => setNarrowRoadmap(media.matches);
update();
media.addEventListener('change', update);
+12 -11
View File
@@ -116,8 +116,7 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
.archify-panel--story[data-diagram="strategy-roadmap-loop"] {--roadmap-height: 1840px;}
.archify-panel--story[data-diagram="strategy-roadmap-loop"] > .story-desktop {height: 460px;}
.archify-panel--story[data-diagram="strategy-target"] > iframe {aspect-ratio: 1620 / 1430;}
.archify-panel--story[data-diagram="strategy-adoption"] > iframe {aspect-ratio: 545 / 408;}
.archify-panel--story[data-diagram="strategy-maintenance"] > iframe {aspect-ratio: 524 / 408;}
.strategy-content > details {margin: .65rem 0; border: 1px solid var(--line); padding: .8rem 1rem; background: var(--surface);}
.strategy-content summary {cursor: pointer; font-weight: 700;}
.strategy-content summary:focus-visible {outline: 3px solid #b88719; outline-offset: 4px;}
@@ -127,8 +126,7 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
.archify-panel--story > .story-desktop {display: none;}
.archify-panel--story > .story-mobile {display: block; height: auto; aspect-ratio: 240 / 748;}
.archify-panel--story[data-diagram="strategy-adoption"] > .story-mobile {aspect-ratio: 305 / 748;}
.archify-panel--story[data-diagram="strategy-maintenance"] > .story-mobile {aspect-ratio: 284 / 748;}
.archify-panel--story[data-diagram="strategy-target"] > .story-mobile {aspect-ratio: 680 / 2340;}
}
/* Keep the three-card loop readable beside the documentation sidebar. */
@@ -156,13 +154,16 @@ a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offse
/* Skills Adoption alone uses the full reading column, not a narrow preview. */
.theme-doc-markdown:has(.archify-panel--skills) {max-width: none;}
.archify-panel--story.archify-panel--skills {max-width: none;}
.archify-panel--story.archify-panel--skills > .story-desktop {aspect-ratio: auto; min-height: 460px; height: calc((100vw - 364px) * .56 + 72px); max-height: 720px;}
@media (max-width: 996px) and (min-width: 701px) {
.archify-panel--story.archify-panel--skills > .story-desktop {height: calc(100vw * .56 + 72px);}
}
@media (max-width: 700px) {
.archify-panel--story.archify-panel--skills > .story-mobile {aspect-ratio: auto; height: 1680px; max-width: 400px; margin-inline: auto;}
.archify-panel--skills {--skills-wide: 2000 / 1200; --skills-narrow: 880 / 2900;}
.archify-panel--skills[data-diagram="strategy-governance"] {--skills-wide: 1760 / 1550;}
.archify-panel--skills[data-diagram="strategy-adoption"] {--skills-wide: 2040 / 1300; --skills-narrow: 880 / 2200;}
.archify-panel--skills[data-diagram="strategy-measurement"] {--skills-wide: 2400 / 1280; --skills-narrow: 880 / 3900;}
.archify-panel--skills[data-diagram="strategy-maintenance"] {--skills-wide: 2630 / 1480; --skills-narrow: 880 / 3250;}
.archify-panel--story.archify-panel--skills > .story-desktop {aspect-ratio: var(--skills-wide); height: auto;}
@media (max-width: 1100px) {
.archify-panel--story.archify-panel--skills > .story-desktop {display: none;}
.archify-panel--story.archify-panel--skills > .story-mobile {display: block; aspect-ratio: var(--skills-narrow); height: auto; max-width: 440px; margin-inline: auto;}
.archify-panel--skills .archify-modal {overflow-y: auto; overscroll-behavior: contain;}
.archify-panel--skills .archify-modal-toolbar {position: sticky; top: 0; z-index: 1; flex-shrink: 0; background: var(--surface);}
.archify-panel--skills .archify-modal iframe {flex: none; height: 1900px; min-height: 1900px;}
.archify-panel--skills .archify-modal iframe {flex: none; height: auto; min-height: 0; aspect-ratio: var(--skills-narrow); max-width: 600px; margin-inline: auto;}
}