/* The reference pages -- /why-tagalog-is-not-on-duolingo and its six siblings. * * WHAT THIS IS AND IS NOT. styles.css is the app's design language and it is * loaded FIRST on these pages: the palette, the field, the font, the buttons * and every token come from there, unchanged. This file is only the difference * between a fixed-viewport game shell and a document somebody arrived at from a * search result -- a page that scrolls, that can be selected and copied, that * has a masthead instead of a tab bar, and that sets tables of Tagalog rather * than a tree of nodes. * * WHY NOT A SECOND COPY OF THE TOKENS. ../reflex-chess solves this by * duplicating the palette into seo.css so its content pages make exactly one * stylesheet request. That trade is wrong here for one specific reason: the * palette on this site is being worked on, and a duplicated hex value is a * palette change that lands on the app and misses the pages -- two surfaces of * one product drifting apart, discovered by a reader who taps "open the app" * and watches the colours change. So this sheet loads after styles.css and * contains NO COLOUR OF ITS OWN. Every colour below is a var(). If a rule here * needs a hex code, the token it wants is missing from styles.css and that is * where it should be added. * * EVERYTHING IS SCOPED TO .doc, which is on of a generated page and * nowhere in the app. The app's own screens cannot be reached by anything in * this file, so a change here can never reflow a lesson. */ /* ---------- the document, rather than the app shell ---------- styles.css pins the app to the viewport (height:100%) and turns off text selection, because an app does not let you long-press its chrome. Both are wrong for a page whose entire job is to be read and quoted. */ body.doc { height: auto; min-height: 100%; user-select: text; -webkit-user-select: text; font-weight: 450; line-height: 1.6; } /* ---------- masthead ---------- */ .doc .dochead { border-bottom: 1px solid var(--rule); background: var(--field-veil); } /* WRAPS RATHER THAN OVERFLOWS. The brand is white-space:nowrap (styles.css owns that, and it is right in the app's stats bar) and the nav is two links, which together are wider than a 390px phone. Left as one row it pushed the whole DOCUMENT wider than the viewport, so every paragraph on the page ran off the right edge -- a horizontal scrollbar on a page of body copy, caused by a header. */ .doc .dochead-in { max-width: 46rem; margin: 0 auto; padding: .7rem var(--pad); display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .8rem; min-width: 0; } .doc .dochead .brand { flex: 1; min-width: 0; } .doc .docnav { display: flex; gap: .9rem; font-size: .88rem; font-weight: 600; } .doc .docnav a { color: var(--dim); text-decoration: none; white-space: nowrap; } .doc .docnav a:hover { color: var(--ink); } .doc .docwrap { max-width: 46rem; margin: 0 auto; padding: 0 var(--pad) 3rem; } /* ---------- breadcrumb ---------- */ .doc .crumbs { font-size: .82rem; color: var(--dim); padding: 1rem 0 .2rem; display: flex; flex-wrap: wrap; gap: .4rem; } .doc .crumbs a { color: var(--dim); } /* ---------- type ---------- A single column at a readable measure. The h1 is the only thing on these pages allowed to be app-sized; everything under it is set for prose, because a reader who came from a search result is here to read a paragraph, not to hit a target with a thumb. */ .doc h1 { font-size: clamp(1.7rem, 6vw, 2.35rem); line-height: 1.12; letter-spacing: -.02em; margin: .2rem 0 .6rem; } .doc h2 { font-size: 1.28rem; letter-spacing: -.01em; margin: 2.4rem 0 .6rem; } .doc h3 { font-size: 1.02rem; margin: 1.6rem 0 .4rem; } .doc p { margin: 0 0 .9rem; } .doc .lede { font-size: 1.08rem; color: var(--dim); margin-bottom: 1.4rem; } .doc ul, .doc ol { margin: 0 0 1rem; padding-left: 1.2rem; } .doc li { margin: 0 0 .4rem; } .doc b, .doc strong { font-weight: 700; } /* Tagalog, wherever it is set inside English. Marked up with lang="tl" as well, which is what a screen reader reads; this is only the visual half. */ .doc .tl { font-weight: 700; font-style: normal; color: var(--ink); } .doc .en { color: var(--dim); } /* ---------- tables ---------- The marker chart, the pronoun grid and the phrase list are all tables and they are the reason these pages rank at all -- "tagalog pronouns chart" and "tagalog case markers" are queries for a table. A table on a phone is a horizontal scroller inside its own box, never a page that scrolls sideways. */ .doc .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); } .doc table { border-collapse: collapse; width: 100%; font-size: .95rem; } .doc th, .doc td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; } .doc thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); white-space: nowrap; } .doc tbody tr:last-child th, .doc tbody tr:last-child td { border-bottom: 0; } .doc tbody th { font-weight: 600; color: var(--dim); font-size: .88rem; } .doc td .tl { font-size: 1.02rem; } /* BOTH th AND td. The row headers carry the example noun and the column headers carry the plain-English gloss, both in a , and inline they read as one run-on word: "an ordinary thingbahay (house)". */ .doc th small, .doc td small { display: block; color: var(--dim); font-size: .8rem; line-height: 1.4; font-weight: 500; text-transform: none; letter-spacing: 0; } /* The nine and twenty-one cell charts want the word to be the loudest thing in the cell, because the chart is what the page is for. */ .doc .chart td .tl { font-size: 1.12rem; } .doc .chart tbody th { width: 34%; } /* ---------- the play link ---------- A real to a real file, so it works with JavaScript off; the page upgrades it to play in place when scripting is on. */ .doc .say { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; font-size: .78rem; font-weight: 600; color: var(--brand-ink, var(--brand)); text-decoration: none; vertical-align: .05em; } .doc .say:hover { text-decoration: underline; } .doc .say svg { width: .95em; height: .95em; } /* ---------- register and rank chips ---------- */ .doc .chip-r { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); border: 1px solid var(--rule); border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; } /* .fq, NOT .rank. styles.css already owns .rank -- it is the app's rank card, with an icon, a name and a progress bar -- and a phrase list that borrows the name inherits a circle around every number and whatever that component becomes next. */ .doc .fq { color: var(--dim); font-variant-numeric: tabular-nums; font-size: .85rem; } /* ---------- panels ---------- */ .doc .panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.05rem; margin: 0 0 1.2rem; } .doc .panel > :last-child { margin-bottom: 0; } .doc .panel h3 { margin-top: 0; } /* The honest panel. Everything on this site that limits a claim -- the frequency ordering being an estimate, the review being an owner's pass -- is set in this one treatment, so a reader learns to recognise it. */ .doc .honest { border-left: 3px solid var(--brand); background: var(--card-2); font-size: .92rem; } /* ---------- call to action ---------- */ .doc .cta { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1rem 1.05rem; margin: 1.4rem 0; box-shadow: 0 var(--shelf) 0 var(--rule); } .doc .cta b { display: block; font-size: 1.05rem; margin-bottom: .2rem; } .doc .cta span { color: var(--dim); font-size: .92rem; } .doc .cta:active { transform: translateY(var(--shelf)); box-shadow: none; } .doc .btn { display: inline-block; text-align: center; text-decoration: none; } /* ---------- the sibling pages, on every page ---------- Seven pages that never link to each other are seven orphans. */ .doc .more { margin-top: 2.6rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; } .doc .more ul { list-style: none; padding: 0; } .doc .more li { margin: 0 0 .7rem; } .doc .more a { font-weight: 600; text-decoration: none; } .doc .more span { display: block; color: var(--dim); font-size: .88rem; } .doc .docfoot { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; color: var(--dim); font-size: .85rem; } .doc .docfoot p { margin-bottom: .6rem; } @media print { .doc .dochead, .doc .more, .doc .cta, .doc .say { display: none; } } /* ---- chart cells align, whatever length the word is --------------------- * * The word and its play link sat inline, so a cell wrapped or did not * depending on how many characters the word happened to have: `si` and `ni` * stayed on one line and `kay` pushed its link onto a second, which made that * one row taller than its neighbours and knocked the whole chart out of * alignment. The reader reads a misaligned table as a broken table, and the * chart is the most load-bearing thing on this page. * * Stacking every cell makes them all the same shape regardless of the word, * which is the only version that survives `ang mga` sitting next to `si`. * * AND NOT BY SETTING display ON THE CELL. The first attempt made the td a flex * column, which takes it out of table layout entirely: the row stopped being a * row and all nine cells stacked into a single column. A td has to stay a * table-cell. The stacking has to happen to what is INSIDE it. */ .doc .chart td .tl { display: block; } .doc .chart td .say { display: inline-flex; white-space: nowrap; margin-top: .25rem; } /* --------------------------------------------------------------------------- THE LOOKUP (/translate). Mobile first: this is the page somebody opens one handed, standing in a shop, trying to remember a word. Everything below is sized for a thumb before it is sized for a mouse. --------------------------------------------------------------------------- */ .doc .lk-box { margin: 1.25rem 0 .5rem; } .doc .lk-label { display: block; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: .4rem; } .doc .lk-input { width: 100%; /* 16px MINIMUM, and this is not a style choice: iOS Safari zooms the whole page when a focused input is under 16px, and the reader then has to pinch back out to read what they searched for. */ font: inherit; font-size: 1rem; padding: .8rem .9rem; min-height: 48px; /* a comfortable tap target */ border-radius: .6rem; border: 2px solid var(--line); background: var(--card); color: var(--ink); -webkit-appearance: none; appearance: none; } .doc .lk-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .doc .lk-input:disabled { opacity: .6; } .doc .lk-h { margin-top: 1.6rem; } .doc .lk-sub { opacity: .8; margin-top: -.4rem; } .doc .lk-list { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .6rem; } .doc .lk-item { border: 1px solid var(--line); border-radius: .7rem; padding: .8rem .9rem; background: var(--card); } .doc .lk-top .lk-item { border-color: var(--brand); } .doc .lk-tl { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.15rem; } .doc .lk-en { margin-top: .15rem; } .doc .lk-note { margin-top: .3rem; font-size: .9rem; opacity: .8; } .doc .lk-meta { margin-top: .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .8rem; } .doc .lk-why { /* The reason this phrase is here. It is the whole point of the section, so it gets the accent rather than being greyed out as metadata. */ color: var(--brand-ink, var(--brand)); font-weight: 600; } .doc .lk-item .say { /* 44px is the smallest thing a thumb hits reliably. The glyph is small; the hit area is not. */ display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: -10px 0; border-radius: .5rem; text-decoration: none; } /* The full translator's block. Visually separated from the curated results above it, because one is a fixed set a person checked and the other is a model's answer, and a reader deserves to know which they are reading. */ .doc #lk-ai { margin-top: 1.5rem; } .doc .lk-tr { border: 1px solid var(--brand); border-radius: .7rem; padding: .9rem 1rem; background: var(--card); } .doc .lk-tr-head { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; display: flex; gap: .5rem; align-items: center; } .doc .lk-tr-main { font-size: 1.35rem; margin-top: .35rem; line-height: 1.3; } .doc .lk-warn { font-size: .9rem; margin: .5rem 0 0; } .doc .lk-h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; } .doc .lk-go { text-align: left; } .doc .lk-ipa { font-size: .95rem; opacity: .75; } .doc .lk-senses { margin: .4rem 0 0; padding-left: 1.1rem; } .doc .lk-senses li { margin: .15rem 0; } .doc .lk-tags { font-size: .78rem; opacity: .7; } .doc .lk-forms { margin-top: .4rem; font-size: .85rem; opacity: .8; } .doc .lk-src { margin-top: .8rem; font-size: .8rem; opacity: .7; }