starlight-view-modes
Version:
Starlight plugin adding view mode capabilities to your documentation website.
61 lines (58 loc) • 1.45 kB
CSS
@layer starlight, zen-mode;
@layer zen-mode {
body:has(.starlight-view-modes-zen-mode-header-sidebar) {
--sl-mobile-toc-height: 0rem;
}
body:has(.starlight-view-modes-zen-mode-header-sidebar)
.right-sidebar-container {
display: none;
}
body:has(.starlight-view-modes-zen-mode-header-sidebar) footer {
display: none;
}
body:has(.starlight-view-modes-zen-mode-header-sidebar):has(
#starlight__sidebar
)
header.header
> div {
--sl-nav-gap: 1rem;
grid-template-columns:
minmax(
calc(
var(--__sidebar-width) +
max(
0rem,
(
100vw - var(--sl-sidebar-width) - var(--sl-content-width) -
var(--sl-nav-gap)
) /
2 - var(--sl-nav-gap)
)
),
auto
)
1fr auto;
}
body:has(.starlight-view-modes-zen-mode-header-sidebar):has(
#starlight__sidebar
)
main
.sl-container {
margin: 0 auto;
}
body:has(.starlight-view-modes-zen-mode-header-sidebar):has(
#starlight__sidebar
)
.main-frame {
padding-inline: 0;
}
@media (min-width: 50rem) {
body:has(.starlight-view-modes-zen-mode-header-sidebar):has(
#starlight__sidebar
)
main {
width: calc(100vw - var(--sl-sidebar-width) - var(--sl-sidebar-pad-x));
margin-left: var(--sl-sidebar-width);
}
}
}