/* ============================================================ * dlha-single.css — صفحة المقالة * ============================================================ * تنسيق جسم المقال: النصّ والعناوين والقوائم والجداول والاقتباس * والصور والروابط. * * ملاحظة على الاتجاه: زرّ اللغة يقلب اتجاه الصفحة كلها. ونصّ المقال * عربيّ دائمًا، فيُثبَّت اتجاهه هنا حتى لا ينقلب معها. * ============================================================ */ .dlha-single .dlha-body{ /* ————— الاتجاه يتبع اللغة ————— كان مثبَّتًا على rtl حتى لا ينقلب نصّ المقال العربيّ مع زرّ اللغة. وقد أُلغي ذلك بطلبٍ صريح: كل شيء في المقالات والصفحات — بما فيه المحتوى وما يُدرَج فيه من شورت كود — ينقلب مع التبديل. فالاتجاه يُورَّث من كبقيّة الصفحة، ولا يُفرض هنا. */ color:var(--dlha-c-text); font-size:var(--dlha-fs-body); line-height:2.15; } .dlha-body > *:first-child{margin-top:0;} .dlha-body > *:last-child{margin-bottom:0;} .dlha-body > p{margin:0 0 1.35em;} .dlha-body > p a, .dlha-body > ul a, .dlha-body > ol a, .dlha-body > blockquote a, .dlha-body > h2 a, .dlha-body > h3 a, .dlha-body > h4 a, .dlha-body > figure a, .dlha-body > table a{ color:var(--dlha-c-accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease; } .dlha-body > p a:hover, .dlha-body > ul a:hover, .dlha-body > ol a:hover, .dlha-body > blockquote a:hover, .dlha-body > h2 a:hover, .dlha-body > h3 a:hover, .dlha-body > h4 a:hover, .dlha-body > figure a:hover, .dlha-body > table a:hover{border-bottom-color:var(--dlha-c-accent);} /* ============ العناوين الداخلية ============ */ .dlha-body > h2, .dlha-body > h3, .dlha-body > h4{ margin:1.8em 0 .7em; color:var(--dlha-c-head); font-weight:800; line-height:1.7; } .dlha-body > h2{ font-size:var(--dlha-fs-h2); padding-inline-start:12px; border-inline-start:4px solid var(--dlha-c-accent); } .dlha-body > h3{font-size:var(--dlha-fs-h3);} .dlha-body > h4{font-size:var(--dlha-fs-h4);} /* ============ القوائم ============ */ .dlha-body > ul, .dlha-body > ol{margin:0 0 1.35em;padding-inline-start:1.6em;} .dlha-body > ul li, .dlha-body > ol li{margin:0 0 .5em;} .dlha-body > ul li::marker, .dlha-body > ol li::marker{color:var(--dlha-c-accent);} /* ============ الاقتباس ============ */ .dlha-body > blockquote{ margin:1.6em 0; padding:16px 20px; border:1px solid var(--dlha-c-border); border-inline-start:4px solid var(--dlha-c-accent); border-radius:12px; background:var(--hp-bg-2); color:var(--dlha-c-head); font-size:calc(var(--dlha-fs-body) * 1.03); line-height:2; } .dlha-body > blockquote p:last-child{margin-bottom:0;} .dlha-body > blockquote cite{ display:block; margin-top:10px; color:var(--dlha-c-muted); font-size:13.5px; font-style:normal; } /* ============ الجداول ============ */ .dlha-body > figure.wp-block-table, .dlha-body .wp-block-table{margin:1.6em 0;overflow-x:auto;} .dlha-body > table{ width:100%; border-collapse:collapse; font-size:calc(var(--dlha-fs-body) * .88); background:var(--hp-bg-2); border-radius:10px; overflow:hidden; } .dlha-body > table th, .dlha-body > figure table th, .dlha-body > table td, .dlha-body > figure table td{ padding:11px 13px; border:1px solid var(--dlha-c-border); text-align:inherit; } .dlha-body > table th, .dlha-body > figure table th{ background:var(--dlha-c-wrap); color:var(--dlha-c-head); font-weight:800; } .dlha-body > table tr, .dlha-body > figure table tr:nth-child(even) td{background:rgba(255,255,255,.014);} /* ============ الصور داخل المقال ============ */ .dlha-body > img,.dlha-body > p img,.dlha-body > figure img{max-width:100%;height:auto;border-radius:12px;} .dlha-body > figure{margin:1.6em 0;} .dlha-body figcaption{ padding-top:8px; color:var(--dlha-c-muted); font-size:12.5px; line-height:1.8; text-align:center; } /* ============ الكود ============ */ .dlha-body > code{ padding:.16em .45em; border-radius:5px; background:var(--hp-bg); font-size:.92em; direction:ltr; display:inline-block; } .dlha-body > pre{ margin:1.5em 0; padding:15px 16px; border-radius:12px; background:var(--hp-bg); overflow:auto; direction:ltr; text-align:left; } .dlha-body > hr{margin:2em 0;border:0;border-top:1px solid var(--dlha-c-border);} /* ============ تقسيم الصفحات ============ */ .dlha-pages{ margin:22px 0 0; padding-top:16px; border-top:1px solid var(--dlha-c-border); display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .dlha-pages a, .dlha-pages > span{ padding:7px 14px; border:1px solid var(--dlha-c-border); border-radius:8px; color:var(--dlha-c-text); text-decoration:none; font-size:14px; } .dlha-pages a:hover{border-color:var(--dlha-c-accent);color:var(--dlha-c-accent);} /* ============================================================ * تخطيط السايدبار — في المقالات وحدها * ============================================================ * العرض يتوسّع بدل أن يُقتطع من المقال: الحاوية تصير بعرض المقال + * السايدبار + الفاصل. فلا ينضغط شيء ممّا هو قائم. * * والعرضان من الإعدادات (--dlha-w-art و--dlha-w-sb)، والقيم هنا هي * الافتراض حين لا يُطبع شيء. * * والاتجاه منطقيّ لا ثابت: inline-end يعني اليسار في العربية، * وينقلب يمينًا وحده عند التبديل إلى الإنجليزية. * ============================================================ */ .single-post.dlha-on{ --dlha-w-art:1050px; --dlha-w-sb:300px; --dlha-sb-gap:20px; } .dlha-has-sb .dlha-main{ max-width:calc(var(--dlha-w-art) + var(--dlha-w-sb) + var(--dlha-sb-gap)); display:grid; grid-template-columns:minmax(0,1fr) var(--dlha-w-sb); gap:var(--dlha-sb-gap); align-items:start; } /* عمود المقال: المقال ثمّ أخبار ذات صلة تحته */ .dlha-has-sb .dlha-col{ grid-column:1; min-width:0; } /* ————— السايدبار ————— يتحرّك مع الصفحة حتى ينتهي، ثمّ يثبت آخره في الشاشة. وهذا هو السلوك الصحيح: تثبيتُ ما هو أطول من الشاشة يعني أن جزءًا منه لن يُرى أبدًا. */ .dlha-has-sb .dlha-sb{ grid-column:2; position:sticky; inset-block-start:16px; align-self:start; } @media (max-width:1024px){ /* عمود واحد: المقال ثمّ أخبار ذات صلة ثمّ السايدبار */ .dlha-has-sb .dlha-main{ display:block; max-width:var(--dlha-w-art); } .dlha-has-sb .dlha-sb{ position:static; margin-top:var(--dlha-gap); } }