MediaWiki:Common.css: Difference between revisions

Revision as of 15:25, 7 July 2026

/* CSS placed here will be applied to all skins */

/* ==========================================================================
   Responsive / mobile stylesheet for The Bloomington Chronicle
   MediaWiki 1.41 · Vector 2022 skin
   --------------------------------------------------------------------------
   Where to paste this:
     MediaWiki:Common.css   (recommended — applies to every skin, survives a
                              skin change, requires the interface-admin right)
     or MediaWiki:Vector-2022.css   (scopes it to the Vector 2022 skin only)

   IMPORTANT: this file only styles the *content area*. It assumes the viewport
   meta tag has already been fixed via $wgVectorResponsive = true; (preferred)
   or the Common.js fallback. Without that, the media queries below will not
   fire on real phones.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Overflow guards — safe at every width, no media query needed.
      Stops wide media from forcing horizontal scroll on the whole page.
   -------------------------------------------------------------------------- */

.mw-parser-output img,
.mw-parser-output video,
.mw-parser-output iframe {
    max-width: 100%;
    height: auto;
}

/* Long unbroken strings (URLs pasted as text, long file names) shouldn't
   blow out the layout. */
.mw-parser-output {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Preformatted / code blocks scroll internally instead of stretching the page. */
.mw-parser-output pre,
.mw-parser-output .mw-code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* --------------------------------------------------------------------------
   2. Tablet / narrow desktop (<= 850px)
      Floated thumbnails and infoboxes go full-width so text isn't squeezed
      into a thin column beside them.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 850px) {

    /* Modern <figure> thumbnails and legacy .thumb floats */
    .mw-parser-output figure[class*="mw-halign"],
    .mw-parser-output .thumb.tright,
    .mw-parser-output .thumb.tleft,
    .mw-parser-output .floatright,
    .mw-parser-output .floatleft {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1em !important;
        max-width: 100% !important;
    }

    .mw-parser-output .thumbinner {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Infoboxes (if any pages use them) become a full-width block */
    .mw-parser-output .infobox {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   3. Phone (<= 640px)
      Readability + tap-target tuning for the dated timeline lists that make up
      most of the Chronicle's topic pages.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 640px) {

    /* Slightly larger base text and roomier lines read better on small screens */
    .mw-body-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Pull the giant left indent off lists so entries use the full width.
       The timeline is one long nested <ul>, so reclaiming this space matters. */
    .mw-parser-output ul,
    .mw-parser-output ol {
        margin-left: 0;
        padding-left: 1.2em;
    }

    /* Breathing room between timeline entries + comfortable tap spacing for the
       clusters of bracketed [copy of report] [BSB coverage] links. */
    .mw-parser-output li {
        margin-bottom: 0.65em;
    }

    .mw-parser-output li a {
        /* keeps adjacent inline links from becoming one hard-to-tap blob */
        padding: 1px 0;
    }

    /* Year headings (h3) and section headings scale down so they don't wrap
       awkwardly, and get a touch more separation from the entries above. */
    .mw-parser-output h2 {
        font-size: 1.4rem;
    }

    .mw-parser-output h3 {
        font-size: 1.2rem;
        margin-top: 1.2em;
    }

    /* Wikitables: let the table scroll sideways inside its own box instead of
       stretching the page. display:block is what makes the overflow scroll
       work without a wrapper div (a small tradeoff: the table no longer
       auto-fits its container, but it stays fully readable). */
    .mw-parser-output table.wikitable {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mw-parser-output table.wikitable th,
    .mw-parser-output table.wikitable td {
        padding: 4px 6px;   /* tighter cells so more columns fit before scroll */
    }

    /* Galleries: let thumbnails wrap and shrink instead of overflowing */
    .mw-parser-output .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mw-parser-output .gallerybox {
        width: auto !important;
    }

    /* Caption text under images stays comfortably readable */
    .mw-parser-output figcaption,
    .mw-parser-output .thumbcaption {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}


/* --------------------------------------------------------------------------
   4. Small phone (<= 400px)
      Final squeeze for the narrowest common devices.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 400px) {

    .mw-parser-output ul,
    .mw-parser-output ol {
        padding-left: 1em;
    }

    .mw-parser-output h1,
    .firstHeading {
        font-size: 1.5rem;
        line-height: 1.25;
    }
}