A slight restyling of MDN's Web Docs

mdn.md

Back in August 2025, the MDN Web Docs rolled out a redesign that made reading the website so much harder to read on the eyes. I really didn't like it, so I quickly wrote up a style that's half-inspired by its previous design, and half-based on what I personally think looks nice.

The headings are boldened like with the previous design, and the sidebars are lowered in opacity until they're hovered on. Paddings everywhere too wherever it's nice.

---

Here's the CSS if you wanna drop it onto a style extension like Stylus. I'm putting it under MIT, so feel free to do whatever you want with it:

/* Main layout */

.left-sidebar,
.reference-toc {
    transition: 0.15s opacity;
    opacity: 50%;
}

.left-sidebar:hover,
.reference-toc:hover {
    opacity: 70%;
}

.reference-layout {
    gap: 16px;
    margin-top: 16px;
}

.reference-toc li a {
    padding: 8px 12px;
}

.reference-layout .reference-layout__header h1,
.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4 {
    font-weight: var(--font-weight-bold);
}

@media (width < calc(49rem)) {
    .reference-layout {
        margin-top: 32px;
    }
}

:is(.content-section dl) dd {
    margin-left: 2.4em;
}

---

_{Here's what that page normally looks like, for reference.}