/* ============================================================================= SPONSORED SLOTS — sitewide ----------------------------------------------------------------------------- Four levers, and none of them are in your HTML: Everything is per section — cs2, rust, irl — so a sponsor can buy one section without touching the other two. 1. SWAP THE CREATIVES replace the 4 files in /partner/img/
/ , same names, exported at 2x: p-lead.webp 728x90 (desktop top banner) p-wide.webp 970x250 (mobile top banner + billboard) p-tall.webp 300x600 (sidebar + native card) p-card.webp 300x250 (mobile fallback for both) Only that section changes. No page edits needed. 2. SWAP THE DESTINATION one line per section in /go-links.php : 'sponsor-cs2' => 'https://sponsor.com/r/CODE', 'sponsor-rust' => ... 'sponsor-irl' => ... 3. TURN SECTIONS OR the SWITCHBOARD below — uncomment a line to hide FORMATS OFF that section or that format everywhere. 4. REMOVE EVERYTHING uncomment the MASTER SWITCH below. To rip the markup out of the pages for good instead: python3 partner/build_ads.py remove Class names here deliberately avoid "ad", "banner", "sponsor" and IAB sizes — generic ad-blocker filters match those and were hiding the slots entirely. Keep it that way when editing. ========================================================================== */ /* ===== MASTER SWITCH ====================================================== Uncomment the next line to pull every sponsored slot sitewide. */ /* .unit-wrap, .unit-wide-wrap, .unit-rail-wrap, .unit-rect-wrap, .unit-tall-wrap, .unit-host.unit-host { display: none !important; } */ /* ===== SWITCHBOARD ======================================================== Uncomment a line to switch that part OFF. Everything not commented runs. --- by section --------------------------------------------------------- e.g. a sponsor who only bought Rust: uncomment the cs2 and irl lines. */ /* [data-sec="cs2"] { display: none !important; } */ /* [data-sec="rust"] { display: none !important; } */ /* [data-sec="irl"] { display: none !important; } */ /* --- by format ---------------------------------------------------------- e.g. they bought the top banner but not the sidebar. */ /* .unit-wrap { display: none !important; } top banner */ /* .unit-wide-wrap { display: none !important; } in-content */ /* .unit-rail-wrap { display: none !important; } left gutter */ /* .unit-rect-wrap { display: none !important; } 300x250 */ /* .unit-tall-wrap { display: none !important; } 300x600 */ /* .unit-host.unit-host { display: none !important; } native card */ /* --- one format in one section ----------------------------------------- combine the two: class first, then the section. */ /* .unit-tall-wrap[data-sec="rust"] { display: none !important; } */ /* ---------- the slot itself ---------- */ .unit{position:relative;display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.10);border-radius:12px;text-decoration:none; overflow:hidden;box-sizing:border-box;cursor:pointer} .unit .unit-art{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* is inline by default and would collapse inside the flex slot */ .unit picture{display:block;width:100%;height:100%} /* the disclosure label, legible over any artwork */ .unit .unit-tag{position:absolute;top:8px;left:8px;z-index:2; font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase; color:rgba(255,255,255,.82);background:rgba(0,0,0,.55);padding:3px 7px;border-radius:6px} /* ---------- lead: 728x90 top banner ---------- */ .unit-wrap{margin:0 auto 40px;display:flex;justify-content:center;padding:0 15px} .unit-lead{width:728px;max-width:100%;aspect-ratio:728/90} /* ---------- wide: 970x250 in-content billboard ---------- */ .unit-wide-wrap{margin:10px auto 40px;display:flex;justify-content:center;padding:0 15px} .unit-wide{width:970px;max-width:100%;aspect-ratio:970/250;border-radius:12px} /* ---------- rail: 300x600 pinned in the left page gutter ---------- The content column is a fixed 1300px, so on a wide monitor there is dead space either side. Fixed rather than sticky: it stays put for the whole article and cannot interact with anything in the page flow. It only appears once the gutter is wide enough to show it at a readable size — 1860px is where it clears 240px wide. Below that it stays hidden, which is most laptops. Raise or lower the breakpoint here if you want it on more screens (smaller) or fewer (bigger). The wrapper is absolutely positioned inside .blog-layout and spans its full height, so the rail begins level with the first line of the article rather than up under the header. The unit inside it is sticky, so it then follows the reader down to the end of the article. */ .unit-rail-wrap{display:none} @media(min-width:1860px){ :root{--rail-w:min(300px, calc((100vw - 1300px)/2 - 40px));} .blog-layout{position:relative} .unit-rail-wrap{display:block;position:absolute;top:0;bottom:0; width:var(--rail-w);left:calc(-1 * (var(--rail-w) + 24px))} .unit-rail{position:sticky;top:110px;display:block;width:100%;aspect-ratio:300/600} } /* ---------- rect: 300x250 (not placed by default) ---------- Static on purpose. Anything sticky up here would have the cards below it scroll underneath while it was pinned. */ .unit-rect-wrap{margin:0 auto 20px;width:300px;max-width:100%} .unit-rect{width:100%;aspect-ratio:300/250} /* ---------- tall: 300x600 sticky in the right rail ---------- Used on the posts whose own sidebar is NOT pinned, so the rail is free. It is the last child of the rail on purpose: a sticky element leaves its siblings in normal flow and they scroll underneath it, so with nothing after it there is nothing to slide. The :has() gives that column the article's full height, which is what the sticky unit needs to travel down — a content-height rail would pin it for about a screen and then let it go. */ .blog-sidebar:has(> .unit-tall-wrap){align-self:stretch} .unit-tall-wrap{position:sticky;top:110px;margin:20px auto 0; flex:0 0 auto;width:300px;max-width:100%} .unit-tall{display:block;width:100%;aspect-ratio:300/600} @media(max-width:1024px){ .blog-sidebar:has(> .unit-tall-wrap){align-self:auto} .unit-tall-wrap{position:static;margin:20px auto} } /* ---------- card: native unit inside a card grid ---------- The creative fills the whole cell rather than sitting in the card's 22px gutter, and it is taken out of flow so its intrinsic height can't stretch the grid row past the real cards beside it. */ /* doubled class = specificity 0,2,0, which is what it takes to beat `.hub-grid-v2 .glass-card{padding:22px!important}` in premium-style.css */ .unit-host.unit-host{padding:0!important;border:0!important;overflow:hidden;display:block} .unit-card{width:100%;height:100%;min-height:260px;border-radius:28px} .unit-card > picture, .unit-card > img{position:absolute;inset:0;width:100%;height:100%} /* ---------- mobile ---------- */ @media(max-width:768px){ /* No 320x100 creative exists, and cropping the 728x90 into that box eats the logo and the promo code. Run the wide creative at its own ratio instead: banner-shaped, fully legible, ~90px tall. Drop the wrap's own side padding inside .main-container so the slot lines up with the page content column. */ .main-container .unit-wrap{padding:0!important} .unit-lead{aspect-ratio:970/250;max-width:100%;width:100%} /* the billboard and the sidebar both reshape to a 300x250 box down here */ .unit-wide{aspect-ratio:300/250;max-width:340px;border-radius:14px} .unit-tall{aspect-ratio:300/250;max-width:300px} /* single-column grid turns the native cell landscape */ .unit-card{aspect-ratio:300/250;height:auto;min-height:0;border-radius:20px} .unit-host.unit-host{border-radius:20px} }