/* Two rooms. Outside the book: grey on white -- one size, no lines, weight is the hierarchy. Inside the book: nothing but paper, the desk it lies on, and the highlight. */ html, body { margin: 0; touch-action: manipulation; /* no double-tap zoom, anywhere */ -webkit-text-size-adjust: 100%; text-size-adjust: 100% } /* ios inflates text held sideways: it must not */ body[data-reading] { background: #f0f0f0 } /* paper, and the pale desk it lies on */ [hidden] { display: none !important } /* #bar is a grid: it would beat the attribute */ /* ---------- the plain pages ---------- */ body { font: 14px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #111; background: #fff } a { color: #111; text-decoration: underline; font-weight: 400 } h1 { font-size: 1rem; font-weight: 400; color: #111; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .06em } /* one 600px column, centred, for the header and every page under it */ #shell { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; box-sizing: border-box; padding: 2.5rem 1.2rem } /* else 100vh + padding scrolls */ header, main section { width: 100%; max-width: 600px; margin: 0 auto } /* the header: the name on the left, the ways around on the right */ header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.2rem; margin-bottom: 3rem } #brand { font-weight: 400; text-decoration: none; color: #111 } header nav { display: flex; flex-wrap: wrap; gap: 1.2rem } /* the ways around: grey, no line, black where you are */ header .nav { color: #999; text-decoration: none } header .nav:hover, header .nav[aria-current] { color: #111 } #open { padding: 0; font: inherit; color: #111; text-decoration: underline; background: none; border: 0; cursor: pointer } main p { margin: 0 0 .9rem } /* the library: a book is two lines -- its name, and underneath, when and where */ #lib, #wordlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8rem } #lib li { position: relative; display: grid; padding-right: 1.5rem } #lib li.none, #wordlist .none { display: block; color: #999 } #lib .meta, #wordlist .meta { grid-column: 1 / -1; color: #999; font-size: .85em; font-variant-numeric: tabular-nums } #lib button { position: absolute; top: .1rem; right: 0; background: none; border: 0; color: #999; font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 } #lib button:hover { color: #111 } /* the delete cross is not a link */ /* the archive of words: a month to a heading, the words she asked under it -- the word, what it meant under that, then the day and the page it came from */ #wordlist h2 { font-size: .85em; font-weight: 400; color: #999; margin: 2.6rem 0 1.2rem; text-transform: uppercase; letter-spacing: .06em } #wordlist h2:first-child { margin-top: 0 } #wordlist li { display: grid } #wordlist b { font-weight: 700 } #wordlist p { margin: 0 } #license input { width: 100%; box-sizing: border-box; padding: .5rem; border: 0; border-radius: 4px; background: #f4f4f4; font: inherit; color: #111 } #key button { margin-top: .6rem; padding: 0; font: inherit; color: #111; text-decoration: underline; background: none; border: 0; cursor: pointer } #detail { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem } #detail dt { color: #999 } #detail dd { margin: 0; color: #111 } #state { color: #999 } /* a message: grey paper, no line */ .tip { display: none; background: #f4f4f4; border-radius: 4px; padding: .6rem .7rem; color: #777 } /* the phone held upright: the reader wants it sideways, so say so */ @media (orientation: portrait) { .tip { display: block } } /* ---------- the book ---------- */ .page { position: relative; margin: 0 auto 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px #00000014; /* the sheet lifts a little off the desk */ cursor: grab; touch-action: manipulation } /* double tap is ours, not the phone's zoom */ .page > * { position: absolute; inset: 0 } /* canvas, text, marks stack up */ canvas { width: 100%; height: 100% } .ink { mix-blend-mode: multiply; pointer-events: none; touch-action: none } [data-tool] .ink { pointer-events: auto } [data-tool] .text { pointer-events: none } [data-tool=pen] .page { cursor: url('data:image/svg+xml;utf8,') 2 22, crosshair } [data-tool=erase] .page { cursor: cell } .text { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none } /* the taps are ours: no ios menu, no selection */ .text span { position: absolute; white-space: pre; transform-origin: 0 0; color: transparent } #mark { position: absolute; inset: 0; pointer-events: none; z-index: 2 } /* the word she tapped: the same purple as the ones she has asked about, only stronger */ #mark i { position: absolute; background: #a06cd533; box-shadow: inset 0 -2px #a06cd5 } .seen { pointer-events: none; z-index: 1 } .seen i { position: absolute; background: #a06cd51f; box-shadow: inset 0 -1px #c4a3e8 } /* asked before: a light purple, not yellow */ /* ---------- the explanation: the same card as the plain pages ---------- */ #box { position: absolute; inset: auto; width: 300px; max-height: 45vh; z-index: 3; overflow: auto; padding: 1.8rem 2rem; background: #fff; border: 0; border-radius: 4px; box-shadow: 0 6px 24px #00000038, 0 1px 3px #0000001f; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif } /* room round it, the lines close together */ /* the word stands on its own line, in bold; the explanation sits under it */ #box b { display: block; font-weight: 700; color: #111; margin-bottom: .5rem } #box p { margin: 0; color: #111 } /* ---------- the bar, down the left edge ---------- */ #bar { position: fixed; bottom: 0; left: 0; z-index: 2; display: grid; justify-items: start; gap: .3rem; padding: .4rem } /* no slab: each key carries its own paper */ /* every key of the bar, and the way home: 44px of thumb, but only the stroke shows */ #bar button, #back, #words-link { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: #ccc; cursor: pointer; background: none } #bar svg, #back svg, #words-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round } #bar button:hover, #back:hover, #words-link:hover { color: #1a1a1a } /* the page count: bottom right, no paper under it -- where you are over how far it goes */ #nav { position: fixed; right: .8rem; bottom: .6rem; z-index: 2; font-size: .75rem; color: #999; font-variant-numeric: tabular-nums; cursor: text } #jump { width: 3.4ch; border: 0; background: none; font: inherit; color: #666; text-align: right; padding: 0 } #total::before { content: ' / ' } #back { position: fixed; top: .4rem; left: .4rem; z-index: 2 } /* the words she has asked about, sitting under the way home */ #words-link { position: fixed; top: 3.2rem; left: .4rem; z-index: 2 } /* undo and the eraser belong to the pen: they appear only once it is picked up */ #bar #undo, #bar #erase { display: none } /* #bar button would beat a bare id */ body[data-tool] #bar #undo, body[data-tool] #bar #erase { display: grid } /* the tool that is on: a swipe of the highlighter itself, laid down behind the icon -- uneven corners and a slight tilt, so it reads as a smear, not a chip */ #bar button { position: relative } #bar button svg { position: relative } /* the stroke rides over the smear */ [data-tool=pen] #hl, [data-tool=erase] #erase { color: #1a1a1a } [data-tool=pen] #hl::before, [data-tool=erase] #erase::before { content: ''; position: absolute; inset: 6px 3px; background: #ffc; transform: rotate(-3deg); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50% } [data-tool=erase] #erase::before { background: #dff0fb; transform: rotate(2deg) } /* the first thing a new reader sees; a paid one has no use for it */ #howto { margin-bottom: 4rem } /* the two blocks of home stand well apart */ #howto ol { margin: 0 0 .9rem; padding-left: 1.2rem } #howto li { margin-bottom: .3rem } body.pro #howto .buy { display: none }