/* Daily Proverb — styles One family (Literata, bundled), three themes, one accent. Themes are set on . */ @font-face { font-family: 'Literata'; src: url('fonts/Literata.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Literata'; src: url('fonts/Literata-Italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; } :root { /* type scale: 1.2 ratio on a 17px base (set by [data-size]) */ --fs-small: 0.8333rem; --fs-body: 1rem; --fs-lead: 1.2rem; --fs-verse: 1.44rem; --fs-title: 1.728rem; --lh-body: 1.6; --lh-verse: 1.42; --measure: 36rem; --gutter: 1.25rem; --radius: 0.5rem; --ease: cubic-bezier(.2,.7,.2,1); font-size: 17px; /* Night: deep slate blue with a warm lamp glow, aged gold numerals. */ color-scheme: dark; --bg: #141c26; --surface: #1b2532; --surface-2: #222e3d; --ink: #e8e2d4; --ink-2: #a7aeb5; --ink-3: #737c86; --rule: #2b3745; --accent: #c9a66b; --accent-ink: #141c26; --focus: #e4c98a; --glow: radial-gradient(ellipse 70% 38% at 50% -6%, rgba(201,166,107,.16), rgba(201,166,107,0) 70%); } :root[data-size="small"] { font-size: 15px; } :root[data-size="large"] { font-size: 19px; } :root[data-size="xlarge"] { font-size: 21px; } :root[data-theme="day"] { color-scheme: light; --bg: #f1f2ee; --surface: #ffffff; --surface-2: #e8eae4; --ink: #1f262c; --ink-2: #59636d; --ink-3: #8a929a; --rule: #d8dbd4; --accent: #8a6a2a; --accent-ink: #ffffff; --focus: #5a4515; --glow: none; } :root[data-theme="sepia"] { color-scheme: light; --bg: #d9c6a5; --surface: #e4d3b4; --surface-2: #cdb994; --ink: #3a2a18; --ink-2: #66512f; --ink-3: #8a7350; --rule: #bfa982; --accent: #7d4c1f; --accent-ink: #f1e6cf; --focus: #4a2e12; --glow: radial-gradient(ellipse 70% 38% at 50% -6%, rgba(125,76,31,.12), rgba(125,76,31,0) 70%); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--glow), var(--bg); background-attachment: scroll; color: var(--ink); font-family: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; font-size: var(--fs-body); line-height: var(--lh-body); font-variant-numeric: oldstyle-nums proportional-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } a { color: inherit; text-decoration-color: var(--ink-3); text-underline-offset: .18em; } a:hover { text-decoration-color: var(--accent); } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: -0.005em; } p { margin: 0; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Frame ---------- */ .frame { width: min(100% - 2 * var(--gutter), var(--measure)); margin: 0 auto; padding-bottom: 5rem; } .top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0 0; font-size: var(--fs-small); color: var(--ink-2); } .top .brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink-2); white-space: nowrap; } @media (max-width: 30rem) { .top .brand span { display: none; } } .top .brand svg { width: 1.05em; height: 1.05em; flex: none; } .top nav { display: flex; gap: 1.1rem; } .top nav a, .top nav button { color: var(--ink-2); text-decoration: none; padding: .2rem 0; } .top nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); } .top nav a:hover, .top nav button:hover { color: var(--ink); } main { padding-top: 3.2rem; } @media (min-width: 40rem) { main { padding-top: 4.2rem; } } /* ---------- Verse setting (the one bold thing) ---------- */ .ref { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: 1rem; } .ref time { color: var(--ink-3); } .verses { font-size: var(--fs-verse); line-height: var(--lh-verse); font-weight: 350; letter-spacing: -0.004em; text-wrap: pretty; } .verse { display: block; } .verse + .verse { margin-top: .55em; } .vn { color: var(--accent); font-size: .58em; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; vertical-align: .55em; margin-right: .12em; letter-spacing: 0; } @media (min-width: 40rem) { .verses { --fs-verse: 1.6rem; } /* hang the numerals in the margin at desktop widths */ .verse { position: relative; } .vn { position: absolute; right: 100%; margin-right: .6em; top: 0; white-space: nowrap; } } .orn { width: 2.25rem; height: 1px; background: var(--accent); margin: 2.2rem 0 1.9rem; opacity: .9; } /* ---------- Commentary ---------- */ .commentary h2 { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); margin-bottom: .9rem; font-style: italic; } .prose p { text-indent: 1.4em; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; } .prose p:first-of-type, .prose blockquote + p { text-indent: 0; } .prose p + p { margin-top: .15em; } .prose blockquote { margin: .8em 0 .8em 1.4em; font-style: italic; color: var(--ink-2); } .ends { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: var(--fs-small); color: var(--ink-2); } .ends a { text-decoration: none; } .ends a:hover { color: var(--ink); } .ends .spacer { flex: 1; } /* ---------- Browse: chapter grid ---------- */ .page-title { font-size: var(--fs-title); margin-bottom: .35rem; } .page-sub { color: var(--ink-2); font-size: var(--fs-small); margin-bottom: 1.8rem; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; } .grid a { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; font-size: var(--fs-lead); font-variant-numeric: lining-nums; color: var(--ink); background: var(--surface); transition: border-color .15s var(--ease), background-color .15s var(--ease); } .grid a:hover { border-color: var(--accent); } .grid a.today-mark { border-color: var(--accent); } .grid a.today-mark::after { content: ''; position: relative; display: block; width: .3rem; height: .3rem; margin-top: -.9rem; border-radius: 50%; background: var(--accent); } /* ---------- Chapter reading view ---------- */ .chapter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; } .chapter-nav { display: flex; gap: 1rem; font-size: var(--fs-small); color: var(--ink-2); } .chapter-nav a { text-decoration: none; } .chapter-nav a:hover { color: var(--ink); } .chapter-nav a[aria-disabled="true"] { visibility: hidden; } .hint { color: var(--ink-3); font-size: var(--fs-small); margin-bottom: 1.4rem; } .group { margin: 0; scroll-margin-top: 1.25rem; } .group + .group { margin-top: .9rem; } .group-btn { display: block; width: 100%; text-align: left; padding: .55rem .8rem .6rem; margin: 0 -.8rem; width: calc(100% + 1.6rem); border-radius: var(--radius); font-size: var(--fs-lead); line-height: 1.45; font-weight: 350; transition: background-color .15s var(--ease); } .group-btn:hover { background: var(--surface); } .group-btn[aria-expanded="true"] { background: var(--surface); } .group-btn .verse + .verse { margin-top: .3em; } .group-btn .vn { position: static; margin-right: .18em; } .group .commentary { padding: 1rem .8rem 1.4rem; margin: 0 -.8rem; border-left: 2px solid var(--accent); margin-left: calc(-.8rem + 2px); padding-left: calc(.8rem + .6rem); } .group .commentary[hidden] { display: none; } .group .commentary h2 { margin-bottom: .7rem; } .plain-verse { padding: .55rem .8rem .6rem; margin: .9rem -.8rem 0; font-size: var(--fs-lead); line-height: 1.45; font-weight: 350; color: var(--ink-2); } .plain-verse .note { display: block; font-size: var(--fs-small); color: var(--ink-3); margin-top: .3rem; } /* ---------- About ---------- */ .about h2 { font-size: var(--fs-lead); margin: 2rem 0 .6rem; font-weight: 500; } .about p + p { margin-top: .6em; } .about details { margin-top: 1.2rem; } .about summary { cursor: pointer; color: var(--ink-2); } .about details .prose { margin-top: 1rem; } /* ---------- Settings sheet ---------- */ dialog.sheet { border: 0; padding: 0; margin: auto 0 0 auto; width: 100%; max-width: 100%; background: var(--surface); color: var(--ink); border-radius: 1rem 1rem 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25); } dialog.sheet::backdrop { background: rgba(10, 14, 20, .5); } @media (min-width: 40rem) { dialog.sheet { margin: auto; max-width: 26rem; border-radius: 1rem; } } .sheet-inner { padding: 1.4rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom)); } .sheet-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; } .sheet-head h2 { font-size: var(--fs-lead); } .sheet-head button { color: var(--ink-2); font-size: var(--fs-small); } fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; } fieldset:last-of-type { margin-bottom: 0; } legend { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: .55rem; padding: 0; } .seg { display: flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .seg label { flex: 1; display: grid; place-items: center; padding: .55rem .4rem; cursor: pointer; border-left: 1px solid var(--rule); transition: background-color .15s var(--ease), color .15s var(--ease); } .seg label:first-child { border-left: 0; } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg input:checked + span { color: var(--accent-ink); } .seg label:has(input:checked) { background: var(--accent); color: var(--accent-ink); } .seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; } .swatches label span::before { content: ''; display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .45em; vertical-align: -.02em; border: 1px solid rgba(0,0,0,.25); } .swatches label[data-t="night"] span::before { background: #141c26; } .swatches label[data-t="day"] span::before { background: #f1f2ee; } .swatches label[data-t="sepia"] span::before { background: #d9c6a5; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { animation: reveal .5s var(--ease) both; } @keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } } @media print { .top, .ends, dialog { display: none !important; } body { background: #fff; color: #000; } }