question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

image

After:

image

Before:

image

After:

image

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:17
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
e3diocommented, Mar 11, 2022

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

2reactions
OnkarRuikarcommented, Mar 9, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

color - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content ......
Read more >
CSS Techniques for WCAG 2.0 - W3C
The styleseet for a Web page uses the CSS background property to create rounded corners on elements. Example Code: … <style type="text/css"> div#theComments...
Read more >
Remove white space between header and body - css
Just set margin:0 in your h1 tag. header { width: 100%; height: 10em; background-color: #345cd7; position: relative; margin: 0; padding: 0; } ...
Read more >
Chapter 4. Organizing the Page:Layout of Page Elements
You can set them up in many different ways, such as by using whitespace, high contrast, big chunky fonts, spots of “interesting” color,...
Read more >
Chapter 9 Flashcards - Quizlet
display copy over a story or article within a document, same font as body but ... inside margin or blank space between two...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found