html { padding-bottom: 30em; padding-bottom: calc(100vh - 30px); } body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; border-bottom: red dotted 30px; } img { margin: 2px; max-width: 325px; } .row { padding-bottom: 3em; } .btn-link { font-weight: 400!important; } .btn-link:hover, .btn-link:focus { text-decoration: none !important; } .card { background-color: transparent!important; background-clip: border-box; border: none!important; } .card-header { padding: .75rem 1.25rem; margin-bottom: 0; background-color: transparent!important; border-bottom: 1px solid rgba(0,0,0,.125)!important; } summary > * { display: inline; } summary { padding-top: 0.5em; } /** */ nav[data-toggle="toc"] { top: 42px; } /* small screens */ @media (max-width: 768px) { /* override stickyness so that the navigation does not follow scrolling */ nav[data-toggle="toc"] { margin-bottom: 42px; position: static; } /* PICK ONE */ /* don't expand nested items, which pushes down the rest of the page when navigating */ nav[data-toggle="toc"] .nav .active .nav { display: none; } /* alternatively, if you *do* want the second-level navigation to be shown (as seen on this page on mobile), use this */ /* nav[data-toggle='toc'] .nav .nav { display: block; } */ }