/** * Right-to-left overrides. Loaded (via head.html) only for languages * whose _data/languages.yml entry sets `dir: rtl` - today that is Arabic. * * Flex and grid mirror themselves once is set, so this * file only has to undo the physical left/right values in theme.css, * landing.css, lessons.css and lessons-index.css, and pin the bits that * must stay left-to-right no matter what: SQL, result tables and the * hero demo, which are all code. */ /* ─── Typography ─── JetBrains Mono has no Arabic glyphs, so headings and the small mono labels fall back to something arbitrary and badly spaced. Point the display text at a stack that actually covers Arabic; `code`, `pre` and `.mono` keep the monospace face below, where the content is SQL. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .kicker, [dir="rtl"] .kicker-pill, [dir="rtl"] .hero .stats, [dir="rtl"] .free-badge, [dir="rtl"] .lesson-progress-pill, [dir="rtl"] .result-empty, [dir="rtl"] .site-footer { font-family: var(--font-sans); } /* ─── Things that must stay LTR: code and query output ─── */ [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .mono, [dir="rtl"] #sql-input, [dir="rtl"] .demo, [dir="rtl"] .sample-card__chrome, [dir="rtl"] .sql-table, [dir="rtl"] .table-viewer, [dir="rtl"] .table-responsive-xl, [dir="rtl"] .answer-reveal__sql, [dir="rtl"] .lesson-bar .crumb, [dir="rtl"] .hero-demo { direction: ltr; text-align: left; } /* …but their surrounding labels still read right-to-left. */ [dir="rtl"] .demo .head, [dir="rtl"] .demo .toolbar { direction: ltr; } /* The editor itself is LTR so SQL types correctly, but the placeholder is a sentence of Arabic prose - let it read right-to-left. */ [dir="rtl"] #sql-input::placeholder { direction: rtl; text-align: right; } /* ─── Header ─── */ [dir="rtl"] .site-header nav { margin-left: 0; margin-right: 28px; } [dir="rtl"] .site-header .actions { margin-left: 0; margin-right: auto; } [dir="rtl"] .site-header .menu-toggle { margin-right: 0; margin-left: 4px; } /* ─── Mobile drawer slides in from the right ─── */ [dir="rtl"] .site-nav-drawer { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--c-border); transform: translateX(100%); } [dir="rtl"] .site-nav-drawer.is-open { transform: translateX(0); } /* ─── Footer ─── */ [dir="rtl"] .site-footer .langs a { margin-right: 0; margin-left: 8px; } /* ─── Beekeeper promo card accent edge ─── */ [dir="rtl"] .bk-card { border-left: 1px solid #f0a92c; border-right: 5px solid #f0a92c; } /* ─── Floating CTA ─── */ [dir="rtl"] .floating-cta { right: auto; left: 20px; } @media (max-width: 768px) { [dir="rtl"] .floating-cta { right: auto; left: 12px; } } /* ─── Landing ─── */ [dir="rtl"] .not-found-page .popular-grid { text-align: right; } /* ─── Lesson page ─── */ [dir="rtl"] .lesson-bar .nav-actions { margin-left: 0; margin-right: auto; } [dir="rtl"] .lesson-col + .lesson-col { border-left: 0; border-right: 1px solid var(--c-border); } @media (max-width: 900px) { [dir="rtl"] .lesson-col + .lesson-col { border-right: 0; } } [dir="rtl"] .hints-toggle .count, [dir="rtl"] .frame-header .actions, [dir="rtl"] .run-bar .status { margin-left: 0; margin-right: auto; } [dir="rtl"] .btn-ghost { text-align: right; } [dir="rtl"] .table-tabs .table-tab .row-count, [dir="rtl"] .table-viewer th .pk-badge { margin-left: 0; margin-right: 6px; } /* ─── Lessons index ─── */ [dir="rtl"] .track-section .track-progress { margin-left: 0; margin-right: auto; } /* ─── Arrows in copy point the other way in RTL; the glyphs come from _data/ui.yml, so nothing to flip here - but progress bars fill from the right. ─── */ [dir="rtl"] .progress-bar .bar { margin-left: auto; }