Whitespace, Header styling, code background contrast, remove 3rd column, etc

I’m adding CSS styles here for people who need to use this site for work and get things done: less whitespace, better headers, full screen width, sidebar element spacing, code background contrast, scrollbar styling, always open search input, sticky top headers, darker dark mode, and other misc. updates: use extension like Stylus to add styles

Click to expand CSS styles

h1, h2, h3, h4 {
    margin: .75rem 0 !important;
}
h1, h2 {
    font-weight: bold;
}
h2 {
    font-size: 1.6rem;
}
h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-left: 1rem !important;
}
p {
    padding-left: 1rem;
    line-height: 150% !important;
    margin: .75rem 0 !important;
}
a {
    padding: 0 !important;
}
a > code { 
    color: var(--text-link);
}
pre {
    padding: 0.45rem 0.7rem;
    margin: 0.75rem 0.5rem 0.5rem 1rem;
}
code {
    background: hsl(240deg 10% 95%);
}
pre {
    background: hsl(240deg 10% 96%);
}
.dark code {
    background: hsl(247deg 10% 20%);
}
.dark pre {
    background: hsl(247deg 10% 10%);
}
pre code {
    background: none !important;
}
body #sidebar-quicklinks code {
    background: none;
    padding: 0;
}
body.dark {
    background: #000 !important;
}
#content {
    padding: 0 .5rem 0 .75rem;
    box-shadow: -5px 0 5px -5px #888;
    overflow-x: hidden;
}
.logo svg {
   margin-top: 0;
}
.main-wrapper .main-content, .main-wrapper .sidebar, .main-wrapper .toc{
    padding-top: 0;
    padding-bottom: 0;
}
.main-wrapper {
    padding-left: 0.5rem;
    padding-right: 0rem;
}
.main-wrapper {
    gap: 0rem;
}
.article-actions-container {
    position: sticky;
    top: 33px;
    z-index: 99;
}
.dark .article-actions-container {
    background: #000000;
}
.top-navigation {
    position: sticky;
    top: 0;
}
.dark .top-navigation {
    background: #000000;
}
#sidebar-quicklinks {
    top: 65px;
    max-height: calc(100vh - 65px);
    overflow-x: hidden;
}
.main-page-content dl dt {
    margin-top: .5rem;
}
.sidebar li, .sidebar summary {
    line-height: 110%;
    margin-bottom: 0rem;
}
.sidebar li strong {
    margin: 0.5rem 0;
}
.sidebar li details {
    margin: 0;
}
.sidebar details ol {
    margin: 0.25rem 0.5rem;
    padding-left: 0.75rem;
}
.main-wrapper {
     max-width: unset;
}
.document-toc-list.document-toc-list li {
    margin: 2px 0;
}
.document-toc {
    margin-bottom: 0rem;
}
.document-toc-link.document-toc-link:not(.button) {
    padding: 0 0 0 .5rem !important;
}
.toc {
    display: none !important;
}
.main-page-content ol li, .main-page-content ul li {
    margin: 0.25rem 0;
    line-height: 150%;
}
.main-page-content ol, .main-page-content ul {
    margin: 0.5rem 0 0.5rem;
}
.main-page-content dl dt {
    margin-left: 1rem;
    margin-top: 0.5rem;
}
.main-page-content a:link, .main-page-content a:visited {
    text-decoration: none;
}
.main-page-content a:hover {
    text-decoration: underline;
}
.container {
    max-width: 100%;
}
.callout {
    padding: 0rem;
    gap: 0;
    margin: 1rem 0;
    text-align: center;
}
.breadcrumb:hover span, .breadcrumb-current-page:hover span {
    text-decoration: underline;
}
.close-search-button {
    display: none;
}
.search-button {
    display: none;
}
.top-navigation-main .header-search {
    max-width: 280px;
}
#top-nav-search-q {
    height: 28px;
    padding: 0 10px;
    margin: 2px 0px;
}
.switch .slider {
    background-color: var(--text-link);
}
.dark .switch .slider {
    background-color: var(--text-secondary) !important;
}
.mdn-cta-container, .auth-container {
    display: none;
}
@media screen and (min-width: 769px) {
    .main-wrapper {
        grid-template-columns: min(250px, 20%) 1fr;
    }
    .breadcrumbs-container li {
        display: inline-flex !important;
    }
    .top-navigation-main .search-form {
        display: block;
    }
    .top-navigation-main .toggle-search-button {
        display: none;
    }
}
@media screen and (min-width: 1200px) {
    .main-wrapper {
        grid-template-columns: min(250px, 20%) 1fr;
        grid-template-areas: "sidebar main";
    }
    .main-wrapper .in-nav-toc {
        display: block;
    }
}
:root {
    --top-nav-height: 1rem;
}
:target {
    scroll-margin-top: 70px;
}
::-webkit-scrollbar {
    width: 10px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
}
::-webkit-scrollbar-track {
    background: #eee;
}
.dark ::-webkit-scrollbar-track {
    background: hsl(0deg 0% 5%);
}
.dark ::-webkit-scrollbar-thumb {
    background: hsl(0deg 0% 15%);
}

Before:

After:

Before:

After:

[e3dio]

There is special CSS trick to fix that for sticky headers, check my CSS for rule:

:target {
    scroll-margin-top: 70px;
}

This depends on the height of the combined headers which in my CSS includes the main header and is shorter than normal

[OnkarRuikar]

We can have search box above Table of Contents(TOC) and only breadcrumbs sticky.