My CSS overrides for Wikipedia

wikipedia.css

/**
 * Custom Wikipedia Styles
 *
 * @author Gavin Elster
 * @source https://gist.github.com/elstgav/c4f1d5856adf6ef9c696d8a0091777e0
 *
 * To install, you must have a user account setup with Wikipedia.org. Then:
 * 1. Go to Preferences > Appearance
 * 2. Click on “Shared CSS […] for all skins:” > “Custom CSS”
 * 3. Click on “Edit source”
 * 4. Paste this code into the editor
 * 5. Click “Publish changes”
 *    (ignore any error warnings—the editor is unaware of new CSS syntax)
 *
 * @see https://en.wikipedia.org/wiki/Wikipedia:Customisation#Personal_CSS
 */


/* Options ------------------------------------------------------------------ */

:root {
  /* Feature Flags: 0 = off; 1 = on; */
  --feature-flag--debugger:           0;
  --feature-flag--custom-styles:      1;
  --feature-flag--link-underlines:    1;
  --feature-flag--large-screens:      1;
  --feature-flag--base-typography:    1;

  --font-family-sans-serif:           Avenir Next, Avenir, sans-serif;
  --font-family-serif:                Charter, serif;

  --ui-font-family:                   var(--font-family-sans-serif);
  --body-font-family:                 var(--font-family-serif);

  --body-font-size:                   18px;
  --body-font-size--breakpoint-lg:    21px;
  --body-font-size--breakpoint-xl:    23px;

  --font-size-sm:                     14px;
  --font-size-xs:                     12px;

  --body-line-height:                 1.57;
  --body-paragraph-spacing:           1em;

  --link-hover-color:                 rgb(6, 69, 173);
  --link-underline-thickness:         from-font;

  --content-max-width:                800px;
  --content-max-width--breakpoint-lg: 900px;
  --content-max-width--breakpoint-xl: 1000px;
}


/* Custom Styles ------------------------------------------------------------ */
@container style(--feature-flag--custom-styles: 1) {

  /* Large Screen Adjustments ----------------------------------------------- */
  @container style(--feature-flag--large-screens: 1) {
    body { --debug: 'Breakpoint: Default' }

    /**
     * NOTE: Breakpoints are hard-coded. As of 2024-07-31 there isn’t a good way
     * to use custom variables in @media queries.
     *
     * SEE: https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
     */
    @media (min-width: 1200px) {
      body {
        --debug: 'Breakpoint: LG';
        --body-font-size: var(--body-font-size--breakpoint-lg);
        --content-max-width: var(--content-max-width--breakpoint-lg);
      }
    }

    @media (min-width: 1400px) {
      body {
        --debug: 'Breakpoint: XL';
        --body-font-size: var(--body-font-size--breakpoint-xl);
        --content-max-width: var(--content-max-width--breakpoint-xl);
      }
    }
  }

  /* Base Typography -------------------------------------------------------- */

  @container style(--feature-flag--base-typography: 1) {
    body {
      font-family: var(--ui-font-family);
    }

    .mw-body-content {
      font-family: var(--body-font-family);
      font-size: var(--body-font-size);
      line-height: var(--body-line-height);
    }

    .firstHeading,
    .mw-body-content {
      max-width: var(--content-max-width);
      margin: auto;
    }

    #mw-content-text {
      .reference a {
        color: inherit;
      }

      .metadata {
        font-family: var(--ui-font-family);
        font-size: var(--font-size-xs);
        margin-block-end: var(--body-paragraph-spacing);
      }

      p {
        margin-block: var(--body-paragraph-spacing);
      }

      .toc,
      table,
      .thumbcaption,
      .reflist,
      cite.citation,
      pre {
        font-size: var(--font-size-sm) !important;
      }
    }
  }


  /* Thin Link Underlines --------------------------------------------------- */

  @container style(--feature-flag--link-underlines: 1) {
    a,
    .mw-underline-always a,
    .toctoggle a,
    .collapseButton a {
      --debug: 'a';

      text-decoration: none;
    }

    #mw-content-text a {
      &:not([class]):not([href^="#cite_"]):not([href^="/w/index.php"]):not([href^="#L-"]),
      &.mw-redirect,
      .toctext {
        --debug: 'body link';
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: var(--link-underline-thickness);

        &:hover {
          --debug: 'hover';

          color: var(--link-hover-color);
        }
      }
    }

    /* Overrides ------------------------------------------------------------ */

    /* Disable underline on TOC numbers, re-apply on link text */
    .toc a {
      text-decoration: none !important;

      .toctext {
        text-decoration: underline !important;
      }
    }
  }


  /* Debugging -------------------------------------------------------------- */

  @container style(--feature-flag--debugger: 1) {
    :where(
      body,
      .firstHeading,
      .mw-body-content,
      #mw-content-text a
    ) {
      position: relative;

      &::before {
        all: initial;

        display: block;
        content: var(--debug);

        position: absolute;

        top: 0;
        right: 0;

        padding: .1em .2em;
        border: .5px solid rgba(200 0 0 .5);
        border-radius: 2px;

        background: rgba(200 0 0 .6);
        backdrop-filter: blur(1px);

        color: white;
        font-size: 8px;
        font-family: monospace;
        line-height: 1;
        white-space: nowrap;

        z-index: 1000;
      }
    }

    body::before {
      font-size: 2rem;
    }

    #mw-content-text a {
      outline: 1px dotted rgba(0 0 0 .1);
    }
  }
}