Skip to content

Commit 27c1aa9

Browse files
gm2552claude
andcommitted
Widen the doc content column on large screens
Mirror the change made in directtrust-tools-docs and metadata-and-payloads-guide. VitePress caps the doc column at 688px and the layout at 1440px, leaving wide gutters on large monitors. Raise --vp-layout-max-width in steps (1600px at >=1600, 1856px at >=1920) so it never exceeds the viewport, and raise the doc column's own cap to 1008px from 1280px up, with an extra :root on the selector to beat the theme's scoped rule. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01URC5mW1DFSnnZsPMPhe5J4
1 parent 3ced9cb commit 27c1aa9

1 file changed

Lines changed: 35 additions & 0 deletions

File tree

docs/.vitepress/theme/custom.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,3 +191,38 @@
191191
.VPNavBarTitle .logo {
192192
border-radius: 4px;
193193
}
194+
195+
/* ---------------------------------------------------------------------------
196+
Wider content column on large screens.
197+
198+
VitePress caps the doc column at 688px and the whole layout at 1440px, which
199+
leaves a lot of empty gutter on wide monitors — noticeable here because most
200+
pages carry full-width screenshots. Two adjustments:
201+
202+
1. Raise --vp-layout-max-width above 1440px, stepped so the value never
203+
exceeds the viewport. The theme computes VPContent/VPSidebar padding as
204+
calc((100vw - var(--vp-layout-max-width)) / 2 + ...); if the variable is
205+
larger than the viewport that term goes negative and the content slides
206+
under the fixed sidebar.
207+
2. Raise the doc column's own cap. The theme's rules are scoped
208+
(.content-container[data-v-...]), so these selectors carry an extra class
209+
to win on specificity rather than relying on stylesheet order.
210+
--------------------------------------------------------------------------- */
211+
@media (min-width: 1600px) {
212+
:root {
213+
--vp-layout-max-width: 1600px;
214+
}
215+
}
216+
217+
@media (min-width: 1920px) {
218+
:root {
219+
--vp-layout-max-width: 1856px;
220+
}
221+
}
222+
223+
@media (min-width: 1280px) {
224+
:root .VPDoc .content .content-container,
225+
:root .VPDoc.has-aside .content .content-container {
226+
max-width: 1008px;
227+
}
228+
}

0 commit comments

Comments
 (0)