itube-specs 0.0.976 → 0.0.979

package/components/card/model.vue

@@ -93,11 +93,11 @@ const { generateLink } = useGenerateLink();
 const { t } = useI18n();
 
 /**
- * Пороги — колоночная лестница `.grid-models` (2 → 3 с 640px → … → 6 с 1280px), а не `$brkpnts`.
- * Слот от 640px и выше держится в 206–249px, поэтому один `250px` покрывает всю правую часть.
+ * Пороги — колоночная лестница `.grid-models` (2 → 3 с 450px → … → 6 с 1160px), а не `$brkpnts`.
+ * До 1386px слот держится в 213px, дальше растёт до 249 — оттуда и правое значение.
  * `auto` впереди — см. `UiImg`.
  */
-const SIZES = 'auto, (max-width: 639px) 50vw, 250px';
+const SIZES = 'auto, (max-width: 449px) 50vw, (max-width: 1385px) 215px, 250px';
 
 const fallbackImage = '/img/model-placeholder.webp';
 const imageError = ref(false);

package/components/card/video/actions.vue

@@ -112,7 +112,9 @@ $action-size: 36px;
       var(--transition) color;
   }
 
-  .card-video:is(:hover, :focus-within) .card-video-actions__btn {
+  /* :focus-visible, а не :focus-within: после клика мышью фокус остаётся на кнопке, и она
+     продолжала висеть видимой, когда курсор уже ушёл с карточки. Клавиатурный обход не страдает. */
+  .card-video:is(:hover, :has(:focus-visible)) .card-video-actions__btn {
     opacity: 1;
   }
 

package/components/card/video/index.vue

@@ -442,20 +442,16 @@ $dropdown-column: 18px;
   --line-clamp: 2;
 
   grid-row: 1;
+  font-weight: 500;
   color: $video-card-text;
 
   @include to-cq($layout-breakpoint) {
     grid-column: 1;
   }
 
-  @media (hover: hover) {
-    transition: var(--transition) color;
-  }
-}
-
-.card-video:is(:hover, :focus-visible) .card-video__title {
-  @media (hover: hover) {
+  @include hover(color, opacity) {
     color: $video-card-text--hover;
+    opacity: 0.9;
   }
 }
 
@@ -529,8 +525,7 @@ $dropdown-column: 18px;
 }
 
 .card-video__logo-wrapper[href],
-.card-video__channel-wrapper[href],
-.card-video__title {
+.card-video__channel-wrapper[href] {
   @include hover(opacity) {
     opacity: 0.9;
   }

package/components/grid/models.vue

@@ -26,26 +26,35 @@ defineProps<{
 </script>
 
 <style lang="scss">
-/* Лестница колонок как в макете: 2 → 3 (640px) → 4 (768px) → 5 (1024px) → 6 (1280px).
-   Пороги — литералы макета, с тирами $brkpnts намеренно не совпадают. */
+/* Лестница колонок: 2 → 3 (450px) → 4 (690px) → 5 (920px) → 6 (1160px). Больше шести в ряд
+   не даём — продуктовое требование.
+
+   Пороги — литералы, с тирами $brkpnts намеренно не совпадают: они подобраны так, чтобы слот
+   карточки держался в 213px. Это ширина исходника 640, делённая на 3 — предел плотности
+   современных телефонов. Считается как
+   (вьюпорт − 2×--container-padding-inline − 12×(колонок−1)) / колонок.
+
+   Единственное место, где 213 превышены — шесть колонок шире 1386px: там слот растёт до 249.
+   Это осознанно: при тройной плотности такому слоту нужно 746px, но десктопов с тройной
+   плотностью практически не бывает, а DPR2 просит 497 и укладывается в наши 640. */
 .grid-models {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
 
-  @include from-br(640px) {
+  @include from-br(450px) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  @include from-br(768px) {
+  @include from-br(690px) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  @include from-br(1024px) {
+  @include from-br(920px) {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  @include from-br(1280px) {
+  @include from-br(1160px) {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }

package/composables/use-test-model-images.ts

@@ -6,7 +6,7 @@ export interface ITestModelPortrait {
   primaryImageSmallAvifUrl?: string;
 }
 
-/** Модели из тестовой поставки нарезчика: `public/img/models/<guid>{,-640,-300}.{png,webp,avif}`. */
+/** Модели из тестовой поставки нарезчика: `public/img/models/<guid>{,-640,-256}.{png,webp,avif}`. */
 const PORTRAIT_GUIDS = [
   '00003fff-0aa5-4e65-9356-7e01358408fe',
   '0000cca2-8ec5-4c12-950f-4460920805b9',
@@ -24,11 +24,12 @@ const PORTRAIT_GUIDS = [
  * Тестовые портреты моделей:
  *
  * - `?img=png` — исходники 1024×1536;
- * - `?img=webp` — без avif-ветки, чтобы померить вес и качество одного webp;
+ * - `?img=444` — наш avif в полной цветности 4:4:4 при том же качестве яркости, что у поставки
+ *   нарезчика (она в 4:2:0). Сравнение стоит вести по цвету: губы, румянец, переходы кожи;
  * - без параметра — нарезка по `DOCS/MODEL-IMAGES.md`: один 640w, avif через `<picture>`.
  *
  * Две ширины, выбирает их КОМПОНЕНТ, а не браузер: srcset мы не ставим. 640w — портрет в
- * карточку сетки, 300w — квадратный кроп по лицу в круглые аватары, мини-карточки и подсказки
+ * карточку сетки, 256w — квадратный кроп по лицу в круглые аватары, мини-карточки и подсказки
  * поиска.
  *
  * Ступеней через srcset НЕ делаем. Ступень мельче слота заведомо хуже полного файла: её портит
@@ -55,10 +56,10 @@ export function useTestModelImages() {
 
     return {
       primaryImageUrl: `${base}-640.webp`,
-      thumbUrl: `${base}-300.webp`,
-      primaryImageSmallUrl: `${base}-300.webp`,
-      primaryImageAvifUrl: format === 'webp' ? undefined : `${base}-640.avif`,
-      primaryImageSmallAvifUrl: format === 'webp' ? undefined : `${base}-300.avif`,
+      thumbUrl: `${base}-256.webp`,
+      primaryImageSmallUrl: `${base}-256.webp`,
+      primaryImageAvifUrl: format === '444' ? `${base}-640-444.avif` : `${base}-640.avif`,
+      primaryImageSmallAvifUrl: format === '444' ? `${base}-256-444.avif` : `${base}-256.avif`,
     };
   });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.976",
+  "version": "0.0.979",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {