| name | DLCE Docs | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| description | A Docusaurus-inspired Docsify shell for the Dancing Line Community Edition Wiki. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Creative North Star: "The Graphite Wayfinder"
DLCE Docs is a restrained documentation workspace: graphite surfaces in dark mode, clean paper surfaces in light mode, and one established blue used to communicate location and action. Its structure deliberately follows the Docusaurus documentation model while retaining Docsify's content engine and URL behavior.
The interface is dense enough for a large Wiki but keeps the reading canvas quiet. Global sections live in the top bar, document relationships live in the left tree, and headings live in an independent right or mobile-bottom table of contents.
Key Characteristics:
- Persistent three-part wayfinding: global tabs, document tree, page outline.
- One blue accent with neutral layered surfaces.
- Compact controls, crisp dividers, and restrained motion.
- Theme- and language-aware UI without changing Markdown content.
The palette uses a single clear blue against low-chroma neutral surfaces.
- Navigation Blue: Marks current routes, links, focus, and interactive emphasis.
- Navigation Blue Strong: Provides readable link emphasis on light surfaces.
- Paper Canvas / Soft Sidebar: The light reading surface and its lightly differentiated rail.
- Graphite Canvas / Header / Sidebar: Three close dark values separate regions without heavy shadows.
- Quiet Border: Thin dividers define structure in both themes.
- Muted Text: Secondary labels and the page-outline rail.
The One-Accent Rule. Blue communicates navigation and interaction; do not introduce unrelated accent colors for ordinary controls.
The Semantic Notice Rule. Pink-red is reserved for important warnings and sky-blue for informational notices, with theme-specific surfaces that preserve text contrast.
Display Font: Segoe UI Variable Text with Segoe UI, Microsoft YaHei UI, and PingFang SC fallbacks
Body Font: The same multilingual sans-serif stack
Character: Functional, compact, and highly legible across Chinese and English. Hierarchy comes from weight, scale, and spacing rather than decorative type changes.
- Display (750, fluid 2rem–2.75rem, 1.15): Page H1 only.
- Headline (700, theme scale): H2 section boundaries.
- Title (650): Top tabs, sidebar roots, and card titles.
- Body (400, 16px, 1.65): Long-form Markdown, capped near 75 characters per line.
- Label (650, 14px): Controls and compact navigation labels.
The Reading-First Rule. Use the display scale once per document; navigation never competes with the page H1.
A 64px fixed header contains the unified menu button, flexible brand title, natural-width section tabs, and utility controls. The desktop document rail is 19rem wide. Pages with headings reserve a 16rem table-of-contents rail on wide screens. At 71rem and below, the page outline moves to the isolated bottom region of the left sidebar; at 48rem and below, global tabs move into the navigation drawer and the header drops to 58px.
Content uses fluid horizontal padding and a maximum reading width. The brand title expands naturally and ellipsizes only after tabs and utilities consume the available width.
The system is flat by default. Depth comes from tonal surface changes and 1px borders; only transient menus and the mobile drawer use soft ambient shadow.
The Flat-By-Default Rule. Do not add persistent card shadows to documentation navigation; use border and tone first.
Controls and nested panels use gently rounded 6–10px corners. Breadcrumb states use a pill silhouette. The DLCE icon keeps its transparent alpha and is always contained rather than placed on an invented background.
- Shape: Compact rounded square (40px, 8px radius).
- State: Neutral at rest, tonal hover, visible keyboard focus.
- Behavior: The same menu control operates the desktop rail and mobile drawer. Its three lines morph into a close icon while expanded, synchronized with the rail's 220ms transform-only drawer transition. On mobile, an independent non-interactive shadow layer follows the drawer and crossfades over the same 220ms interval, reaching zero opacity once the rail is off-screen so no blur remains on the viewport edge.
- Theme mode: The compact theme control cycles through Auto, Light, and Dark, matching the main site. Auto follows
prefers-color-schemelive, while explicit choices persist; its accessible label names both the resolved theme and the next mode.
- Top tabs: Natural-width labels with a 3px active underline. Each tab links to its language-aware section directory (for example,
/social/or/en/social/). Bare section hashes are normalized to their trailing-slash directory form without a reload. A native virtual route then requests that directory'sREADME.md: existing Markdown renders normally, while a 404 produces an invisible landing marker without changing the requested section. The landing-page generator reads the current language's sidebar instead of aliasing the section to a concrete document. The route accepts any single-directory language prefix, so new languages inherit the behavior without another redirect entry. Cross-origin links and entries that own a submenu leave the primary tab group and appear in the right utility cluster before language, repository, and theme controls. A submenu whose parent has a URL keeps that parent as a normal utility link with a compact adjacent disclosure button; a parent without a URL uses the full label button as the disclosure control. Desktop submenus always open downward. In the mobile drawer, direct auxiliary links join the same two-column grid as the primary links; the language/repository row and expanded submenus follow immediately in the same intrinsic-height navigation shell so no flex spacer can separate them. Linked submenu parents join their children as equal horizontal items instead of becoming a detached heading; unlinked submenu parents remain the desktop disclosure label but are omitted from the mobile link row. Item dividers match the language row, and each row scrolls horizontally when needed without widening the drawer. The drawer owns vertical overflow, so additional links and menus remain reachable without compressed labels or clipped popovers. Additional language and auxiliary entries flow from their Markdown or dictionary sources without layout rewrites. Language changes preserve the current section or page when its Markdown exists, otherwise they resolve to the configured home page for the target language instead of opening a 404; after selecting a language, the target hash is applied and the page refreshes once so Docsify, generated headings, breadcrumbs, and navigation all rebuild from the same dictionary. - Document tree: Parent Markdown pages may also own collapsible child pages. Sibling groups behave as an accordion: opening one closes the other open group at the same depth with a measured 220ms height, spacing, and opacity transition. Selecting a sibling parent page completes that same transition before the route changes; initial load and browser history restoration remain immediate. Every link uses a shared 2.75rem Flex row so text and arrow controls remain vertically centered; external and internal links at the same tree depth also share identical horizontal padding and panel width. Links use regular-weight text and rounded neutral-gray hover panels rather than underlines. The panel is an opacity layer with a perceptible 180ms fade and the text color transitions independently; neither position, scale, nor weight changes. Reduced-motion mode retains a 120ms opacity/color fade. Selected links retain the gray panel and use the blue accent for text. A parent link and its arrow button share one hover state. Docsify section queries such as
?id=...do not alter the selected Markdown page; selection andaria-currentare synchronized from the query-free document route after every render. - Page outline: Docsify's sidebar heading tree is disabled. H2-H5 links are generated directly from the rendered article and occupy only the right rail or isolated sidebar footer. Headings inside tab blocks enter the outline only when every containing tab panel is active; selecting a tab rebuilds the outline on the following task. A direct
?id=target activates its outer and nested tabs before scrolling, including same-document browser history navigation. - Breadcrumb: Hidden on the Wiki home page and on a single-document tab's root document. Every page beneath a tab that owns a generated overview starts with a home icon linked to the language-aware Wiki home, followed by the tab overview and the complete sidebar ancestry (for example, Home > Game Docs > Custom Post-processing > V2). Nested routes inside a single-document tab retain Home plus their document ancestry. The Custom Post-processing parent document alone uses a short render gate before Docsify replaces its article; the completed-render task releases it after inserting the breadcrumb above H1, preventing that page's heading-only first frame without delaying other documents. Intermediate links use regular-weight body color and the same neutral pill hover as Home; only the current page keeps the blue active pill.
- Shape: Compact bordered 10px container with a document icon, title, and directional arrow; the title is the complete accessible link name, with no redundant action subtitle.
- Layout: Two columns on wide screens and one column on mobile.
- Source: Category pages use immediate child Markdown links; top-tab landing pages use the section sidebar's first-level entries. Every generated overview is an independent virtual document route: Docsify runs its normal load and history cycle, while the page body is built from the active language's sidebar rather than read from Markdown. Category routes use a reserved
__overviewsegment and a language-neutral key derived from their first internal child route, so breadcrumbs, browser back/forward, and every top tab share the same behavior across current and future languages. Previously shared?category=URLs are upgraded in place. A section with exactly one first-level Markdown document skips the generated overview and routes directly to that document.
- Style: Full-width search field on a tonal sidebar surface with an 8px radius.
- Focus: Blue border plus a low-opacity blue focus ring.
- Standard: Neutral surface with the same 4px theme-blue left rule used by semantic notices; all notice variants span the full Markdown content column, matching the surrounding body copy.
- Important: Dark rose or pale rose surface with strong readable foreground.
- Information: Dark blue or pale blue surface with matching semantic border.
- Grid: A complete 1px neutral border surrounds the table and separates every header and body cell.
- Themes: Light mode uses a cool light-gray grid and header surface; dark mode raises border luminance against graphite row surfaces without competing with the blue navigation accent.
- Responsive: Wide tables remain horizontally scrollable. Theme-generated stacked mobile rows keep one outer border and horizontal cell separators without doubled edges.
- Mobile row sizing: Below 30em, every stacked cell uses a two-column grid for the generated header label and one generated value wrapper. Both columns remain in normal flow, so the taller side determines the shared row height; links, line breaks, and other value nodes stay grouped in column two instead of auto-flowing back into the label column.
- Wide layout: Previous and next document cards may share a row and preserve their directional text alignment.
- Narrow layout: Below 48em, pagination becomes one full-width column in reading order. Both cards share the same horizontal edges; previous remains left-aligned and next remains right-aligned within its own row.
- Empty state: When neither adjacent document exists, the pagination container is removed from layout so its divider and margins do not remain above the footer. A single available direction keeps the normal divider and card treatment.
- Do keep global, document, and in-page navigation visually separate.
- Do obtain UI strings from the language dictionaries at the repository root and in each language directory.
- Do preserve the established blue and transparent DLCE artwork.
- Do use short 150–220ms state transitions and respect reduced-motion settings.
- Don't place H2/H3 links back inside the Markdown page tree.
- Don't hard-code new interface copy in navigation logic.
- Don't add gradients, decorative background effects, or unrelated accent colors.
- Don't hide the unified menu control with the sidebar it controls.