diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/base/_layout.scss index 42bfc4d..2666595 100644 --- a/src/assets/styles/base/_layout.scss +++ b/src/assets/styles/base/_layout.scss @@ -1,3 +1,37 @@ +/* + * Styles that affect the overall layout. Since Technote is built on + * sphinx-basic-ng as the base theme, these styles primarily work with + * the base theme's sb- classes. + */ + +.sb-container { + margin-top: var(--tn-space-md-fixed); +} + +/* Style the prmary sidebar when it's a popover. */ +#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary { + background-color: white; + box-shadow: 10px 5px 5px rgb(161, 161, 161); + border-right: 1px solid black; +} + +#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary { + background-color: white; + box-shadow: -5px 0 5px rgb(161, 161, 161); + border-left: 1px solid black; + padding-left: var(--tn-space-md-fixed); +} + +#sb-sidebar-toggle--secondary:checked ~ .sb-container .technote-toc-header { + margin-top: var(--tn-space-md-fixed); +} + +.sb-sidebar-overlay { + // Fuzz out the content slightly + backdrop-filter: blur(1.5px) opacity(0.7) brightness(150%); + background-color: rgba(0, 0, 0, 0); +} + /* Highlight key containers for debugging. */ /* .sb-article { border: 1px solid red; @@ -117,6 +151,12 @@ .match-content-width { width: 32rem; } + + // Reset the pop-over specific styling for the sidebar. + .sb-sidebar-primary { + box-shadow: none; + border-right: none; + } /* h1::after { content: ' 76'; } */ @@ -162,5 +202,5 @@ * Primary sidebar */ .sb-sidebar-primary { - padding: var(--tn-space-xs-fixed); + padding: var(--tn-space-md-fixed); }