/* * Слой bloki.css — задача 3.6 очереди 3: карточки статей. Вторая попытка. * * Подключается ПОСЛЕДНИМ (rc_enqueue_styles(), functions.php: * reboot-style -> slovar.css -> style.css -> baza.css -> bloki.css), * поэтому побеждает по порядку в каскаде, а не весом селектора. * Ни одного !important ниже нет и не нужно. * * РАЗБОР ПЕРВОЙ ПОПЫТКИ (откачена). Карточка была перенесена сюда * почти полностью, но в style.css остались ДВА правила-заплатки на * ту же плашку рубрики через переменную --rc-gc-badge-bg с !important * («Бейджи рубрик» и «Контрастность категорий WCAG AA»). Они и раньше * матчили .post-card--vertical (селекторы вида * .post-card:not(.post-card--small) .post-card__category и голое * .post-card__category), но проигрывали более специфичному правилу * VCARDV8 (специфичность 0,4,1, тоже !important, переменная * --rc-cv-cat-bg = #ff5e52 красный). Задача убрала VCARDV8 и перенесла * его сюда, а эти два правила — не тронула: важность в каскаде сильнее * веса селектора, и следующим по специфичности среди !important-правил * стал патч на --rc-gc-badge-bg (#303030 тёмный) — плашка перекрасилась. * Найдено не поиском по файлу (он и пропустил эти два правила, потому * что в их селекторах нет слова «vertical»), а разбором через CDP * CSS.getMatchedStylesForNode — snimki/inventar/kartochki-pravila.json. * * ИСПРАВЛЕНИЕ. Оба правила в style.css сужены через :not(.post-card-- * vertical ...), чтобы они больше не матчили плашку вертикальной * карточки вообще — тогда бороться с их !important не с чем, и это * правило ниже побеждает по порядку подключения, как и задумано. Для * grid/horizontal/standard-карточек (их на четырёх проверяемых страницах * нет, но они есть на сайте — слайдер, другие разделы) оба правила * работают как прежде, ничего не потеряно. * * ОПИСЬ (полная — snimki/inventar/kartochki-pravila.json, таблица — audit/11-vid.md, * раздел 3.6). На четырёх проверяемых страницах (главная, статья, рубрика, * автор) реально выводятся два вида карточки статьи: * * 1. .post-card--vertical — карточка ленты (главная, рубрика, страница * автора): обложка сверху, плашка рубрики поверх обложки, заголовок, * мета (комментарии/просмотры/дата). Лид скрыт, пока обложка есть — * так было и до этой задачи, не наше решение, не трогаем. * 2. .post-card--small.post-card--compact-text — строка в виджете * «Статьи» боковой колонки (главная, рубрика, статья): заголовок * и мета, без обложки и лида по замыслу виджета (это не тот случай * «дыры на месте фото» — обложки в разметке этого вида нет вообще, * искать признак пустой миниатюры тут незачем). * * Другие виды карточки (.post-card--grid/--horizontal/--standard, * .post-card--small без --compact-text) в разметке этих четырёх страниц * не встречаются ни разу — их стили остаются в style.css нетронутыми, * переносить непроверенное было бы наслоением вслепую, а не переносом. * Так же остаются нетронутыми и сугубо контекстные обёртки сайдбара, * которые задают вид #2 в контексте, отличном от подтверждённого * (.widget-area .post-card--compact-text без .rc-sidebar-left/right — * на четырёх страницах такого DOM нет), и правила, общие сразу для * нескольких видов карточек в одном селекторе через запятую (например * .post-card--vertical, .post-card--grid, .post-card--horizontal * { … } на hover-анимацию) — расщеплять такой селектор ради переноса * только вертикальной карточки рискованно и не даёт выигрыша. * * ПРИЗНАК ОТСУТСТВИЯ ОБЛОЖКИ. Класс post-card--thumbnail-no ставит сама * родительская тема: template-parts/post-card/*.php (стандартные шаблоны * wpshop) проверяют get_the_post_thumbnail() и, если строка пустая, * добавляют этот класс в $post_card_classes. Свой фильтр в functions.php * не понадобился — родитель уже отдаёт нужный признак. * * ЗНАЧЕНИЯ. Только переменные словаря (css/slovar.css): * - кегли — var(--rc-kegl-N) (десять ступеней) там, где размер новый * (второе состояние карточки без обложки); для унаследованных * размеров, управляемых кастомайзером (--rc-cv-fs и т.п.), ступень * не переназначается — это не роль, а отдельная настройка человека, * переменная просто переносится вместе с правилом; * - отступы — var(--rc-otstup-N) (семь ступеней, шаг 4px). Голые * значения из style.css, не привязанные ни к какому кастомайзер- * контролу, при переносе округлены до ближайшей ступени (при * равном расстоянии — меньшая, то же правило, что и в задаче 3.5 * для кеглей). Таблица округлений — audit/11-vid.md, раздел 3.6; * - цвета — переменные (--rc-cv-*, --rc-gc-*, --rc-border и т.п.), * все уже объявлены в slovar.css, поэтому var() ниже без hex- * запасного значения (сам словарь и есть запасное значение); * - радиусы — var(--rc-cv-r) (customizer-переменная, её дефолт в * slovar.css — 12px, это ровно --rc-radius-bazovy). * * ИСКЛЮЧЕНИЯ (честно, как требует задание, вместо подгонки): * - плашка рубрики поверх обложки: border-radius 4px и padding 3px 7px — * мелкая деталь (пилюля бейджа), меньше нижней ступени радиуса (8px) * и вне шага отступов (4px), перенесена как есть, без переосмысления; * - толщина рамок 1px («волосок») — не размер по шкале кеглей/отступов, * общепринятая единица на весь сайт, тем же кегл/отступ не является; * - max-width: calc(100% - 28px) у той же плашки рубрики — запас, чтобы * длинное название рубрики не доходило до правого края обложки; * число перенесено из style.css как есть (было там же, с тем же * смыслом, до задачи 3.6), это не отступ и не кегль, а геометрический * зазор одной конкретной детали; * - высоты обложки/карточки (--rc-cv-th*, --rc-cv-nh*) и время * transition — не входят ни в шкалу кеглей, ни в шкалу отступов * (это не шрифт и не расстояние между блоками, а размер картинки и * скорость анимации), перенесены как кастомайзер-переменные без * изменений. */ /* ══════════════════════════════════════════════════════════════════ ОБЩИЙ ПРИЁМ — обрезка заголовка/лида по числу строк (line-clamp). Описан один раз для обоих видов; сколько строк — решает каждый вид отдельно ниже (var(--rc-cv-lines*) у вертикальной, число 2 у компактной и у лида карточки без обложки). ══════════════════════════════════════════════════════════════════ */ .post-card--vertical .post-card__title a, .post-card--vertical.post-card--thumbnail-no .post-card__description, .post-card--compact-text .post-card__title a { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } /* ══════════════════════════════════════════════════════════════════ ВИД 1 — .post-card--vertical (лента: главная, рубрика, автор) ══════════════════════════════════════════════════════════════════ */ /* Контейнер: спецслучаи на 1 и 2 карточки в ленте */ .post-cards--vertical:has(> .post-card--vertical:only-child) { grid-template-columns: 1fr; } .post-cards--vertical:has(> .post-card--vertical:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } @media (max-width: 599px) { .post-cards--vertical:has(> .post-card--vertical:nth-child(2):last-child) { grid-template-columns: repeat(var(--rc-cv-cols-m, 1), 1fr); } } /* Карточка — фон, форма. Толщину/цвет рамки не дублируем: их для вертикальной карточки наравне с grid/horizontal/standard уже держит общее правило style.css («FIX: card border from customizer vars», один и тот же var(--rc-card-border-w)/var(--rc-card-border-col), значения совпадают — второе объявление здесь было бы мёртвым кодом). */ .post-card--vertical { min-width: 0; max-width: none; margin: 0; padding: 0; height: 100%; background: var(--rc-cv-bg); border-radius: var(--rc-cv-r); overflow: hidden; display: flex; flex-direction: column; position: relative; } /* Обложка */ .post-card--vertical .post-card__thumbnail { flex: 0 0 var(--rc-cv-th); width: 100%; height: var(--rc-cv-th); min-height: var(--rc-cv-th); max-height: var(--rc-cv-th); margin: 0; padding: 0; position: relative; overflow: hidden; } .post-card--vertical .post-card__thumbnail a { display: block; width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0; } .post-card--vertical .post-card__thumbnail a::before, .post-card--vertical .post-card__thumbnail a::after { display: none; } .post-card--vertical .post-card__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none; min-width: unset; min-height: unset; max-height: unset; margin: 0; padding: 0; } @media (min-width: 600px) and (max-width: 991px) { .post-card--vertical .post-card__thumbnail { flex-basis: var(--rc-cv-th-t); height: var(--rc-cv-th-t); min-height: var(--rc-cv-th-t); max-height: var(--rc-cv-th-t); } } @media (max-width: 599px) { .post-card--vertical .post-card__thumbnail { flex-basis: var(--rc-cv-th-m); height: var(--rc-cv-th-m); min-height: var(--rc-cv-th-m); max-height: var(--rc-cv-th-m); } } /* Плашка рубрики поверх обложки (радиус и внутренний паддинг — исключение из шкалы, см. шапку файла). Специфичность селектора взята выше обычной (0,3,0 -> 0,4,1, добавлены body и .post-cards--vertical): родительская тема сама печатает инлайновый