Wikipedia's New Design

<rant>

I DON’T LIKE IT. However, I do like that the Table of Contents now follows you as you scroll. On the other hand, I don’t like the whitespace everywhere. I want more information on my screen, not more whitespace.

In Appendix A, I wrote a quick custom Stylus CSS override to reduce the gap between the columns and in Appendix B, a Greasemonkey script to make Wikipedia open as expanded by default. These two overrides are largely customized to my screen. You may have to tweak it for your own usage.

</rant>

Footnotes

Read this related reddit post where people express their satisfaction and/or dissatisfaction.

Appendix A

This is a CSS script override that reduces the column gap in Wikipedia’s grid layout and reduces the margins on both left & right sides. Stylus is the extension I use to restyle websites/webpages.

@media screen and (min-width: 1000px) {
    .mw-page-container-inner {
        margin-left: -1em;
    }

    .vector-feature-page-tools-disabled .mw-page-container-inner {
        column-gap: 0px;
    }

    /* For some reason this has to be set in both 1000px & 1200px */
    .mw-page-container {
        padding-right: 3em;
    }
}

@media screen and (min-width: 1200px) {
    /* For some reason this has to be set in both 1000px & 1200px */
    .mw-page-container {
        padding-right: 3em;
    }
}

Appendix B

This is javascript to make Wikipedia open by default. I use Greasemonkey to do this for Firefox. Tampermonkey can also be used for other browsers. Although there is a way to add CSS using Greasemonkey, it’s a bit annoying and I’ll stick to Stylus because I’ve already used it for a few websites.

There is probably a better way to do this, but this was super fast and simple. I don’t know what I really wrote because I just copy-pasta-ed code from StackOverflow [1] and W3Schools [2]. I will still not learn javascript.

[1] - https://stackoverflow.com/a/51687163

[2] - https://www.w3schools.com/JS/js_array_iteration.asp

// ==UserScript==
// @name Default Wikipedia (EN) Expanded
// @description This is a quick little hack to have Wikipedia (EN) expanded by default on opening
// @version 1
// @grant none
// @match http://en.wikipedia.org/*
// @match https://en.wikipedia.org/*
// ==/UserScript==

document.querySelectorAll("body").forEach(element => {
  element.removeAttribute('class');
});

function addExpandedClass(value, iter, array) {
  document.body.classList.add(value);
}

expandedClassList = [
    "skin-vector",
    "skin-vector-search-vue",
    "vector-toc-pinned",
    "mediawiki",
    "ltr",
    "sitedir-ltr",
    "mw-hide-empty-elt",
    "ns-0",
    "ns-subject",
    "mw-editable",
    "page-Nothing_technology_company",
    "rootpage-Nothing_technology_company",
    "skin-vector-2022",
    "action-view",
    "vector-feature-language-in-header-enabled",
    "vector-feature-language-in-main-page-header-disabled",
    "vector-feature-language-alert-in-sidebar-enabled",
    "vector-feature-sticky-header-disabled",
    "vector-feature-sticky-header-edit-disabled",
    "vector-feature-page-tools-disabled",
    "vector-feature-page-tools-pinned-disabled",
    "vector-feature-main-menu-pinned-disabled",
    "vector-feature-limited-width-content-enabled",
    "uls-dialog-sticky-hide",
    "vector-feature-limited-width-disabled"
];

expandedClassList.forEach(addExpandedClass);