/* Глинка — /changelog/ («Что нового»). Loaded after legal.css, which already supplies the :root tokens, the nav, the reading column, the prose styles and the footer. This file adds only what the entry list itself needs. Light theme only, like the rest of the static site (AUTHORING). */ /* scroll-margin lands a /changelog/#slug link clear of the sticky nav. It sits on .entry, not on the h2, because .entry is the element carrying the id and therefore the one the browser scrolls to. */ .changelog .entry{ padding:30px 0 34px; border-top:1px solid var(--line-soft); scroll-margin-top:78px; } .changelog .entry:first-of-type{ border-top:0; padding-top:6px; } .changelog .entry:last-of-type{ padding-bottom:6px; } .changelog .entry-date{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:0; } .changelog .entry h2{ font-size:clamp(19px,2.2vw,23px); margin:8px 0 12px; } .changelog .entry p:last-child{ margin-bottom:0; } /* An anchored entry has to clear the sticky bar, which is now three different heights (RUS-386 moved the nav's wrap point to 957 — four links plus the two CTAs need 958px to sit on one line). Measured in Chrome 152 on this page: >=958 65px one row 459-957 96px two rows: brand + CTAs, links below <=458 126px three: the link list itself takes a second text row Each value keeps the ~13px of air that the 78px default leaves at desktop width, so a linked entry lands just under the bar rather than against it. */ @media (max-width:957px){ .changelog .entry{ scroll-margin-top:109px; } } @media (max-width:458px){ .changelog .entry{ scroll-margin-top:139px; } } .changelog .entry-img{ margin:18px 0 4px; } .changelog .entry img{ display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:12px; } /* A portrait image is a phone screenshot, and it is capped here (RUS-389). mobile.png is a whole 780x1688 phone viewport, which fills 720x1556 in this column — taller than two screens, and the tallest thing on the page. The class is decided at build time from the PNG's own IHDR rather than from a flag on the entry, so every future portrait shot arrives already capped. 560px is the phone at about a third of native: the bottom bar, the mic button and the sheet all stay legible while the entry fits on one screen. width:auto against the height:auto above is what preserves the aspect ratio once the height is the binding constraint — the image lands at 259x560 — and the auto margins centre that narrower box in the 720px column. The border and radius are inherited from the rule above: at this size the phone reads as a device rather than as a floating column, which is exactly what they are there for. */ .changelog .entry-img-portrait img{ max-height:560px; width:auto; margin:0 auto; } /* On a phone, the viewport is the better ruler than a fixed 560px. */ @media (max-width:680px){ .changelog .entry-img-portrait img{ max-height:70vh; } } /* «Аналог в Notion: X» — the parity footer (RUS-385). Mono and muted, like the date at the top of the entry, so it reads as one more piece of metadata about the entry rather than as a closing sentence of it. No border, no icon, no Notion mark: the name is used nominatively and nothing here should look like a badge. 18px of top margin is one value for both endings an entry can have. It collapses against the 15px below a paragraph and against the 4px below .entry-img, so the gap above the footer is the same whether the entry ends in prose or in a screenshot — and slightly wider than the 15px paragraph rhythm, which is what sets the line apart without drawing a rule to do it. */ .changelog .entry-notion{ margin:18px 0 0; font-family:var(--mono); font-size:0.85em; color:var(--muted); } /* ---------- table of contents ---------- */ /* ONE