starlight-view-modes
Version:
Starlight plugin adding view mode capabilities to your documentation website.
40 lines (37 loc) • 1.09 kB
CSS
@layer starlight, zen-mode;
@layer zen-mode {
body:has(.starlight-view-modes-zen-mode-sidebar) {
--sl-mobile-toc-height: 0rem;
}
body:has(.starlight-view-modes-zen-mode-sidebar) header.header {
display: none;
}
body:has(.starlight-view-modes-zen-mode-sidebar) nav {
top: 0;
}
body:has(.starlight-view-modes-zen-mode-sidebar) .sidebar-pane {
inset-block-start: 0;
}
body:has(.starlight-view-modes-zen-mode-sidebar) .right-sidebar-container {
display: none;
}
body:has(.starlight-view-modes-zen-mode-sidebar) footer {
display: none;
}
body:has(.starlight-view-modes-zen-mode-sidebar):has(#starlight__sidebar)
main
.sl-container {
margin: 0 auto;
}
body:has(.starlight-view-modes-zen-mode-sidebar):has(#starlight__sidebar)
.main-frame {
padding-inline: 0;
}
@media (min-width: 50rem) {
body:has(.starlight-view-modes-zen-mode-sidebar):has(#starlight__sidebar)
main {
width: calc(100vw - var(--sl-sidebar-width) - var(--sl-sidebar-pad-x));
margin-left: var(--sl-sidebar-width);
}
}
}