/* ========================================================================== St-Takla.org - Learn Languages - lesson index pages -------------------------------------------------------------------------- The 17 index pages were built by hand over many years as grids: a cramped ~470px table adrift in a 1280px window, 2px double borders, uneven columns that clip the longer lesson names, and only the first column clickable - so the tap target was a few characters wide on a phone. The markup is now a list of cards, one per lesson, and this file styles it. Everything is scoped under .st-index / .st-index-pager, so nothing else on the page is affected and no class has to be added to . ========================================================================== */ .st-index { display: grid; /* Cards size themselves; the grid decides how many fit per row, so the same markup gives 3 columns on a desktop and 1 on a phone with no breakpoints. */ grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; max-width: 1000px; margin: 18px auto 24px; padding: 0 10px; font-family: tahoma, arial, sans-serif; list-style: none; } .st-index-card { display: flex; align-items: flex-start; gap: 10px; /* 56px keeps a whole card a comfortable touch target on a phone. */ min-height: 56px; padding: 10px 12px; border: 1px solid #d7d7e6; border-radius: 10px; background: #fafaff; color: #152588; text-decoration: none; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; } .st-index-card:hover, .st-index-card:focus-visible { background: #eef0ff; border-color: #8a8ac0; box-shadow: 0 2px 10px rgba(21, 37, 136, .12); outline: none; text-decoration: none; } .st-index-card:active { background: #dfe3ff; } /* The lesson number, as a badge rather than a table column. */ .st-index-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: #152588; color: #fff; font-size: 12px; font-weight: bold; line-height: 1; } .st-index-body { /* min-width:0 lets the ellipsis below actually work inside a flex child. */ min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* The word in the language being taught - the heading of the card. */ .st-index-native { font-size: 15px; font-weight: bold; line-height: 1.3; } .st-index-en { font-size: 13px; color: #444; line-height: 1.3; } /* Arabic runs the other way; isolate it so it cannot reorder the line above. */ .st-index-ar { font-size: 14px; color: #333; line-height: 1.4; direction: rtl; unicode-bidi: isolate; } /* A heading inside the list ("Animals", "The House") keeps its group together by spanning the whole grid row. */ .st-index-group { grid-column: 1 / -1; /* Some groups sit BETWEEN two grids rather than inside one, so the width has to be constrained here too - otherwise the underline runs the full width of the page while the cards below stop at 1000px. */ max-width: 1000px; margin: 22px auto 2px; padding: 0 10px 6px; border-bottom: 2px solid #d7d7e6; color: #152588; font-size: 18px; font-weight: bold; text-align: center; } /* -------------------------------------------------------------------------- Pager - the "Index 1 / Index 2 / Index 3" links that used to sit in a bordered box inside the table itself. -------------------------------------------------------------------------- */ .st-index-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 1000px; margin: 18px auto; padding: 0 10px; font-family: tahoma, arial, sans-serif; } .st-index-pager a, .st-index-pager span { display: inline-block; min-height: 38px; padding: 9px 14px; border: 1px solid #d7d7e6; border-radius: 19px; background: #fafaff; color: #152588; font-size: 14px; line-height: 1.4; text-decoration: none; } .st-index-pager a:hover, .st-index-pager a:focus-visible { background: #eef0ff; border-color: #8a8ac0; outline: none; } /* The page you are already on. */ .st-index-pager .is-here { background: #152588; border-color: #152588; color: #fff; font-weight: bold; } .st-index-pager-label { flex-basis: 100%; margin-bottom: 2px; color: #6a6a9c; font-size: 12px; text-align: center; } /* -------------------------------------------------------------------------- The rest of the page -------------------------------------------------------------------------- The index pages are pre-responsive markup - a fixed-width photo, a rule set to width="580", leftover layout tables - any one of which stretches the page past a phone screen and pushes the heading off the edge. The lesson pages deal with this in lang-audio.css; the index pages load this file instead, so the same caps are repeated here, scoped to the content wrapper that all 15 of them have. -------------------------------------------------------------------------- */ #bodytext img, #bodytext table, #bodytext td, #bodytext hr, #bodytext iframe, #bodytext object, #bodytext embed { max-width: 100%; } #bodytext img { height: auto; } /* A

refuses to shrink below the intrinsic width of its contents unless min-width is set explicitly - it is the one element max-width:100% cannot tame, and it was holding one index page 433px wider than the screen. */ #bodytext fieldset { min-width: 0; max-width: 100%; } /* The lesson lists are card grids now, so any table still left inside the content is decoration from the original layout - a heading box, a rule. Their width="580" attributes are what remains of a 1990s fixed layout and simply push the page sideways on a phone. */ #bodytext table[width] { width: auto !important; } /* A long unbroken word (a URL, a compound) must wrap rather than widen the page for everything else. */ .st-index-native, .st-index-en, .st-index-ar { overflow-wrap: break-word; } /* A

puts its border and padding OUTSIDE the width it is given, so a 390px grid inside one became a 414px box and pushed the page sideways. These pages close #bodytext early, so the wrapper-scoped rules above never reach it - hence the explicit class. */ .st-index-box { box-sizing: border-box; min-width: 0; max-width: 100%; padding-left: 0; padding-right: 0; border: 0; margin: 0; } /* -------------------------------------------------------------------------- Supporting blocks -------------------------------------------------------------------------- */ /* The "How to Memorize Foreign Language Vocabulary" panel on the section landing page - it used to share a hard-bordered table with the language links and crowded them out. */ .st-index-aside { max-width: 1000px; margin: 22px auto; padding: 14px 16px; border: 1px solid #d7d7e6; border-radius: 10px; background: #f7f7fb; font-family: tahoma, arial, sans-serif; font-size: 13.5px; line-height: 1.6; color: #333; } .st-index-aside h3 { margin: 0 0 8px; padding: 0; border: 0; color: #152588; font-size: 16px; } .st-index-aside ol, .st-index-aside ul { margin: 8px 0 0; padding-inline-start: 22px; } .st-index-aside li { margin-bottom: 6px; } /* The old pages padded themselves out with runs of empty paragraphs, which left a dead band of whitespace above the table. */ .st-index-gap { display: none; } @media (max-width: 560px) { .st-index { gap: 8px; padding: 0 8px; } .st-index-card { padding: 9px 10px; } } @media print { .st-index-pager { display: none; } .st-index-card { border-color: #999; background: none; } }