/** * فاصله‌ی سراسری محتوا از نوار هدر شناور + اصلاح منوی دسته‌بندی‌های هدر. * * مشکل ریشه‌ای (یک‌بار برای همیشه) * --------------------------------- * نوار هدر سایت `.dlh-bar` است با `position: fixed` و `top: 16px` و ارتفاع * ۷۴ پیکسل — یعنی همیشه ۹۰ پیکسل اولِ صفحه را می‌پوشاند. چون fixed است، * هیچ جایی در جریان صفحه اشغال نمی‌کند و محتوا از پیکسل صفر شروع می‌شود و * زیرش می‌رود. تنها جایی که این عمدی است صفحه‌ی اصلی است: آن‌جا هیرو تیره * است و هدر باید رویش شناور باشد. * * تا پیش از این فایل، برای هر قالبی که مشکل دیده می‌شد یک وصله‌ی جدا نوشته * می‌شد (هیرو صفحه‌ی اصلی، آرشیو دسته‌بندی، نتایج جستجو). این راه هیچ‌وقت * تمام نمی‌شد، چون هر قالب تازه‌ای دوباره همان مشکل را داشت. * * راه‌حل: به `.site` — یعنی همان کانتینری که در همه‌ی قالب‌های این سایت * محتوا را در بر می‌گیرد — یک padding بالا داده می‌شود. چون هدر fixed است، * این padding فقط محتوا را پایین می‌آورد و هیچ چیز دیگری را جابه‌جا * نمی‌کند. * * چرا ۱۰۶: ۹۰ پیکسل ارتفاع مؤثر هدر + ۱۶ پیکسل نفس. عنصری که دقیقاً از * صفر شروع می‌شود ۱۶ پیکسل فاصله می‌گیرد؛ قالب‌هایی که خودشان کمی فاصله‌ی * داخلی دارند طبیعتاً بازتر می‌نشینند. * * استثناها * -------- * ۱. صفحه‌ی اصلی (`body.home`) — هدر باید روی هیرو تیره شناور بماند. فاصله‌ی * آن جداگانه و داخل خود هیرو تنظیم شده (assets/css/dl-subs-home.css). * ۲. هر صفحه‌ی دیگری که بخواهد هدر رویش شناور باشد، کافی است کلاس * `dl-full-bleed-top` روی `` بگیرد. * * تاریخ: 2026-09-21 */ body:not(.home):not(.dl-full-bleed-top) .site { padding-top: 106px; } @media (max-width: 767px) { body:not(.home):not(.dl-full-bleed-top) .site { padding-top: 96px; } } /** * منوی بازشوی «دوره‌ها» در هدر — چسبیدن عنوان دسته به تعداد دوره * ------------------------------------------------------------- * کارت‌های دسته‌بندی (`a.dlh-cat`) در استایل خودِ هدر با * `display: flex; flex-direction: column` طراحی شده‌اند تا عنوان بالا و * تعداد دوره پایینش بنشیند. ولی قاعده‌ی `.dlh-root a { display: inline-block }` * که در همان استایل بعدتر می‌آید و specificity بالاتری دارد (0,1,1 در * برابر 0,1,0) آن `flex` را باطل می‌کرد. نتیجه: `strong` و `span` هر دو * inline می‌ماندند و روی یک خط به هم می‌چسبیدند → * «انگلیسی بزرگسالان12 دوره». * * راه‌حل: همان طراحیِ اصلی با specificity بالاتر برگردانده می‌شود * (`.dlh-root a.dlh-cat` = 0,2,1) و دو فرزندش block می‌شوند تا هر کدام * خط خودش را بگیرد. فاصله‌ی بین دو خط از `margin-top: 4px` خودِ * `.dlh-cat span` می‌آید، پس چیزی برای آن اضافه نشده. */ .dlh-root a.dlh-cat, .dlh-cats a.dlh-cat { display: flex !important; flex-direction: column; align-items: flex-start; justify-content: center; } .dlh-root a.dlh-cat > strong, .dlh-root a.dlh-cat > span, .dlh-cats a.dlh-cat > strong, .dlh-cats a.dlh-cat > span { display: block; max-width: 100%; }