starlight-view-modes
Version:
Starlight plugin adding view mode capabilities to your documentation website.
46 lines (43 loc) • 1.07 kB
CSS
@layer starlight, zen-mode;
@layer zen-mode {
body:has(.starlight-view-modes-zen-mode-table-of-contents-footer)
header.header {
display: none;
}
body:has(.starlight-view-modes-zen-mode-table-of-contents-footer) nav {
top: 0;
inset-inline-start: 0;
}
@media (min-width: 50rem) {
body:has(.starlight-view-modes-zen-mode-table-of-contents-footer)
#starlight__sidebar {
display: none;
}
}
body:has(.starlight-view-modes-zen-mode-table-of-contents-footer):has(
#starlight__sidebar
)
main {
width: 100vw;
}
@media (min-width: 72rem) {
body:has(.starlight-view-modes-zen-mode-table-of-contents-footer):has(
#starlight__sidebar
)
main {
width: calc(
100vw -
(
var(--sl-sidebar-width) +
(100vw - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
)
);
}
}
body:has(.starlight-view-modes-zen-mode-table-of-contents-footer):has(
#starlight__sidebar
)
.main-frame {
padding-inline: 0;
}
}