/* ========================================================================== R-QOLLASH · «Qoʻllash sohalari» — 4-brif (13.09): BOʻSHLIQ · VERTIKAL RITM -------------------------------------------------------------------------- Yuklanish: … → tizim → kompozitsiya → zichlik3 → z-qollash → boshliq4 → **r-qollash** Ortga qaytarish: shu faylni oʻchirish yetadi (`qur.py` uni oʻzi ulaydi). `z-qollash.css` ga TEGILMAGAN — 3-brifning zichlik ishi oʻsha yerda turibdi. BU QAYTA DIZAYN EMAS. Rang, shrift, kompozitsiya, tuzilma, matn oʻzgarmadi. Faqat: boʻlim ajralishi · ichki munosabatlar · sahifa ritmi. -------------------------------------------------------------------------- OʻLCHOV (1440×900, hamma `.kir` ochilgan holatda — aks holda translateY(10px) oʻlchovni buzadi). Sahifada 12 ta boʻlim chegarasi bor edi va ularning hammasi 82–112 px oraligʻida yotardi: 90 · 106 · 112 · 102 · 105 · 106 · 108 · 89 · 82 · 99 · 104 · 109 Yaʼni asosiy kasallik «boʻlimlar bir-biriga tegib turibdi» emas — asosiy kasallik RITM YOʻQLIGI (brif §20: «Hamma ajralish bir xil boʻlsa, ritm yoʻq»). Oʻqiyotgan odam qayerda yangi BOB boshlanganini boʻshliqdan bilmaydi: olti soha orasidagi masofa ham, «olti soha → xizmat muddati» kabi butunlay boshqa gʻoyaga oʻtish ham bir xil koʻrinadi. SAHIFANING BOBLARI (brif §10: «Separate each major application chapter clearly … larger spacing before the next major category»): A KIRISH SOH-01 hero + SOH-02 kirish/indeks — bitta gʻoya B OLTI SOHA SOH-03-1 · 2 · 3 · 45 · 6 — bitta seriya C EKSPLUATATSIYA SOH-07 muddat + SOH-08 qadoq — bogʻliq juftlik D XULOSA SOH-05 yigʻma jadval — B ning yakuni E ASBOB SOH-06 moy tanlash paneli — boshqa DARAJA F YORDAM SOH-09 savol-javob + keyingi qadam G KONVERSIYA SOH-10 soʻrov (quyuq) Qaror: boblar ORASI kuchli (140), bob ICHIDAGI qadam oʻrtacha (108), bogʻliq juftlik ichi ixcham (94). Bitta boʻlimning oʻzi choʻzilmaydi — brif §21: SECTION HEIGHT ≠ SECTION SEPARATION. -------------------------------------------------------------------------- ⟦REVIZYA · 13.09, mustaqil koʻrikdan keyin⟧ Koʻrik haqli edi: birinchi redaksiyada uchta daraja daʼvo qilingan, amalda ikkitasi chiqqan. Sabab — ajralish PADDING YIGʻINDISI bilan hisoblangan, odam koʻradigan masofa esa = padding + qoʻshnilarning oʻz siyoh chegarasi. Revizya OʻLCHOVI ikki metrika bilan olindi (Range boʻyicha matn-siyohi VA koʻrinadigan qirra — panel/tugma/slot chegarasi), ikkovi ham hisobda: chegara matn qirra → keyin (matn / qirra) SOH-01 → SOH-02 91 91 91 / 91 (tegilmadi) SOH-02 → SOH-03-1 150 150 134 / 134 §1a SOH-03-1 → 03-2 108 108 108 / 108 03-2 → 03-3 122 119 122 / 119 03-3 → 03-45 105 101 105 / 101 03-45 → 03-6 111 110 111 / 110 03-6 → SOH-07 139 139 139 / 139 SOH-07 → SOH-08 97 96 83 / 82 §1b SOH-08 → SOH-05 94 94 80 / 80 §1b SOH-05 → SOH-06 140 140 140 / 140 SOH-06 → SOH-09 135 103 121 / 89 §1c SOH-09 → SOH-10 143 140 133 / 130 §1d Natijada uch daraja ROSTDAN paydo boʻldi: ~80–91 (bogʻliq) · ~101–134 (seriya va bob kirishi) · ~139–140 (bob oʻtishi), yakunda quyuq band. Sahifa 68 px QISQARDI — hech bir boʻlim choʻzilmadi (brif §5, §21). MOBIL: bu revizyaning tier oʻzgarishlari desktopga tegishli, mobil qiymatlar §7 da eski holicha qadab qoʻyildi (mobilda ajralish allaqachon 59–96 oraligʻida, brifning 48–72 / 72–96 shkalasida). ========================================================================== */ /* ========================================================================== §1 · UCH POGʻONALI AJRALISH — qiymat oʻylab topilmaydi, `boshliq4.css` §1 tokenlaridan olinadi. Boʻlimlar bir-biriga tegib turadi (sirt juftligi), shuning uchun ajralish = ikki qoʻshni paddingning yigʻindisi. Desktop (1440): bob 66+66 → 140 px (brif: bob oʻtishi 120–144) oddiy 50+50 → 108 px (brif: normal 80–104 / keng 112–144 chegarasida — seriya qadami) ixcham 36+36 → 80 px (brif: ixcham 56–80) Mobil (≤760): har pogʻona BIR QADAM pastga tushadi — brif §15: «Do NOT simply multiply desktop spacing on mobile». bob 36+36 → 86 px (brif: katta oʻtish 72–96) oddiy 26+26 → 66 px (brif: ajralish 48–72) ixcham 24+24 → 62 px ⚠ `--pad-bob` (76) ATAYLAB ishlatilmadi: 76+76 = 152 px, brifning 144 px shiftidan oshadi. Bob oʻtishi uchun `--pad-keng` juftligi yetarli. ========================================================================== */ :root{ --q-bob:var(--pad-keng); /* boblar orasi */ --q-oddiy:var(--pad-normal); /* seriya qadami */ --q-ixcham:var(--pad-ixcham); /* bogʻliq juftlik */ } @media (max-width:760px){ :root{ --q-bob:var(--pad-normal); --q-oddiy:var(--pad-ixcham); --q-ixcham:var(--space-md); } } /* Har boʻlimning kirishi va chiqishi ALOHIDA boshqariladi — shu bilan «boʻlim balandligi» va «boʻlim ajralishi» bir-biridan ajraladi. Selektor ogʻirligi z-qollash §1 bilan bir xil (0-2-2), fayl esa keyin yuklanadi — shuning uchun bosadi. */ /* A→B · kirish tugadi, olti sohaning boshi ochiladi */ main section[data-blok="SOH-02"][data-blok]{ padding-top:var(--q-oddiy); padding-bottom:var(--q-bob); } /* B · olti soha seriyasi: kirishi keng, ichki qadami bir tekis §1a · Kirish 66 → 50. Sabab: SOH-03-1 ning katta «01» raqami oʻz qutisida past boshlanadi, shuning uchun 66+66 padding 150 px IDROK bergan — brif §1 ning 144 px shiftidan oshgan. 50 bilan idrok 134: shift ichida, bob oʻtishi sifatida (120–144) baribir kuchli va seriya qadamidan (105–122) sezilarli baland. Sahifa 16 px qisqaradi. */ main section[data-blok="SOH-03-1"][data-blok]{ padding-top:var(--q-oddiy); padding-bottom:var(--q-oddiy); } main section[data-blok="SOH-03-2"][data-blok], main section[data-blok="SOH-03-3"][data-blok], main section[data-blok="SOH-03-45"][data-blok]{ padding-top:var(--q-oddiy); padding-bottom:var(--q-oddiy); } /* B→C · oxirgi soha seriyani yopadi */ main section[data-blok="SOH-03-6"][data-blok]{ padding-top:var(--q-oddiy); padding-bottom:var(--q-bob); } /* C · muddat + qadoq: ikkovi ham «ekspluatatsiya va taʼminot» — bogʻliq, shuning uchun ular ORASI ataylab ixcham (94), lekin ATROFI keng */ /* §1b · «muddat + qadoq + jadval» bobining ICHKI chegaralari bir pogʻona pastga: 97/94 → 83/80. Oldin ular seriya qadamidan (105–122) atigi 8–14 px past edi — koʻz ajratmasdi va brif §6 ning IXCHAM (56–80) pogʻonasi sahifada umuman yangramasdi. Endi uch band bitta guruh boʻlib oʻqiladi (brif §7: «keep related subsections visually grouped»), guruhning ATROFI esa kuchli qoladi: kirish 139, chiqish 140. Sahifa 28 px qisqaradi. */ main section[data-blok="SOH-07"][data-blok]{ padding-top:var(--q-bob); padding-bottom:var(--q-ixcham); } main section[data-blok="SOH-08"][data-blok]{ padding-top:var(--q-ixcham); padding-bottom:var(--q-ixcham); } /* D→E · jadval bobni yakunlaydi, keyin ASBOB boshlanadi (boshqa daraja: oʻqishdan amalga oʻtish — brif §22 «whitespace = new interaction») */ main section[data-blok="SOH-05"][data-blok]{ padding-top:var(--q-ixcham); /* §1b */ padding-bottom:var(--q-bob); } /* §1c · SOH-06 ning CHIQISHI 50 → 36. Ajralish emas, boʻlim balandligi kamayadi (brif §21). SOH-09 — asbobning davomi: SOH-06 «Texnikangiz roʻyxatda yoʻqmi?» bilan tugaydi, SOH-09 aynan shu savollarga javob beradi. Oldin bu chegara 135 px (matn) edi — SOH-05→SOH-06 (140) va SOH-09→SOH-10 (143) bilan bir xil: sahifa oxirida uchta ketma-ket maksimal oʻtish, brif §20 boʻyicha ritm YOʻQ. Endi 121 (matn) / 89 (panel qirrasidan) — ikki qoʻshnisidan sezilarli past. Panelning oʻzida 28 px ichki padding bor, shuning uchun matn baribir sirtga yopishmaydi. Sahifa 14 px qisqaradi. */ main section[data-blok="SOH-06"][data-blok]{ padding-top:var(--q-bob); padding-bottom:var(--q-ixcham); } /* F · savol-javob asbobning DAVOMI: SOH-06 «Texnikangiz roʻyxatda yoʻqmi? Mutaxassisga yozing» bilan tugaydi, SOH-09 esa aynan shu savollarga javob beradi — shuning uchun ular orasi seriya qadami (108), bob oʻtishi emas. F→G · keyin QUYUQ band keladi: sahifaning eng kuchli oʻtishi. Yorugʻ tomon quyuq qirraga yopishmasin (brif §4: «Dark section ↓ transition ↓ light»), shuning uchun chiqish `--pad-bob` — ROPPA-ROSA bir tomonda. */ /* §1d · SOH-09 ning CHIQISHI 76 → 66. Bu boʻlimda sahifaning YAGONA tasodifiy boʻsh maydoni bor: chap ustun (sarlavha + CTA) 291 px, oʻng ustun (savol-javob) 497 px — chap yarmi oxirgi tugmadan keyin boʻsh qoladi. Birinchi redaksiya bu boʻlimga yana 26 px qoʻshgan edi, yaʼni yarmi allaqachon boʻsh boʻlimni balandlatgan (brif §21 ga zid). Endi bir qadam orqaga: quyuq bandga oʻtish 143 → 133 (matn) / 130 (tugma qirrasi) — brif §1 ning 120–144 shiftida, sirt almashuvi bilan birga sahifaning eng kuchli chegarasi boʻlib qolaveradi. ⚠ 50 gacha TUSHIRILMADI: u holda oʻtish 117 boʻlib, qoʻshni SOH-06→SOH-09 (121) bilan teng koʻrinardi — bir xato ikkinchisiga almashardi. Ustun uzunligi farqining OʻZI kompozitsiya ishi, boʻshliq passi emas — hisobotning `umumiy_taklif` iga chiqarildi. */ main section[data-blok="SOH-09"][data-blok]{ padding-top:var(--q-oddiy); padding-bottom:var(--pad-keng); } /* SOH-10 (quyuq soʻrov) paddingi oʻzgarmadi — u quyuq band, ikki qirrasi koʻrinib turadi va simmetrik qolishi kerak. */ /* ========================================================================== §2 · ICHKI MUNOSABAT — HERO (SOH-01) Oʻlchandi: yorliq→h1 13 · h1→lid 13 · lid→CTA 23 — uchalasi ham brifning 16–20 / 20–28 / 28–40 pogʻonasidan past va bir xil edi, shuning uchun hero matni bitta blok boʻlib oʻqilardi. Endi pogʻonalangan. Balandlik narxi +17 px — hero choʻzilmaydi, faqat ichki munosabat tuziladi. ========================================================================== */ main [data-blok="SOH-01"] .hs__matn{gap:clamp(12px,1.2vw,16px)} main [data-blok="SOH-01"] .hs__matn > .lid{margin-top:clamp(4px,.5vw,6px)} /* 16+6 = 22 */ main [data-blok="SOH-01"] .hs__amal{margin-top:clamp(8px,1vw,12px)} /* 16+12 = 28 */ /* ========================================================================== §3 · ICHKI MUNOSABAT — SOHA BOBLARI (SOH-03-*) 1) yorliq→sarlavha 12 px edi (brif §2: 16–20) — CAPS yorliq sarlavhaga yopishib, ikkovi bitta satr boʻlib koʻrinardi. 2) texnik registrda yorliq→qiymat 5 px edi (brif §3: texnik yorliq 8–16). 3) 04+05 juft bobida bloklar orasi 15 px edi (brif §3: sarlavha→xatboshi 20–28, kichik sarlavha→kontent 24–32). ========================================================================== */ main [data-blok^="SOH-03"] .zq-b__sar{gap:clamp(14px,1.3vw,18px)} main [data-blok^="SOH-03"] .zq-reg .q-javob__q{gap:clamp(8px,.8vw,10px)} main [data-blok="SOH-03-45"] .zq-juft__q{gap:clamp(15px,1.5vw,20px)} /* ========================================================================== §4 · MATN BLOKI — `boshliq4.css` §4 ning ikki yon taʼsiri tuzatiladi. Umumiy qatlam `main p + p{margin-top:16px}` deb yozadi; grid konteynerda bu margin `row-gap` USTIGA qoʻshiladi (grid da margin yigʻilmaydi): a) SOH-02 · `.q-kirish__ikki` — ikki xatboshi YONMA-YON turadi. Margin oʻng ustunni 16 px pastga surib, ikki ustunning tepasini tekislikdan chiqarib yuborgan edi (skrinshotda koʻrinib turardi). Faqat ikki ustunli holatda soʻndiriladi; mobilda ustunlar ustma-ust tushadi va oʻsha 16 px xatboshi oralagʻi sifatida kerak boʻladi. b) SOH-07 · `.soh-oqibat` — row-gap 18 + margin 16 = 34 px, brifning xatboshi→xatboshi 16–24 oraligʻidan yuqori. ========================================================================== */ @media (min-width:761px){ main [data-blok="SOH-02"] .q-kirish__ikki > p + p{margin-top:0} } main [data-blok="SOH-07"] .soh-oqibat{gap:var(--space-md)} main [data-blok="SOH-07"] .soh-oqibat > p + p{margin-top:0} /* ========================================================================== §5 · TASODIFIY BOʻSHLIQ — SOH-02 kirish ustuni Lid bilan ostidagi ikki ustunli matn orasi 74 px edi (44 margin + 24 padding + chiziq). Brif §22: boʻshliq TUZILMANI aytishi kerak, sunʼiy hashamat uchun emas. Chiziqdan oldin 36, keyin 20 — munosabat oʻqiladi, boʻsh maydon yoʻqoladi. Boʻlim balandligi OʻZGARMAYDI: bu ustun qoʻshni indeks ustunidan past (437 vs 453), balandlikni indeks belgilaydi. ========================================================================== */ main [data-blok="SOH-02"] .q-kirish__ikki{ margin-top:clamp(24px,2.6vw,36px); padding-top:clamp(16px,1.5vw,20px); } /* ========================================================================== §6 · TOʻR VA KATAK (brif §13) — kataklar bir-biriga tegmaydi. Tanlagichdagi olti texnika plitasi orasi 8 px edi: ramkali kataklar deyarli yopishgan. Birinchi redaksiya 12 px qoʻygan, sababi «asbob ixcham qolsin» (brif §9) — lekin brif §13 kataklar uchun 24–32 px soʻraydi va OʻLCHOV koʻrsatdi: bu toʻrda ustun gapi BALANDLIKKA umuman taʼsir qilmaydi. Toʻrt kenglikda tekshirildi (plita balandligi oʻzgarmadi): 1440 · 6 ustun 196→186 px, blok 71 px 1024 · 6 ustun 136→126 px, blok 84 px 768 · 3 ustun 209→201 px, blok 142 px 390 · 2 ustun 151→145 px, blok 236 px Shuning uchun ustun gapi 24 (brif §13 ning poli), qator gapi 16 — asbob ixcham qoladi, qatorlar faqat ≤768 da paydo boʻladi (+8 / +16 px). ========================================================================== */ main [data-blok="SOH-06"] .plitalar{ column-gap:var(--space-md); row-gap:var(--space-sm); } /* ========================================================================== §7 · MOBIL ICHKI MUNOSABAT (brif §15) — desktop qiymati koʻpaytirilmaydi ========================================================================== */ @media (max-width:760px){ main [data-blok="SOH-01"] .hs__matn{gap:12px} main [data-blok="SOH-01"] .hs__matn > .lid{margin-top:4px} /* 12+4 = 16 */ main [data-blok="SOH-01"] .hs__amal{margin-top:8px} /* 12+8 = 20 */ main [data-blok^="SOH-03"] .zq-b__sar{gap:14px} main [data-blok^="SOH-03"] .zq-reg .q-javob__q{gap:8px} main [data-blok="SOH-03-45"] .zq-juft__q{gap:16px} main [data-blok="SOH-07"] .soh-oqibat{gap:var(--space-sm)} main [data-blok="SOH-02"] .q-kirish__ikki{margin-top:24px;padding-top:16px} /* ------------------------------------------------------------------ MOBIL AJRALISH — §1 revizyasi DESKTOPGA tegishli. Mobilda ajralish allaqachon 59–96 px (brif §15: 48–72 · katta oʻtish 72–96), yaʼni tuzatilishi kerak boʻlgan «bir xillik» muammosi yoʻq. Shuning uchun desktopda oʻzgargan toʻrt boʻlim mobilda ESKI qiymatida qadaladi — desktop qiymati mobilga koʻchmaydi (brif §15). ------------------------------------------------------------------ */ main section[data-blok="SOH-03-1"][data-blok]{padding-top:var(--pad-normal)} /* 36 */ main section[data-blok="SOH-07"][data-blok]{padding-bottom:var(--pad-ixcham)} /* 26 */ main section[data-blok="SOH-05"][data-blok]{padding-top:var(--pad-ixcham)} /* 26 */ main section[data-blok="SOH-06"][data-blok]{padding-bottom:var(--pad-ixcham)} /* 26 */ /* Mobilda quyuq bandga chiqish: `--pad-bob` (56) 100 px berardi — brifning mobil shifti 96. `--pad-keng` (48) → tugma qirrasidan 90 px, matndan 110. Oʻlchandi: bu chegarada oxirgi element «Katalogni koʻrish» TUGMASI, uning qutisi matndan 20 px pastda tugaydi — koʻz tugma qirrasini koʻradi, yaʼni haqiqiy oʻtish 90 px, brifning 72–96 shiftining ichida. Shu sababli mobilda bundan PASTGA tushirilmadi. */ main section[data-blok="SOH-09"][data-blok]{padding-bottom:var(--pad-keng)} /* Hero (quyuq) → SOH-02 (oq): sahifadagi ikki sirt+ton almashuvidan biri, birinchi ekranning oʻzida turadi. Birinchi redaksiyada kirish 34 → 26 ga TUSHIB ketgan (eng kichik pogʻona) va oʻtish 60 px boʻlgan — brif §4 quyuq↔yorugʻ oʻtishini katta oʻtish deb sanaydi, brif §15 esa mobil katta oʻtish uchun 72–96 soʻraydi. 36 bilan idrok 70 px: 48–72 oraligʻining yuqori chetida, brifning asosiy shikoyati («sections feel too close») yoʻnalishida. Sahifa 10 px uzayadi. */ main section[data-blok="SOH-02"][data-blok]{padding-top:var(--pad-normal)} /* GORIZONTAL TEKISLASH (brif §14: «Maintain strong vertical alignment»). 04+05 juft bobining registrida ikkinchi band mobilda 16 px oʻngga surilib turardi: `.zq-b .zq-reg …` mobil qoidasi bu boʻlimga tegmaydi (u `.zq-juft`), `.zq-juft` uchun esa faqat `nth-child(3)` qaytarilgan edi. Natijada bitta roʻyxatda uch band uch xil chapdan boshlanardi. Endi uchalasi ham 20 px da. */ main [data-blok="SOH-03-45"] .zq-reg .q-javob__q + .q-javob__q{ border-left:0;padding-left:0; } } /* ========================================================================== §N · NAZORATCHI KOʻRIGI (13.09) — sarlavha ↔ tavsif toʻqnashuvi Oʻlchandi: ixcham modullarda `h3 → p` oraligʻi 5–13 px edi (brif §2: «Do not let headings and descriptions visually collide»). Editorial 24–32 px bu yerda notoʻgʻri boʻlardi — bular karta/registr sarlavhalari, sarlavha va tavsif BITTA birlik. Shuning uchun pol 16 px: toʻqnashuv yoʻqoladi, modul shishmaydi. ========================================================================== */ main [data-blok="SOH-10"] .reg__m{row-gap:var(--space-sm)}