/** * cd-global.css -- rules that have to apply on every page, not just the ones * that print a component block. Loaded from akd_template_css() in functions.php * with a filemtime version, next to custom.css. * * Hand maintained, like custom.css and search.css, and force tracked by a * negation in the theme .gitignore for the same reason: nothing under * resources/dist/styles is generated from a source file that would recreate it. * * ---------------------------------------------------------------------------- * 1. The 10px white margin down both sides of every full width band * ---------------------------------------------------------------------------- * * main.css carries `[class*=col]{width:100%;padding-right:10px;padding-left:10px}` * for the grid columns, and matches it, because the body class list * contains `wp-theme-casinocolada` and "casinocolada" contains "col". So the * whole document has had 10px of side padding, and every full width band -- the * geo menu, the page hero, section backgrounds -- stopped 10px short of the * viewport on both sides with the page background showing through. * * Zeroing it alone would move content, because that 10px is one half of the * 20px gutter below 788px: `.container` contributes the other 10px and is only * centred, rather than stretched, once the viewport is wide enough for its * max-width. Measured against the cascade in main.css, where `.container` is * max-width 768 from 768px, 990 from 992px and 1305 from 1230px, all border * box: * * container content, x from the left, today -> with this file * < 768px 100vw - 40 at x=20 -> unchanged * 768-787 shrinking from 728@20 to 747@20 -> 728 at x=20..29,5 * 788-991 unchanged * 992-1009 960 at x=20 (at 1000) -> 970 at x=15 * 1010-1229 unchanged * 1230-1324 1260 at x=20 (at 1300) -> 1280 at x=10 * >= 1325 unchanged * * The media query below restores the missing 10px as container padding under * 788px, which is where the container is never centred and where the gutter is * therefore load bearing. That band comes out identical. The three narrow bands * where the container is between "stretched" and "capped" move by up to 10px, * which is the whole cost of the change. * * ---------------------------------------------------------------------------- * 2. .container2, which is the site header and has no rule of its own * ---------------------------------------------------------------------------- * * templates/header.php:33 wraps the header in `

`, and * nothing anywhere styles that class: not main.css, not custom.css, not the * Customizer. It is a plain full width block, and the row inside it is * `.row.mx-n5`, which `[class*=row]` and `.mx-n5` between them give a -5px * horizontal margin. * * Today that -5px lands inside the body's 10px and stops 5px short of the * viewport. Take the body padding away and it hangs 5px off each edge, which is * 10px of horizontal overflow and a scrollbar on every page of the site. It is * the one thing on any page type that depends on the body padding: a sweep over * the front page, a casino review, a slot, a country page and three hero pages * found no other element with a negative horizontal margin outside a * `.container`. The sticky bar on a review, `.csy`, has one but is * `position:fixed`, so the body box is not its containing block and its * overflow is not in the document's scrolling area. * * 10px here puts it back exactly. Header content is at x=5 below the large * breakpoint and x=10 above it, before and after, because the -5px row and the * column's own padding are unchanged and only the 10px they are measured from * has moved from the body to this element. * * ---------------------------------------------------------------------------- * * `body[class*="col"]`, `body .container` and `body .container2` all carry one * extra element selector on purpose. wpspeed extracts and recombines stylesheets on the front * page and on search results and can land this file before main.css, so a tie * on specificity would be decided by an order we do not control. `.container * .container` is more specific than `body .container` and still wins, which is * correct: a nested container keeps its zero padding. */ body[class*="col"] { padding-left: 0; padding-right: 0; } body .container2 { padding-left: 10px; padding-right: 10px; } @media (max-width: 787px) { body .container { padding-left: 20px; padding-right: 20px; } }