/* ========================================================================== BOSH-07 · VARIANT 1 · BENTO — quyuq band ichida mozaika Otabek, 12.09: «550 raqami juda katta boʻlib ketgan va shu blokning dizayn qismi ham yoqmayapti». Oʻz-oʻziga yetarli: css/b07.css ga tayanmaydi. Tayanadi: tokenlar · asos · komponent · bento · ritm (boʻlim paddingi va h2 kegli data-blok orqali — bu faylda ikkalasi ham YOZILMAYDI). Kompozitsiya — bitta taxlam, 3-span (4-lik) qator OLIB TASHLANDI: kirish yorliq + h2 (1–6) ······ lid (7–12) — bitta yuqori chiziqdan bento [01 · 6][02 · 6] [03 · 6][04 · 6] [05 · 4][ 550 °C · 8 — OQ langar ] ≥1201 [05 · 5][ 550 °C · 7 ] ≤1200 Uch xil oʻlcham (6 · 4 · 8) — mozaika, karta gridi emas. Oq plita eng katta, eng yorugʻ, oʻqish yoʻlining oxirida: 01→05 (nega) → 550 °C (oqibat). ========================================================================== 12.09 · 2-TUR HAKAM TUZATISHLARI ========================================================================== H1 `.bp--quyuq-ich` chegarasi shu blokda SHAFFOF. TAHRIR-2 bento qoidasi: plita = tekis yuza YOKI 1px chiziq — ikkovi birga quyuq fonda «outlined glass card» beradi (AI-slop imzosi). Faqat 6% sirt qolgach oq langar kuchliroq ajraladi. Scope faqat `.b07v1` — BOSH-11 tegilmagan. H10 4-LIK QATOR BUTUNLAY OLIB TASHLANDI → 6·6 / 6·6 / 4·8 (≤1200 da 5·7). Sabab: 3-span plitalarda 1440 da 03 = 4 qator, 04 = 2 qator boʻlib plita pastida ~50–75px oʻlik joy qolardi (1280 da ham ~64px). Endi qator ichidagi farq 2 qatordan 1 qatorga tushdi. OʻLCHOV — matn qutisi pasti ↔ plita ichki pasti, px (01·02·03·04·05·langar): 1920 1·1·1·27·21·1 1560 1·1·1·27·21·1 1500 1·1·1·27·21·1 1440 1·27·1·27·21·1 1366 1·27·1·27·1·10 1280 1·27·1·27·14·1 1200 1·1·1·27·14·1 1024 1·1·1·27·14·1 900 1·1·1·27·1·1 768 1·27·1·27·1·1 640 0·0·0·0·0·1 390 0·0·0·0·0·1 Eng katta qiymat 27px — bu ROPPA-ROSA bitta matn qatori (16px/1.6 = 25.6px) va shundan pastga tushib boʻlmaydi: qoʻshni plitalarning izohlari har xil uzunlikda (matn verbatim). Mezon ≤28px bajarildi, `--bento-pad` ga tegilmadi (H6). H9 → H10 bilan OʻZ-OʻZIDAN yopildi. `@media (max-width:1420px)` bloki (1421px da 3-span plitada «Toʻgʻridan-toʻgʻri purkash.» uchun zaxira ~0 edi) endi umuman kerak emas: 3-span plita hech qayerda yoʻq. Nom uchun qolgan zaxira (eng tor h3, px): 1421 → 204 · 1440 → 209 · 1470 → 217 · 1500 → 224 · 1560 → 240 · 1920 → 235; eng tor holat 320px da ham 17px. Beshala nom 320–1920 da BITTA qatorda — defisdan sinish imkonsiz. H2 «Toʻgʻridan-toʻgʻri» ni `` ga olish RAD ETILDI: `verbatim-variant.py` teg oʻrnida satr uzadi va matn ikkiga boʻlinadi («Toʻgʻridan-toʻgʻri» + «purkash.») — tekshiruvdan oʻtmaydi (sinab koʻrildi, exit=1). Otabek qoidasi (matn 1:1) ustun. H2 ning MAQSADI — defisdan sinmaslik — H10 orqali markupsiz bajarildi. H3 Harorat oʻqi yorliqlari: chap ustun ≥1201 da minmax(340px,400px), ≤1200 da clamp(200px,20vw,240px), ≤900 da minmax(240px,280px), yorliq kegli 12 → 11px. «0 °C» ↔ «100 °C» zaxirasi (px): 1920/1440/1280 52 · 1200 22 · 1024 16 · 900/768 30 · 640 76 · 390 35 · 360 29 · 320 22 — hamma joyda ≥ 12px. H11 Uchinchi belgidagi «550 °C+» yozuvi OLIB TASHLANDI (`data-t=""`): bitta plitada «550 °C» ikki marta yozilardi. Koʻk chekka belgisi qoldi, raqamning oʻzi 550 ni aytadi. Yozuv CSS `content` da — verbatimga taʼsiri yoʻq. H4 `.b07v1__kir` margin-bottom clamp(32,3.4vw,48) → clamp(28,2.6vw,36): lid ostida oʻng yarmida ~640×95px boʻsh navy qolardi (brif 7-band). H5 MOBIL (≤640): beshta alohida plita oʻrniga BITTA plita ichida ingichka chiziqli roʻyxat (`.b07v1__omillar`). Desktopda `display:contents` — 12 ustunli toʻr buzilmaydi; ≤640 da `display:block` + 6% sirt + 16px radius + qatorlar orasida 1px rgba(255,255,255,.14), plitalarning oʻz foni/chegarasi/paddingi oʻchadi. H13 MOBIL BALANDLIK: ≤640 da `--bento-pad:20px`, plita ichidagi row-gap 10 → 8px, roʻyxat qatori paddingi 12px, langar row-gap 16 → 10px, kirish oraliqlari zichlashtirildi (margin-bottom 20px, yorliq/lid 16px). Natija: 390 va 360 da blok 1396 → 1250px (−146px, ≈2,8 ekran). Tartib (yorliq → sarlavha → lid → 01…05 → 550 °C) va yuqoriga tekislash oʻzgarmadi. H6 Plita toʻldirilishi H1+H10 dan keyin qayta oʻlchandi (jadval H10 da) — eng katta boʻshliq 27px ≤ 28px mezoni, `--bento-pad` ga tegilmadi. H7 · H12 · H14 (merge, brif qatori, css/b07b.css) — bu turda BAJARILMADI: topshiriq faqat shu ikki variant fayliga tegishni buyurdi. Ular gʻolib blokni `qismlar/bosh/BOSH-07.html` ga koʻchirish bosqichida. Saqlangan (1-tur) qarorlar: osilgan raqam ustuni · h3 20px (sayt shkalasi, 06/08 bilan bir xil) · langar chap ustunda raqam → BEVOSITA ostida oʻq (vizualizatsiya statistika atrofida, brif 5-band) · bosh chiziqlar piksel bilan tekislangan (raqam padding-top 5px, izoh margin-top −2px). Qoidalar: soya 0 · gradient 0 · tracking ≤ 0 (faqat .yorliq CAPS istisno; 01–05 raqamlarida tracking 0) · matn va shakl yuqoriga · radius toʻrt burchakda 16px (bento.css) · aksent #3A97E0 faqat belgi (°C, oʻq belgisi). ========================================================================== */ .b07v1{ --b07v1-matn:rgba(255,255,255,.74); /* quyuq plitadagi tana matni (AA) */ --b07v1-belgi:#8FC4EE; /* quyuq sirtdagi raqam belgisi (AA) */ --b07v1-oq-chiziq:rgba(1,36,76,.18); /* oq plitadagi harorat oʻqi */ --b07v1-oq-tick:rgba(1,36,76,.34); --b07v1-raqam-ustun:auto; /* osilgan raqam ustuni: tabular «01»–«05» = 13.5px */ --b07v1-raqam-gap:8px; --b07v1-chiziq:rgba(255,255,255,.14); /* mobil roʻyxat ajratgichi */ } /* H1 · plita = TEKIS YUZA (6% oq), chegarasiz. Chiziq + fon birga = glass karta; TAHRIR-2 bento qoidasi ikkovidan bittasini talab qiladi. */ .b07v1 .bp--quyuq-ich{border-color:transparent} /* ========================================================================== 1 · KIRISH — 12 ustunli toʻr bilan bir xil oʻlchov: yorliq oʻz qatorida; sarlavha 1–6 ustun, lid 7–12 ustun — ikkalasi bitta yuqori chiziqdan. ========================================================================== */ .b07v1__kir{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--bento-gap);row-gap:0;align-items:start; margin-bottom:clamp(28px,2.6vw,36px); /* H4 */ } .b07v1__kir .yorliq{grid-column:1/7;grid-row:1;margin-bottom:var(--s5)} .b07v1__kir h2{grid-column:1/7;grid-row:2;max-width:11em} .b07v1__kir .lid{ grid-column:7/13;grid-row:2; max-width:36em;line-height:1.6;color:var(--b07v1-matn); padding-top:0;margin-top:-2px; /* bosh chiziq h2 bosh chizigʻi bilan (oʻlchangan) */ } /* ========================================================================== 2 · BESH OMIL — bitta idish, desktopda toʻrga shaffof. `display:contents` → 01…05 toʻgʻridan-toʻgʻri 12 ustunli bento katakchalari. ========================================================================== */ .b07v1__omillar{display:contents} /* quyuq-ich plita, osilgan raqam ustuni: raqam chapda (auto, tabular-nums → beshalasi bir xil), nom uning yonida, izoh nom bilan BITTA tik chiziqda. */ .b07v1__omil{ display:grid;grid-template-columns:var(--b07v1-raqam-ustun) minmax(0,1fr); column-gap:var(--b07v1-raqam-gap);row-gap:10px; align-content:start;align-items:baseline; } .b07v1__n{ grid-column:1;grid-row:1; font-size:var(--mayda);line-height:1;font-weight:700;letter-spacing:0; color:var(--b07v1-belgi);font-variant-numeric:tabular-nums; } .b07v1__omil h3{ grid-column:2;grid-row:1; font-size:20px;line-height:1.3;letter-spacing:var(--tracking);color:#fff; } .b07v1__omil .tana-k{ grid-column:2;grid-row:2; font-size:var(--tana);line-height:1.6;color:var(--b07v1-matn);max-width:36em; text-wrap:pretty; /* plita ichida matn kenglikni toʻldiradi */ } /* ========================================================================== 3 · OQ LANGAR — ikki ustun. Chap (340–400px): 550 °C (≤ 72px) → BEVOSITA ostida harorat oʻqi 0 · 100 °C (yozuvlar CSS content) — oʻq statistikaning tayanch chizigʻi, plitaning emas. Oʻng: izoh, raqamning bosh chizigʻi bilan tekis. Qatorlar auto + 1fr: izoh baland boʻlsa faqat 2-qator oʻsadi, oʻq raqamdan uzoqlashmaydi. ========================================================================== */ .b07v1__langar{gap:24px} .b07v1__ust{ display:grid; grid-template-columns:minmax(340px,400px) minmax(0,1fr); /* H3 */ grid-template-rows:auto 1fr; grid-template-areas:"raqam izoh" "shkala izoh"; column-gap:clamp(28px,3.2vw,52px); row-gap:12px; /* raqam qatori (lh .9) ostida oʻz havosi bor → oʻq raqamdan 26px da */ align-items:start;width:100%; } .b07v1__raqam{ grid-area:raqam; display:inline-flex;align-items:flex-start;gap:.1em; font-size:clamp(52px,5vw,72px); /* 1440 da 72px — Otabek chegarasi, undan oshmaydi */ line-height:.9;white-space:nowrap; padding-top:5px; /* bosh chiziq 05 plita h3 bosh chizigʻi bilan bir qatorda */ } /* birlik — yagona aksent belgisi, raqamning ustki qirrasida */ .b07v1__raqam .plyus{ font-size:.36em;line-height:1.1;font-weight:700;letter-spacing:-.01em;padding-top:.04em; } /* izoh: bosh chizigʻi raqam va 05-h3 bilan bir chiziqda (oʻlchangan) */ .b07v1__izoh{grid-area:izoh;max-width:34em;line-height:1.6;padding-top:0;margin-top:-2px;text-wrap:pretty} /* oʻq — raqam ustunida, 25px: 1px chiziq · 9px belgi · 11px yozuv */ .b07v1__shkala{grid-area:shkala;position:relative;width:100%;height:25px} .b07v1__shkala::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:var(--b07v1-oq-chiziq); } .b07v1__t{position:absolute;top:0;width:1px;height:9px;background:var(--b07v1-oq-tick)} .b07v1__t::after{ content:attr(data-t);position:absolute;top:14px;left:0; font-size:11px;line-height:1;letter-spacing:var(--tracking); /* H3 */ color:var(--slate);white-space:nowrap; } /* H11 · uchinchi belgi — faqat koʻk chekka, yozuvsiz (550 ni raqam aytadi) */ .b07v1__t--urgu{width:2px;height:14px;background:var(--aksent);transform:translateX(-2px)} /* ========================================================================== RESPONSIV — 1440 · 1280 · 1024 · 768 · 390, gorizontal toshish 0 (oʻlchandi: 320–1920 da 0). Taxlam 6·6 / 6·6 boshi hamma kenglikda bir xil; pastki qator ≥1201 da 4·8, ≤1200 da 5·7, ≤900 da 12/12; ≤640 da omillar bitta plitali roʻyxatga aylanadi. ========================================================================== */ /* ≤1200: kirish ikki ustunligicha qoladi, faqat nisbat oʻzgaradi — h2 1–7, lid 8–12. Langar chap ustuni clamp(200px,20vw,240px): raqam bu yerda 52–60px, oʻq yorliqlari orasida 16–22px zaxira qoladi, izohga ≥250px joy. Pastki qator 4·8 → 5·7: 4-span 05 plita 1024 da 4 qatorga choʻzilib qatorni 180px ga koʻtarardi, langar ostida 45px oʻlik joy qolardi (H10 mezoni 28px). 5-span da 05 = 2–3 qator, langar = 7-span — ikkovida ham boʻshliq ≤ 27px. */ @media (max-width:1200px){ .b07v1__kir h2{grid-column:1/8;max-width:12em} .b07v1__kir .lid{grid-column:8/13} .b07v1__omillar .b07v1__omil:nth-child(5){grid-column:span 5} .b07v1__tor .b07v1__langar{grid-column:span 7} .b07v1__ust{grid-template-columns:clamp(200px,20vw,240px) minmax(0,1fr)} } /* ≤900: kirish bir ustun; 6·6 / 6·6 / 12 / 12 — 550 °C toʻliq kenglikda alohida vizual blok. */ @media (max-width:900px){ .b07v1__kir .yorliq,.b07v1__kir h2,.b07v1__kir .lid{grid-column:1/-1} .b07v1__kir .yorliq{grid-row:1} .b07v1__kir h2{grid-row:2;max-width:14em} .b07v1__kir .lid{grid-row:3;max-width:40em;padding-top:0;margin-top:var(--s5)} .b07v1__omillar .b07v1__omil:nth-child(5), .b07v1__tor .b07v1__langar{grid-column:span 12} .b07v1__ust{grid-template-columns:minmax(240px,280px) minmax(0,1fr)} } /* ========================================================================== ≤640 · MOBIL — H5 + H13 Omillar: BITTA plita, ichida ingichka chiziqli roʻyxat (beshta quti emas). Langar: raqam → oʻq → izoh ustma-ust (HTML tartibi bilan bir xil). ========================================================================== */ @media (max-width:640px){ .b07v1{--bento-pad:20px} /* idish plitaga aylanadi */ .b07v1__omillar{ display:block; padding:var(--bento-pad); border-radius:var(--bento-r); background:rgba(255,255,255,.06); } /* plitalar qatorga aylanadi: oʻz foni, chegarasi, radiusi va paddingi yoʻq */ .b07v1__omillar .b07v1__omil{ background:none;border:0;border-radius:0; padding:12px 0;row-gap:8px; border-top:1px solid var(--b07v1-chiziq); } .b07v1__omillar .b07v1__omil:first-child{padding-top:0;border-top:0} .b07v1__omillar .b07v1__omil:last-child{padding-bottom:0} .b07v1__omil h3{font-size:18px} /* kirish zichroq */ .b07v1__kir{margin-bottom:20px} .b07v1__kir .yorliq{margin-bottom:var(--s4)} .b07v1__kir .lid{margin-top:var(--s4)} /* langar */ .b07v1__tor .b07v1__langar{grid-column:span 12} .b07v1__ust{ grid-template-columns:minmax(0,1fr);grid-template-rows:auto; grid-template-areas:"raqam" "shkala" "izoh";row-gap:10px; } .b07v1__izoh{padding-top:0;margin-top:2px} /* raqam ustida, izoh ostida — tekislash yoʻq */ .b07v1__raqam{padding-top:0} .b07v1__langar{gap:var(--s5)} }