/* ============================================================================ stabilizer.css — LOAD STABILIZERS Loaded FIRST, in , on every page. (Replaces 00-first-paint.css.) The analogy: utility.css holds reusable helpers, this file holds stabilizers — rules that keep the page from jumping while it loads. WHY IT IS NEEDED Each component links its own stylesheet at the spot where it is used, in the . Until that stylesheet has arrived, its images and icons fall back to their natural size — 01-type-color.css only says img, svg { max-width: 100%; height: auto }. So the logo (width="1618") filled the whole screen for a moment, an inline SVG icon without a width (the lock of a members-only document) stretched across its box, and a card photo took the full page width. WHAT A STABILIZER MAY DO Only give an element the SAME size, shape or grid its component gives it (or a neutral icon size). No colours, no spacing, no decoration. The component's own rule takes over as soon as it has loaded. Add a stabilizer here whenever something jumps on load — and nothing else. CONTENTS 1 Inline icons, the lock 2 The logo 3 Photos inside a component frame (cards, portraits, avatars, votes) 4 Grids of photos (card grid, portrait grid) ========================================================================== */ /* ---- 1 Inline icons ----------------------------------------------------------- An SVG without a width attribute gets an icon size, not the full width. :where() = zero specificity, so every component rule wins. The height follows from the viewBox (height: auto in 01-type-color.css). */ :where(svg:not([width])) { width: 1.25em; } /* The lock in front of a members-only document — the same size as 262-php-13-micro-attachment.css. */ .x-attach__lock { display: inline-flex; vertical-align: -.1875em; } .x-attach__lock svg { width: 1.0625rem; height: 1.0625rem; } /* ---- 2 The logo ----------------------------------------------------------------- The same heights as 262-php-10-mainnav.css (53px; 38px up to 640px). A class selector, not :where(): 01-type-color.css sets img { height: auto }, which would otherwise win. */ .x-nav__logoimg { display: block; height: 53px; width: auto; } @media (max-width: 640px) { .x-nav__logoimg { height: 38px; } } /* ---- 3 Photos inside a component frame ------------------------------------------- The frame keeps its shape before the component CSS arrives, and the photo fills the frame instead of showing at its natural size. Same values as the component files named in each comment. */ /* 262-php-02-card.css — card photo 3:2 (catalogue 4:5), author avatar 1.75rem */ .x262-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; } .x262-card-grid--goods .x262-card__media { aspect-ratio: 4 / 5; } .x262-card__avatar { display: block; width: 1.75rem; height: 1.75rem; overflow: hidden; } /* 262-php-04-member-card.css — portraits: tile square, row 40px, inline 56px, organiser 36px, mini 30px */ .x262-member--tile .x262-member__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; } .x262-member--row .x262-member__media { width: 40px; height: 40px; overflow: hidden; } .x262-member--inline .x262-member__media { width: 56px; height: 56px; overflow: hidden; } .x262-member--organiser .x262-member__media { width: 36px; height: 36px; overflow: hidden; } .x262-member--mini .x262-member__media { width: 30px; height: 30px; overflow: hidden; } /* 262-php-06-comment-thread.css — avatar 36px, reply 30px */ .x262-comment__avatar { width: 36px; height: 36px; overflow: hidden; } .x262-comment--reply .x262-comment__avatar { width: 30px; height: 30px; } /* Every photo in one of the frames above fills it. */ :where(.x262-card__media, .x262-card__avatar, .x262-member__media, .x262-comment__avatar) > img { width: 100%; height: 100%; object-fit: cover; } /* 262-php-02-card.css — a card WITHOUT a photo shows the logo: 38 % of the frame, centred. Without this the logo (1618 px wide) filled the whole frame for a moment and then shrank. */ .x262-card__media--none { display: grid; place-items: center; } .x262-card__media--none > img { width: 38%; height: auto; object-fit: contain; } /* 262-php-17-vote-list.css — the photo of a vote: its 10rem column */ .x262-vote__media { display: block; max-width: 10rem; } /* ---- 4 Grids of photos -------------------------------------------------------- Without its grid a card or a portrait took the full page width, and its photo with it. The columns are the same as in the component files. */ /* 262-php-02-card.css */ .x262-card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .x262-card-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x262-card-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .x262-card-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 262-php-04-member-card.css */ .x262-member-list { display: grid; gap: 1.5rem; } .x262-member-list--tile { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .x262-member-list--tile[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .x262-member-list--tile[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .x262-card-grid[data-columns="4"], .x262-member-list--tile[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .x262-card-grid, .x262-card-grid[data-columns="2"], .x262-card-grid[data-columns="3"], .x262-card-grid[data-columns="4"] { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .x262-member-list--tile, .x262-member-list--tile[data-columns="3"], .x262-member-list--tile[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }