/* ------------------------------------------------------------ faces the two faces travel with the page. font-display: block, not swap: swap paints a fallback and re-paints when the real face lands, and every line on the page visibly re-wraps. these are small files off the same origin; the wait is a moment. */ /* one file for both cuts and everything between. the RANGE is not decoration: this file's own default instance is 200, extra light. declare a single weight and the page goes pale. */ .p-untitled { /* Лист вывернут 21 августа, последним из четырёх, теми же числами, что license и documentation: прежняя шкала, пересчитанная так, чтобы КОНТРАСТ каждой ступени к грунту остался тем же, каким был на чёрном — ink 17.1:1, quiet 5.1:1, подвал 3.0:1, линейки 1.2 и 1.6. Иерархия страницы поэтому не поехала. Грунт #e8e8e8, а не белый: ровно тот же, что видно на index сквозь мишень, поэтому переход между листами не мигает. */ --bg: #e8e8e8; --ash-0: #000000; /* the ink */ --ash-2: #606060; /* nav, at rest */ --ash-3: #868686; /* footer */ --rule: #d2d2d2; /* hairlines */ --rule-lit:#b9b9b9; --lit: var(--ash-0); --sys-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sans: "Ronzino", var(--sys-sans); /* the mono's alternates: the second 'a', the second 'g', the alternate 6 and 9, the lifted asterisk and the alternate 'l'. safe on :root -- Ronzino carries no cv features at all, so these five can only ever reach the mono. */ /* the page gutter, and the two interior axes the old composition stood on. they are kept because the manual uses the same pair, so anything drawn here can still land on the site's grid. nothing below uses them yet. */ --page-pad: 28px; /* передний блок, те же числа, что на index */ /* кнопка стоит ровно на середине окна, и это выражение, а не подобранное число: 41.7 — высота шапки, 20 — верхнее поле регистра, дальше строка подписи, её собственный отступ и половина её высоты. Строка подписи взята выражением, а не числом: при 1.65 её коробка это кегль на 1.65, поэтому кнопка остаётся на середине при любом кегле подписи — иначе ползунок в tuner уводил бы её вниз. Держится на любой высоте окна. На той же середине стоит next, поэтому они идут одной строкой. */ --block-top: calc(50vh - 41.7px - 20px - var(--no-size) * 1.65 - var(--view-y) - var(--view-h) / 2); --block-left: 0px; --name-x: 0px; --view-x: 0px; --view-y: 5px; --no-size: 12px; --name-size: 24px; --view-w: 140px; --view-h: 15px; --view-size: 12px; --get-w: 210px; /* дверь: две трети от троицы в шапке, 315 */ --note-size: 11.5px; /* строка под дверью */ --note-gap: 3px; /* и её отступ от двери */ --no-track: 0.002em; --name-track: 0.05em; /* переход между страницами */ --slide: 620ms; /* вся длительность */ --dim: 0.25; /* до какой яркости гаснет старая */ --lift: 18%; /* насколько старая уходит вверх */ --lift-time: 0.6; /* на какой части хода она трогается */ --scale: 0.94; /* и во сколько ужимается, уходя вглубь */ --label-col: 140px; --label-gap: 32px; --in: 220ms; /* arrival */ --out: 90ms; /* departure is faster than arrival */ /* шапка. Те же числа, что на index, license и documentation: плашка плюс два поля, 14 + 9 + 9 = 32. Прежняя шапка была 49.45 (поле страницы плюс строка 13px mono), поэтому лист поднялся на 17.45. */ --mast-size: 11.5px; --mast-plate: 14px; --mast-padx: 3px; --mast-gap: 3px; --mast-radius: 2px; --mast-slot: 103px; --mast-track: 0.012em; --mast-inset: 10px; --mast-top: 9px; --mast-h: calc(var(--mast-plate) + var(--mast-top) * 2); /* the size of the two edition chips. carried from the archived page unchanged: everything inside a chip is expressed in em off this one number, so the shape holds at any size it is set to. */ --chip: 15px; /* how far the chip's LETTERS sit inside its box: the 0.615em padding plus the hairline, 10.225 at --chip 15. the price line is inset by this on both sides, so the two rows agree on the letters and not on the boxes -- which is what "$-" was failing to do, standing on the chip's right border while `sympathy` ended 10 short of it. THE KNOB, if the pair ever needs pulling apart again: raise it and the price line tucks further in, drop it to 0 and the line goes back to the chip's outer edge. it also sets the hang of the last unit past the spine, so the two stay in step by construction. */ --chip-inset: calc(0.615 * var(--chip) + 1px); /* the lift was -20%: the band was pulled UP into the bottom fifth of the picture, which was empty and paying rent. the picture is out, and with it gone the knob turns the other way -- it is now the air between the plate and the first band, and only that: .offer--lit sets its own margin-top to 0, so the second band never sees it. 3.5 x 64 = 224. the first gap is then 64 under the plate + 224 + 64 over the eyebrow = 352, against the 128 it stood at. taken off the marked-up screenshot, where the mark asked for about 215 more and the nearest half-step of --offer-top gives 224. */ /* THE KNOB. it was padding, which lives in the flow and therefore dragged the whole page down with it -- every pixel of offset was also a pixel of new emptiness. it is an offset off the plate's own resting place now, applied with position:relative, so it is purely visual: the flow, the page height and the first band do not see it at all. only the plate moves. negative goes up. 27.5svh is 237 on an 860-tall window, which puts the block where 35svh put it under the old meaning. the one thing to watch: this is unchecked, so a big enough value will slide the plate visually over the band below it. */ --plate-y: 27.5svh; /* THE SECOND KNOB, and the opposite kind to --plate-y. that one is position:relative and the page cannot feel it; this one is a margin and the page feels every pixel. that is the point -- it is asked to change the AIR, so everything below has to move. it was calc(var(--offer-top) * 3.5), which turned two things at once, the same 64 being the band's inner padding as well. plain px now: one number, one meaning. 224 is what the calc resolved to, so writing it out moved nothing. the whole first gap is 64 under the plate + this + 64 over the eyebrow = 352. only the first band takes it; .offer--lit sets its own margin-top to 0. 24 августа: 224 -> 0. Плита, под которую отмерялись эти 224, снята 21 августа, и над полосой не осталось ничего, кроме шапки -- они держали пустоту вместо картинки, которой больше нет. Затем 0 -> 15: весь текст листа опущен на пятнадцать пикселей. Только первая полоса берёт это число, .offer--lit обнуляет себе верх, поэтому вниз уезжает вся колонка разом. */ --offer-lift: 15px; /* the price line over each chip. two knobs, both in the flow of the unit, so neither touches anything outside the plate. SIZE was inherited from .plate at 13 and is its own number now. note it also drives the gap between name and amount, which is set in ch: at 13px a cell is 7.8, so the 2ch gap is 15.6 and grows with the size. and if the line ever gets wider than the chip beneath it, the unit widens to the line -- today it is narrower on both editions, 85.8 against 92.5 and 156.0 against 164.4. GAP is the distance down from the line to the button. */ --price-size: 12px; --price-gap: 4px; /* the band's own padding, top and bottom -- the air INSIDE it, not before it. a different question from the two above. */ --offer-top: 64px; --offer-bottom: 64px; } .p-untitled * { box-sizing: border-box; margin: 0; padding: 0; } .p-untitled { background: var(--bg); color: var(--ash-0); /* лист набирается гротеском, как и документы сайта. Моно остаётся там, где стоят машинные значения: реестры кодеков и контейнеров, и приколоченные вещи — шапка, блок, торговая полоса, подвал. Каждая из них объявляет моно у себя и потому не наследует. */ font-family: var(--sans); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: flex; flex-direction: column; min-height: 100svh; } /* a negative, not a colour. swapping the page's own two values follows any ground for free. */ .p-untitled ::selection { background: var(--ash-0); color: var(--bg); } .p-untitled a { color: var(--ash-0); text-decoration: none; border-bottom: 1px solid var(--rule-lit); transition: color var(--out), border-color var(--out); } /* содержание страницы ориентировано по центру: колонка встаёт посередине листа, строки центрируются в ней. реестры — исключение: сам блок центрируется, а ячейки внутри остаются по левому краю. */ .p-untitled .page { flex: 1; display: flex; flex-direction: column; padding: 0 var(--page-pad); } /* ---------------------------------------------------------- masthead Та же шапка, что на трёх других страницах: шесть плашек, числа с and2es.com, набраны Ronzino. Прежняя плита — `ashen one` и одна ссылка `docs` на общем грунте — снята 21 августа: с торговой не уводило ни на license, ни на почту, а это единственная страница, на которую ведут все остальные. ЛИПКАЯ, а не приколотая: на documentation и license шапка вынута из потока и содержимое подпирает её своим полем, здесь она осталась в потоке и занимает свои 32 сама. Итог тот же, правок меньше. Прежний слой правил (`.wordmark`, `nav` в 13px mono, отметка aria-current) снят целиком: у плашек состояния «ты здесь» нет ни на одной из четырёх страниц. */ .p-untitled .masthead { position: sticky; top: 0; z-index: 800; /* шапка стоит на ПОЛЕ ЛИСТА, а не на поле страницы: на трёх других она вынута из потока и меряется от края окна, здесь осталась в потоке и потому сидела внутри --page-pad — плашки уезжали на 28 внутрь и не совпадали с соседними страницами. Поле страницы вычитается, дальше работает собственное --mast-inset. */ margin: 0 calc(var(--page-pad) * -1); display: flex; align-items: center; gap: var(--mast-gap); padding: var(--mast-top) var(--mast-inset); background: transparent; } .p-untitled .mast-mid { position: absolute; left: 50%; /* ВЕРХ ЗАДАН ЯВНО, а не оставлен на статическое место. Пока полоса была в одну строку, разницы не было; со второй строкой троица поехала за ней вниз — она вынута из потока, и её статическое место считается по всей высоте полосы. */ top: var(--mast-top); transform: translateX(-50%); display: flex; gap: var(--mast-gap); } .p-untitled .mast-left { display: flex; gap: var(--mast-gap); } /* ВТОРАЯ СТРОКА ПОЛОСЫ — дверь. Троица остаётся на своих 9 сверху, как на трёх других листах, поэтому между листами ничего не прыгает: у торговой просто появляется строка под первой. Полоса от этого растёт с 32 до 56 — 9, плашка 14, 9, дверь 15, 9. Ряд заворачивается, а не позиционируется: тогда высоту полосы задаёт сама дверь, и её не надо нигде повторять числом. */ .p-untitled .masthead { flex-wrap: wrap; row-gap: var(--mast-top); } .p-untitled .mast-get { flex: 0 0 100%; display: flex; justify-content: center; } /* СТРОКА ПОД ДВЕРЬЮ — третья строка полосы. Голый текст, без коробки: продают одно, выдают другое, и порода у них разная. Отступ кладётся РАЗНИЦЕЙ: полоса сама разводит свои строки на --mast-top, и целый margin дал бы вдвое. Ноль в --note-gap означает встык к двери, минус — находит на неё. line-height: 1 нарочно. У листа он 1.65, и строка занимала бы 20 при кегле 11.5 — полоса росла бы на воздух, которого не просили. */ .p-untitled .mast-note { flex: 0 0 100%; display: flex; justify-content: center; margin-top: calc(var(--note-gap) - var(--mast-top)); } /* СТРОКА БЕЗ ПОДЛОЖКИ, ГОЛЫМ ТЕКСТОМ. Под ней едет текст страницы, и буквы будут за него цепляться — это принято сознательно: и обводку по контуру, и плашку цветом листа посмотрели и отклонили. Пусть царапает. Порода у неё поэтому своя: дверь — плашка, строка — просто строка. Ни фона, ни рамки, ни подчёркивания. */ .p-untitled .mast-note a { border: 0; color: var(--ash-0); font-family: var(--sans); font-size: var(--note-size); line-height: 1; letter-spacing: 0.01em; text-decoration: none; } /* РАСШИРЕННОЙ ОБЛАСТИ НАЖАТИЯ ЗДЕСЬ НЕТ, и это решение, а не упущение. Она стояла: вверх 3, вниз 6, вбок 4. Замер показал, во что это обходится: область выходила 47..67 при буквах 50..62, высота 20 против 12, а между нею и дверью оставалось РОВНО НОЛЬ — они слипались, и курсор становился рукой сразу под плашкой. Куплено этим было 1.1 px выносных элементов сверху. Плохой размен: теперь нажимается ровно то, что нарисовано, и между дверью и строкой есть свои 3 px пустого места. */ .p-untitled .get { display: flex; align-items: center; justify-content: center; width: var(--get-w); height: var(--view-h); /* ЧЁРНАЯ, ЧЕРНИЛАМИ ЛИСТА. Стояло #ffffff — от слова «белая», но белая дверь родом с index, который чёрный; на светлом листе она давала 1.23:1 и плашки на экране просто не было. Обводку, тень, серый и свой цвет посмотрели и отклонили: цвета у продукта нет и взяться ему неоткуда — у плагина нет видимого воплощения. Заодно чинится правило из палитры установщика: «there is no pure white anywhere, #e8e8e8 is as bright as it gets». Белого в наборе нет вовсе, поэтому и надпись здесь --bg, а не #fff. Стало 17.1:1 — столько же, сколько у плашек шапки. От них дверь отличается не цветом, а шириной, 210 против 103, и тем, что стоит одна на своей строке. */ background: var(--ash-0); color: var(--bg); border: 0; border-radius: 0.154em; font-family: var(--sans); font-size: var(--view-size); letter-spacing: 0.01em; text-decoration: none; } .p-untitled .mast-right { display: flex; gap: var(--mast-gap); margin-left: auto; } .p-untitled .pill { display: inline-flex; align-items: center; height: var(--mast-plate); padding: 0 var(--mast-padx); border: 0; border-radius: var(--mast-radius); background: #000000; color: #e8e8e8; font-family: var(--sans); font-size: var(--mast-size); letter-spacing: var(--mast-track); line-height: 1; white-space: nowrap; } .p-untitled .mast-mid .pill { width: var(--mast-slot); } /* ---------------------------------------------------------- canvas the sheet takes whatever the masthead and the footer leave between them, so the page is already full height and a section dropped in here has a floor to stand on. */ /* the negative margin-top is gone with the render. it existed for one reason -- to let a full-bleed picture start at the top edge of the window instead of 49px below it -- and with nothing full-bleed left, all it would do is drag the plate up under the wordmark. */ .p-untitled main { flex: 1 1 auto; display: flex; flex-direction: column; } /* .sheet and .hero are gone with the picture. the sheet was never a thing in itself: it was the FRAME, the box the plate measured its percentages against, and there is no frame now. */ /* ---------------------------------------------------------- the plate it stood at top 20% / right 14.3% of the picture, and both numbers were derived from the picture -- 14.3% was the right margin the word already held in the render, 20% cleared its descenders. the render is out, so the derivation is out with it; a number cannot outlive the thing it was measured off. it falls back to the page's own rule instead, and to index's: the right spine, and the middle of the first screen -- structurally the slot `type 1 / untitled` stands in over there. it holds that screen by itself, min-height being the window less the masthead, so the bands below begin at the fold and not above it. the height is NOT held to the first screen. it was, for one pass, and the block was centred inside it -- which put a viewport's worth of slack under the block before --offer-lift even began, and pushed the first band far past where it had been tuned to sit. the box is its own content again, so the air below it is 64 + --offer-lift + 64, exactly the 352 it measured before. */ /* one edition: the amount over the build it buys. the two used to be separate blocks -- both prices stacked above both chips -- and they are paired off now, so each amount stands over its own button and the plate reads across instead of down. */ /* two columns pushed against the right axis: the names aligned to each other, the amounts beside them. the free edition's amount keeps its currency and loses its number -- "$-", not "free", not "$0", and a hyphen rather than an em dash, which is what a person types when there is no number to type. the two amounts no longer share a column, so they no longer have to agree with each other: each price row is as wide as the chip beneath it, name flush left and amount flush right, and every unit is bracketed by its own button rather than by the other edition. */ /* width:0 with min-width:100% is not a trick for its own sake. the unit is a column flex, so its width is the WIDEST of its two children -- and the price line was one of them, which meant the line could push the button wider instead of fitting inside it. a percentage min-width does not resolve while the parent is being measured, so the line contributes nothing to that measurement and then fills whatever the chip decided. the button now sizes the unit alone, and the line lives inside it. the inset is on the RIGHT only. that is the end that was asked for -- "$-" standing on the chip's border while `sympathy` ended 10 short of it. the left is untouched and the name still sits on the unit's own edge. */ /* the two editions are chips, not links: one box drawn twice with the fill swapped. the free one is the page's own black with the ink round it; the paid one is the ink itself with the black cut out. the same inversion ::selection performs, the only move on this site allowed to swap the two values. the box hangs OUTWARD past the axis by its own padding and hairline, so what lands on the spine is the letter and not the frame. only the RIGHTMOST chip does it now: it is the only one standing on an axis, the other sits inside the block. the fill is keyed off .free / .paid and no longer off :first-child / :last-child. the chips are in separate units now and each one is an only child, so position can no longer say which is which. */ /* the hang moved from the chip to the whole UNIT. on the chip it pulled only the button past the spine and left the price line behind it, so the two rows ended on different verticals. on the unit both go, and the letters of both land on the spine together. */ /* nothing happens on hover: lighting the frame back up would put the loud edge back, just on a delay, and the pointer already says the thing is a thing you press. */ /* ----------------------------------------------------- the offer band black, like the band under teenage engineering's poster. which means it has no edge of its own at all: the picture dissolves into #000 over its bottom 19% and the page simply carries on being #000. nothing draws a line here -- the band exists because type starts, and it ends because type stops. an inverted #e8e8e8 band was built here first and taken out: it did not turn over into the light, it cut, and a cut needs a reason the page does not have yet. */ /* the band is pulled UP into the picture, because the bottom of the picture is empty and paying rent. measured on the file: row means are 23.9 at 85% of its height, 1.3 at 88%, and 0.06 at 99% -- so from 88% down there is nothing there to cover. the negative margin is a percentage, and a percentage margin resolves against the container's WIDTH even when it is vertical. the frame is 1:1.778, so 1% of its height is 1.78% of its width. position: relative is not decoration. the sheet above is positioned, and a positioned element paints over a static one no matter what the document order says -- lift the band without this and it goes UNDER the picture and simply vanishes. */ .p-untitled .offer { position: relative; z-index: 1; width: calc(100% + var(--page-pad) * 2); margin: var(--offer-lift) calc(var(--page-pad) * -1) 0; padding: var(--offer-top) var(--page-pad) var(--offer-bottom); } /* centred, which is TE's arrangement and not this site's: everything else here hangs off two absolute x from the left edge and lets the slack gather on the right. it is centred because you pointed at their block; if the page's own rule should win instead, this is the one declaration to delete. */ /* left, not centred. this is the declaration the old note here called "the one declaration to delete if the page's own rule should win" -- the centring was teenage engineering's arrangement and never this site's, which pins everything to two absolute x from the left edge and lets the slack gather on the right. with it gone the whole page stands on one left: the wordmark, the buy plate, both registers, specs and the footer. the measure stays -- 84ch is what keeps the sentence readable -- it just starts at the spine instead of floating in the middle of the window. to put it back: margin: 0 auto and text-align: center here, and margin: 0 auto 40px on .offer-claim below. a copy of the file as it was is in archive/untitled-2026-08-17-pre-left.html. */ /* ОСЬ ОДНА — ЛЕВЫЙ ХРЕБЕТ. Центрирование, стоявшее здесь с 19 августа, снято: на листе было пять левых краёв разом — шапка на 20, якорь и торговая полоса на 28, фраза на 201, реестр на 318, имя на 339. Три закреплённых элемента живут на хребте, содержание плавало посередине, и ни одна из осей не выигрывала. Мера остаётся: 84ch держат строку читаемой, они просто начинаются от хребта, а не от середины окна. Вернуть центр: margin-inline: auto и text-align: center здесь, margin: 0 auto 40px на .offer-claim, margin-inline: auto на .reg-free, align-items/text-align: center на .specs. */ .p-untitled .offer-inner { max-width: 84ch; margin-inline: auto; text-align: center; } /* the name, small, in the slot TE fills with a catalogue number. */ .p-untitled .offer-eyebrow { font-size: 24px; letter-spacing: 0.02em; margin-bottom: 4px; } .p-untitled .offer-head { font-size: 44px; font-weight: 400; line-height: 1.1; color: var(--ash-0); margin-bottom: 10px; } /* фраза набрана гротеском, как и весь лист: это предложение, которое читают, а не значение, которое сверяют. */ .p-untitled .offer-claim { font-size: 15px; line-height: 1.45; margin: 0 auto 40px; max-width: 54ch; } /* the free edition's list. two columns, both left aligned, the pair of them centred as one object: a block that sits in the middle while its contents read down an edge. the hairline is the site's --rule, the same one the manual draws between register rows, and the first row does not get one because a rule above the first row is a frame. */ /* NOT A TABLE any more. two things made the old one one, and only two: a hairline under every row, and a shared column that forced every container list onto the same x. both are gone. a row is one line now -- the codec, then where it comes from -- and the two halves are told apart by colour instead of by a grid: the name in the ink, the containers in the grey the nav rests at. the eye finds them without a rule to run along, and the block reads as a column of statements rather than a matrix to be looked up in. same grammar the specs block was already written in, and the comment there says why: those were tables, this is a list. */ .p-untitled .reg-free { display: flex; flex-direction: column; gap: 4px; width: max-content; margin-inline: auto; text-align: left; font-family: var(--sans); font-size: 12px; } .p-untitled .reg-row .box { margin-left: 2ch; color: var(--ash-2); } /* the paid register in two columns. two ordinary .reg-free grids beside each other rather than one grid of four tracks: each half then keeps its own hairlines and its own first-row reset for free, and the list reads DOWN a column instead of zigzagging across a row -- which a grid of four tracks would have forced, since it fills row by row. */ .p-untitled .reg-split { display: flex; gap: 4ch; width: max-content; margin-inline: auto; } .p-untitled .reg-split > .reg-free { flex: 0 0 auto; } /* UNUSED as of this pass: the chip was taken out of this band, and the rules are kept so putting one back is a line of markup and not a redesign. */ /* ------------------------------------------------- the lit band, paid the same band with the page's two values traded. this is the move the edition chips already make on the poster, at the size of a section. the hairline is derived and not picked: --rule is #1c1c1c, which is 28 above black, so its mirror is 28 below the ink -- 232 - 28 = 204. */ /* the plate is off. it was .viz's construction -- inset by the page gutter on four sides, 1px --rule, 4px drop -- and it is reverted: the band takes .offer's bleed back on both edges. the light begins and ends with this band. it does not run on to the footer: everything the light covers then belongs to the paid edition, which is what the inversion is for. see the specs block below for the measurement that settled it. the two ends are no longer the same number: 32 over the eyebrow, 64 under the last row. the band opens on an edge that was not there when the pair was set -- the black above it stops dead at the top of the light -- and the doubling the tail once had was for specs standing last inside it, which it does not any more. */ /* СВЕТ СНЯТ. Полоса платной редакции больше не выворачивается в светлое: она стоит на том же чёрном, что и вся страница. Геометрия осталась прежней, снят только цвет. */ .p-untitled .offer--lit { margin-top: 0; padding-top: calc(var(--offer-top) / 2); } /* ---------------------------------------------------------- specs the four-pair dl is gone; this is teenage engineering's construction off the K.O.-SIDEKICK specifications page, taken deliberately, the way the poster above takes theirs. what was copied is the GRAMMAR, and it is four things: 1. the title is a COLUMN, not a row. the first line of the title and the first label of the first group sit on the same horizontal, so the block spends no height naming itself. 2. no rules anywhere inside. groups are separated by a label and a blank line, which is the opposite of the two registers above, and right: those are tables, this is a list. 3. the pair lives inside the line, not in two columns. that is what lets the columns be sized by their own content instead of sharing a grid. 4. the last column is the way out. theirs holds two links; ours is empty and the track is not drawn, because the way out of this page is the pair of chips on the poster. what is NOT copied: their caps. this site has no capitals anywhere and is not starting here. the block is 6 groups and 22 lines, against their 7 and 26 -- the form needs that weight, which is why the old four facts could not carry it. the title is set at 25px, the eyebrow's size, so no new step enters the page; theirs runs about 1.85 over the body text and 25/13 is 1.9. sources, all of it: sympathy/STATUS.md and sympathy/BANLIST.md. three things were left out on purpose -- every millisecond figure (owner's call: they are one machine's measurement, not a property of the product), where in the code the edition boundary lives (STATUS.md:155 hides it on purpose, the free build being public), and the delivery scheme, which STATUS.md:188 lists as decided and not built. the two file sizes are true of the build that exists. the two ends are NOT the same number and no longer should be. 240 top was matched to the bottom while the block was three columns and stood as a slab; as one column running down the page's own axis it is just what continues after the light band, and that much air over it read as a hole. back to 64 over, and the 240 under stays -- that end really is the end of the page and not a join. */ .p-untitled .specs { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 64px 0 240px; font-size: 12px; } /* the three columns are gone. they were the last thing on the page still arguing with the left axis, and every argument they started -- the 1256 breakpoint, the gap knob, the nowrap that could not shrink -- was about making three fixed columns fit a window. one column has none of those questions: the page is a single left-anchored measure top to bottom, which is the site's own rule and not a borrowed one. */ .p-untitled .specs > div + div { margin-top: 40px; } .p-untitled .specs-title { margin-bottom: 40px; } /* the name of the product, not of the edition: the editions are one of the groups inside the list. the middle line is theirs -- they put the category there, in japanese -- and it is left empty in the markup. */ .p-untitled .specs-title { font-size: 24px; line-height: 1.3; letter-spacing: 0.02em; } /* two lines between one group and the next, one between a label and its list. 12px at 1.65 is a 19.8px line, rounded to 20, so the two numbers are that and twice it. */ .p-untitled .specs-group + .specs-group { margin-top: 40px; } .p-untitled .specs-label { margin-bottom: 20px; } .p-untitled .specs-group ul { list-style: none; } /* no bullet. it cost 2ch of indent -- the mark itself plus its 1ch margin -- and that indent was the only reason the lines did not stand on the same left as the label above them. taking it out aligns the group to one edge and takes 15.6px off every column's width. */ .p-untitled .specs-group li { white-space: nowrap; } /* ---------------------------------------------------------- footer mirrors the masthead: one thing on the left gutter, one on the right, so the page is bracketed by the same gesture top and bottom. */ /* the site's footer, ground and all: the light stops at the paid band's bottom edge, so what this stands on is black and the two colour changes it was given while the light ran past it have nothing to answer to. the same declaration block as index.html and license.html. */ .p-untitled footer { display: flex; align-items: baseline; justify-content: space-between; gap: var(--page-pad); flex-wrap: wrap; padding: 22px 0 18px; font-family: var(--sans); font-size: 11px; color: var(--ash-3); } .p-untitled footer a { color: var(--ash-2); border: 0; } .p-untitled footer nav { display: flex; gap: var(--page-pad); flex-wrap: wrap; } /* ---------------------------------------------------------- narrow */ /* .specs is three max-content tracks with nowrap lines inside them, so it has no give at all: below its own natural width it does not shrink, it pushes the document sideways and the whole page gets a horizontal scrollbar. 1412 is measured off this file, not guessed. Commit Mono is 600/1000, a flat 0.6em including the bullet, so 13px gives a 7.8px cell: column 1 210.00 "specifications", 14 cells at 25px column 2 483.60 "hardware decode: nvdec, amf, qsv, ..." (60+2) column 3 460.20 "sympathy.conf, settings survive ..." (56+2) gap 93.60 12ch, twice --------------------------- block 1341.00 + 28 margin twice + 15 of scrollbar = 1412 the stacking rule below was always right; it just sat on 720, which is --page-pad's breakpoint and has nothing to do with this block. between 720 and 1412 the page scrolled left to right. the boundary is exact and therefore tight: at 1413 the last column clears the scrollbar by a pixel. raise the number if that wants air. (the old note here said the longest line was the extension list at 55 characters. it is not: the two above are 60 and 56.) */ @media (max-width: 720px) { .p-untitled { --page-pad: 20px; } .p-untitled footer { gap: calc(var(--page-pad) / 4) var(--page-pad); } /* the two units side by side measure about 264px and run out of a 320px window by a pixel. they stack rather than shrink: the chip has one knob and shrinking it would take the prices out of step with it. the gap doubles to 28 so that the 14 inside a unit still reads as the tighter of the two. */ /* the block is already one column by here -- it stacks at 1412, see above. what is left for a phone is the nowrap: a single column of 484px still fits a 900px window, but not a 375px one, so this is the width at which the long lines are finally let to break. */ .p-untitled .specs-group li { white-space: normal; } } /* ------------------------------------------------- переход между страниц настоящая навигация: адрес меняется, F5 и «назад» работают, каждая страница грузит только своё. анимацию играет сам браузер — скрипт не нужен. в firefox её не будет, там просто обычный переход. старая страница СТОИТ, а не уезжает: без этого браузер разводит их крест-накрест и получается подмена, а не налистывание. новая выходит снизу и накрывает. */ /* полоса носит одно имя на всех страницах, поэтому браузер понимает, что это один и тот же объект, и оставляет её на месте. */ /* НОВАЯ идёт снизу. кривая снята с becaneparis: quintEaseOut, .22 1 .36 1. первая контрольная точка уже стоит на единице, поэтому разгона нет вовсе — страница трогается на полной скорости и всю дорогу только гасится. это и есть их подхват: не «поехала», а «уже едет» с первого кадра. */ /* СТАРАЯ делает два движения разом, и они не совпадают по времени. темнеет она с самого начала и ровно, а вверх трогается только на последней части хода — когда новая её уже почти закрыла. КРИВАЯ подъёма зеркальна кривой входа, тоже с becaneparis: quintEaseIn, .64 0 .78 0. вторая контрольная точка на нуле, значит торможения в конце нет — старая трогается с места и разгоняется до самого конца, уходя из кадра на полном ходу. пара out/in, вход гасится, выход разгоняется, — это их приём, а не наш. */ /* подъём и ужатие — одно движение и один момент: старая уходит вверх и вглубь разом, когда её подхватывает приходящая. */ /* ------------------------------------------------------ передний блок стоит на месте, пока лист под ним листается. верх выведен, а не подобран: на index блок лежит под шапкой в 41.7 и отступом регистра в 20, плюс --block-top. здесь регистра нет, поэтому та же сумма написана прямо. */ .p-untitled .way-in { position: fixed; /* картинка ушла из ряда в подложку, поэтому слова больше не зависят от её высоты и константы здесь нет: обе страницы считают одно и то же. */ top: calc(41.7px + 20px + var(--block-top)); left: calc(var(--page-pad) + var(--block-left)); z-index: 700; display: flex; flex-direction: column; align-items: flex-start; font-family: var(--sans); } /* то же правило, что на index. блок — якорь перехода, обе страницы обязаны раскладывать его одинаково, иначе он расходится. */ .p-untitled .way-words { display: flex; flex-direction: column; align-items: flex-start; } .p-untitled .way-no { font-size: var(--no-size); letter-spacing: var(--no-track); color: var(--ash-0); } .p-untitled .way-name { font-size: var(--name-size); line-height: 0.9; letter-spacing: var(--name-track); margin-left: var(--name-x); color: var(--ash-0); } .p-untitled .view { display: flex; align-items: center; justify-content: center; width: var(--view-w); height: var(--view-h); margin-top: var(--view-y); margin-left: var(--view-x); background: var(--ash-0); color: var(--bg); border: 0; border-radius: 0.154em; font-size: var(--view-size); letter-spacing: 0.01em; } /* ===================================================== ТОРГОВАЯ ПОЛОСА Две двери внизу окна: бесплатная и платная. Приколоты к окну, а не к странице, поэтому видны на всей прокрутке. Числа не новые. Хребет — тот же --page-pad, что держит блок слева. 14 px от низа — столько же, сколько шапка держит сверху (её высота 41.7 это 14 + строка 13.7 + 14). Ширина и высота — кнопки с index, зазор 12 — тот же, что между словами в шапке. Различаются цветом, не размером: бесплатная — чёрная коробка с линейкой, платная — сплошная светлая. Пустого пятна на чёрном не остаётся ни у той, ни у другой. */ .p-untitled .trade { position: relative; /* закрывающаяся кнопка ложится сюда же */ display: flex; gap: 12px; margin-top: var(--view-y); font-family: var(--sans); } .p-untitled .deal { display: flex; align-items: center; justify-content: center; width: var(--view-w); height: var(--view-h); background: var(--bg); color: var(--ash-0); border: 1px solid var(--rule-lit); border-radius: 0.154em; font-size: var(--view-size); letter-spacing: 0.01em; } .p-untitled .deal--paid { background: var(--ash-0); color: var(--bg); border-color: var(--ash-0); }