/* * shared-base.css — cross-site base guards for the haugnes-family sites. * * Symlinked into each site's www/css/ (like js/hjs.js) and linked FIRST in the page * , so a site's own stylesheet can still override anything here. Keep it MINIMAL * and defensive — only rules that are safe on every site. This is the home for the * "solve it once, everywhere" fixes so we don't re-solve them per site. * * Edit in place here → commit in the PHP-FUNCTIONS repo → pull on other servers. */ /* --- iPhone / narrow-screen "table breakout" ------------------------------------ * * Symptom: a table (or any wide block) is wider than the phone viewport, so the whole * page scrolls sideways and content bleeds off the right edge. * * Fix, in two static rules — no per-table markup, no JS, no DOM changes: * 1. The page can never scroll sideways. `clip` (NOT `hidden`) because clip does not * create a scroll container, so position:sticky headers/sub-navs keep working. * 2. A wide table scrolls inside its own box instead of being clipped away. * display:block is what lets a honour overflow-x. * Covers every current, future, and AJAX-rendered table automatically. */ html, body { overflow-x: clip; } @media (max-width: 640px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }