docs: align Aspen chrome with main

This commit is contained in:
ukimsanov
2026-07-28 20:46:20 -07:00
parent f3e5b7fc1b
commit 5cdfb1e6a2
4 changed files with 38 additions and 7 deletions
+2 -1
View File
@@ -20,8 +20,9 @@ These rules are persistent and apply to every documentation session:
- A page should answer a real question or help complete a real task.
- Keep ordinary top-level groups inside each tab, with no nested `root`, `directory`, `expanded`, or drilldown behavior.
- Match the deployed main docs' sidebar rhythm: 14px medium group headings, square links, no horizontal group dividers, and a segmented vertical rail whose active segment follows the current page. Groups remain open and non-collapsible.
- Keep the Aspen sidebar aligned to the 56px header and disable its early scroll-fade mask.
- Keep Mintlify's right-side **On this page** behavior and styling unchanged.
- Keep Aspen's desktop header on one row: logo, tabs, search, actions, and theme toggle.
- Keep Aspen's desktop header on one row: logo, tabs, search, compact GitHub link with its star count, Playground action, and theme toggle.
- Record important findings, uncertainties, and decisions in `../research/docs-refactor/NOTES.md`.
- Update progress and changed decisions in `../research/docs-refactor/PLAN.md`.
+32 -6
View File
@@ -57,8 +57,10 @@
--hf-text-tertiary: #999999;
--hf-heading: #0a0a0a;
--hf-code-bg: #ffffff;
--hf-ui-border: #eeeeee;
--hf-sidebar-rail: #eeeeee;
--hf-sidebar-text: #707070;
--mintlify-slot-header-height: 3.5rem;
--hf-accent-green: #1a7a0a;
--hf-accent-green-light: rgba(26, 122, 10, 0.07);
@@ -87,6 +89,7 @@
--hf-text-tertiary: #666666;
--hf-heading: #f5f5f5;
--hf-code-bg: #141414;
--hf-ui-border: #2a2a2a;
--hf-sidebar-rail: #2a2a2a;
--hf-sidebar-text: #a0a0a0;
@@ -165,8 +168,8 @@ a:not([class]):hover {
#navbar > div:has(.nav-tabs) {
display: grid;
grid-template-columns: max-content max-content minmax(12rem, 1fr) max-content;
column-gap: 1.25rem;
grid-template-columns: max-content max-content minmax(10.25rem, 1fr) max-content;
column-gap: 1rem;
align-items: center;
height: 3.5rem;
}
@@ -205,19 +208,31 @@ a:not([class]):hover {
grid-row: 1;
}
/* The repository remains available as a familiar GitHub icon. */
#sidebar-content {
top: 3.5rem !important;
height: calc(100vh - 3.5rem) !important;
}
/* Keep the repository compact, but retain its useful live star count. */
#navbar a[title="heygen-com/hyperframes"] {
width: 2.25rem;
width: auto;
min-width: 2.25rem;
height: 2.25rem;
padding: 0;
padding: 0 0.75rem;
justify-content: center;
}
#navbar a[title="heygen-com/hyperframes"] > span {
#navbar a[title="heygen-com/hyperframes"] > span.truncate {
display: none;
}
}
/* Use main's quieter structural border color across Aspen surfaces. */
#body-content [class*="border-gray-200"],
#body-content [class*="border-gray-100"] {
border-color: var(--hf-ui-border) !important;
}
/*
* Match the navigation rhythm and active-page rail used on the main docs.
* Each link owns one rail segment, so the current page can highlight only
@@ -278,6 +293,17 @@ a:not([class]):hover {
display: none;
}
/*
* Aspen assumes a 96px header and fades scrolled navigation before it reaches
* that boundary. Our header is 56px; align the sticky sidebar to it and let
* links clip exactly at the header instead of disappearing early.
*/
#navigation-items,
#navigation-items [data-id] {
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Catalog texture examples */
.hf-texture-preview-panel {