/* ============================================================================= Orthodox Ebook Library — main stylesheet MOBILE-PHONE-FIRST (designed at 360px, enhanced at >=40em). No frameworks. Uses CSS LOGICAL PROPERTIES throughout so RTL languages mirror automatically (the is set from data/languages.yaml). Dark mode via prefers-color-scheme. Tap targets: badges >=44px, language rows >=48px. ========================================================================== */ :root { --max-width: 46rem; --ink: #23201a; --ink-soft: #6b6459; --bg: #fbfaf7; --surface: #ffffff; --surface-alt: #f4f1ea; --border: #e4ded2; --accent: #7a5b1e; --gold: #c9a227; --focus: #1a6be0; --serif: Georgia, "Times New Roman", "PT Serif", serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tap: 44px; /* Ground the subject icons sit on. The artwork is painted for a light page — several pieces (the music stave, the dog, the crown of thorns) are dark ink with no light fill of their own and disappear on the dark theme, so there it gets a warm light tile. On the light theme the page already is that ground. */ --icon-tile: transparent; } @media (prefers-color-scheme: dark) { :root { --ink: #e9e5dc; --ink-soft: #b4ac9d; --bg: #161410; --surface: #1e1b16; --surface-alt: #221f18; --border: #332e25; --accent: #e0c072; --focus: #6ea8ff; --icon-tile: #efe9dc; } } /* ---- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; } img { max-inline-size: 100%; block-size: auto; } a { color: var(--accent); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; } .container { max-inline-size: var(--max-width); margin-inline: auto; padding-inline: 1rem; } .skip-link { position: absolute; inset-inline-start: -9999px; inset-block-start: 0; background: var(--surface); color: var(--accent); padding: .6rem .9rem; border-radius: 8px; text-decoration: none; z-index: 100; } .skip-link:focus { inset-inline-start: .5rem; inset-block-start: .5rem; } /* ---- Header ------------------------------------------------------------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 10; background: var(--surface); border-block-end: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 52px; } .site-name { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; } .nav-all-langs { font-size: .85rem; color: var(--accent); text-decoration: none; white-space: nowrap; } /* ---- Breadcrumbs -------------------------------------------------------- */ .breadcrumbs { padding-block: .6rem; font-size: .82rem; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: 0; padding: 0; } .breadcrumbs li { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); } .breadcrumbs li + li::before { content: "\203A"; color: var(--ink-soft); } /* › */ [dir="rtl"] .breadcrumbs li + li::before { content: "\2039"; } /* ‹ */ .breadcrumbs a { color: var(--accent); text-decoration: none; } .breadcrumbs [aria-current="page"] { color: var(--ink-soft); } /* ---- Typography / layout ------------------------------------------------ */ main.container { padding-block: 1rem 3rem; } .page-title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; margin-block: .2rem .6rem; } .section-heading { font-family: var(--serif); font-size: 1.2rem; margin-block: 1.6rem .6rem; padding-block-end: .3rem; border-block-end: 1px solid var(--border); } .prose p { margin-block: 0 1rem; line-height: 1.7; } .intro { color: var(--ink-soft); } .empty { color: var(--ink-soft); font-style: italic; padding-block: 1rem; } /* ---- Lists: subjects (home) & authors (subject page) -------------------- */ .subject-list, .author-list, .booklist, .plain-list { list-style: none; margin: 0; padding: 0; } .subject-card, .author-card { padding-block: .9rem; border-block-end: 1px solid var(--border); } .subject-link, .author-link { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-block-size: var(--tap); text-decoration: none; } /* Subject rows carry an icon, so centre them; author rows keep the baseline. */ .subject-link { align-items: center; } .subject-head { display: flex; align-items: center; gap: .8rem; min-inline-size: 0; } /* One fixed box for every icon — the artwork differs, the footprint must not. 40px, not the ~26px a flat glyph wanted: these are painted illustrations whose detail turns to mush much below that. */ .subject-icon { flex: 0 0 auto; inline-size: 2.5rem; block-size: 2.5rem; display: block; object-fit: contain; background: var(--icon-tile); border-radius: 6px; padding: 2px; box-sizing: border-box; } .subject-name, .author-name { font-family: var(--serif); font-size: 1.15rem; color: var(--accent); } .subject-meta, .author-meta { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; } /* ---- Author & book headers --------------------------------------------- */ .author-head, .book-head { display: flex; gap: 1rem; align-items: flex-start; margin-block-end: 1rem; } .author-portrait { flex: 0 0 auto; inline-size: 84px; color: var(--accent); } .book-cover { flex: 0 0 auto; inline-size: 110px; color: var(--accent); } .placeholder { display: block; inline-size: 100%; } .author-full-name { margin-block: 0; color: var(--ink-soft); font-style: italic; } .book-byline { margin-block: 0 .4rem; } .book-byline a { color: var(--accent); text-decoration: none; } .book-lead { margin-block: .3rem 0; color: var(--ink-soft); } .bio { margin-block: 1rem; } .book-formats { margin-block: 1.5rem; } .book-description { margin-block-start: 1.5rem; } /* ---- Catalog book rows (author page) ----------------------------------- */ /* Mobile: stacked. Desktop (>=40em): single row with badges to the end. */ .book-row { display: flex; flex-direction: column; gap: .6rem; padding-block: 1rem; padding-inline: .6rem; border-block-end: 1px solid var(--border); } .book-row:nth-child(odd) { background: var(--surface-alt); } .book-row-text { display: flex; flex-direction: column; gap: .15rem; } .book-row-title { font-family: var(--serif); font-size: 1.2rem; color: var(--accent); text-decoration: none; display: inline-block; padding-block: .35rem; } .book-row-title:hover { text-decoration: underline; } /* ---- Format badges ------------------------------------------------------ */ .badges { display: flex; flex-wrap: wrap; gap: .5rem; } .badge { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-block-size: var(--tap); min-inline-size: 3.4rem; padding-inline: 1.1rem; padding-block: .5rem; border-radius: 8px; color: #fff; text-decoration: none; font: 700 .8rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.14); } .badge-html { background: #2e7d32; } /* green */ .badge-epub { background: #d2601a; } /* orange */ .badge-pdf { background: #9d3b3b; } /* gray-red */ .badge-docx { background: #2b579a; } /* Word blue */ .badge:hover { filter: brightness(1.07); } .badge:active { transform: translateY(1px); } /* Landing (book page): large stacked buttons with one-line descriptions. */ .badges-landing { flex-direction: column; } .badges-landing .badge { inline-size: 100%; min-block-size: 56px; flex-direction: column; align-items: flex-start; justify-content: center; gap: .15rem; padding-inline: 1.2rem; text-transform: none; letter-spacing: 0; } .badges-landing .badge-label { font: 700 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; } .badges-landing .badge-desc { font: 400 .95rem/1.2 var(--sans); } /* ---- Desktop enhancements ---------------------------------------------- */ @media (min-width: 40em) { .page-title { font-size: 2rem; } .book-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; } .book-row-title { padding-block: 0; } .book-row .badges { flex: 0 0 auto; flex-wrap: nowrap; } .badges-row .badge { min-block-size: 34px; min-inline-size: 0; padding-block: .3rem; padding-inline: .85rem; box-shadow: none; } .badges-landing { flex-direction: row; flex-wrap: wrap; } .badges-landing .badge { inline-size: auto; flex: 1 1 12rem; min-inline-size: 12rem; } } /* ---- Language selector (site root "/") --------------------------------- */ .langselect-body { background: var(--bg); } .langselect { max-inline-size: 34rem; margin-inline: auto; padding: 2rem 1rem 3rem; } .langselect-title { font-family: var(--serif); font-size: 1.5rem; text-align: center; margin-block: .5rem 1.5rem; } .langselect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .langselect-row { display: flex; align-items: center; gap: .7rem; min-block-size: 48px; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; } .langselect-row:hover { border-color: var(--gold); } .langselect-en { font-weight: 600; } .langselect-sep { color: var(--ink-soft); } .langselect-native { color: var(--ink-soft); margin-inline-end: auto; } .flag { inline-size: 33px; block-size: 25px; flex: 0 0 auto; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.10); } /* ---- Footer ------------------------------------------------------------- */ .site-footer { margin-block-start: 2rem; padding-block: 1.5rem; background: var(--surface-alt); border-block-start: 1px solid var(--border); } .site-footer .container { color: var(--ink-soft); font-size: .88rem; } .lang-switch { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin-block-end: .5rem; } .lang-switch ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: 0; padding: 0; } .lang-switch a, .footer-meta a { color: var(--accent); text-decoration: none; } .footer-copyright { margin-block: .5rem 0; } /* ---- 404 ---------------------------------------------------------------- */ .notfound { text-align: center; padding-block: 3rem; } .button-link { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap); margin-block-start: 1rem; padding: .7rem 1.3rem; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; }