/* luce.luciaos.com — one stylesheet, no imports, no webfonts. * * Two themes from one set of custom properties: the system preference * decides by default, and the toggle stamps data-theme on to * win in either direction. Everything is sized in rem off a 16px * root, code is set at 0.875em of its surroundings, and prose is * capped near 70 characters — the width every reference that is * pleasant to read settles on. */ :root { --ink: #1a1c1f; --ink-soft: #4d545e; --ink-faint: #767e8a; --paper: #ffffff; --paper-soft: #f6f7f9; --paper-code: #f4f5f7; --line: #e2e5ea; --line-soft: #edeff3; --accent: #7c3f00; --accent-soft: #fff3e2; --link: #0b5d8f; --bad: #9a2c2c; --bad-soft: #fdf2f2; --good: #2f6b3a; --tok-comment: #7b828d; --tok-string: #1a6b4a; --tok-number: #0d5c74; --tok-keyword: #9b3a12; --tok-verb: #8a1f6d; --tok-type: #1f4f8a; --tok-builtin: #5b4a9c; --tok-decl: #1a1c1f; --prose: 44rem; --side: 15rem; --rail: 13rem; --bar: 3.5rem; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --ink: #e5e8ec; --ink-soft: #aab2bd; --ink-faint: #7d858f; --paper: #15171a; --paper-soft: #1b1e22; --paper-code: #1d2126; --line: #2c3138; --line-soft: #23272d; --accent: #f0a04b; --accent-soft: #2a2118; --link: #7ab8e8; --bad: #e88b8b; --bad-soft: #2a1d1d; --good: #8fd0a0; --tok-comment: #7d858f; --tok-string: #8fce9f; --tok-number: #79c6dd; --tok-keyword: #f0a878; --tok-verb: #e59ad4; --tok-type: #8fbdf0; --tok-builtin: #b5a8f0; --tok-decl: #e5e8ec; } } :root[data-theme="light"] { --ink: #1a1c1f; --ink-soft: #4d545e; --ink-faint: #767e8a; --paper: #ffffff; --paper-soft: #f6f7f9; --paper-code: #f4f5f7; --line: #e2e5ea; --line-soft: #edeff3; --accent: #7c3f00; --accent-soft: #fff3e2; --link: #0b5d8f; --bad: #9a2c2c; --bad-soft: #fdf2f2; --good: #2f6b3a; --tok-comment: #7b828d; --tok-string: #1a6b4a; --tok-number: #0d5c74; --tok-keyword: #9b3a12; --tok-verb: #8a1f6d; --tok-type: #1f4f8a; --tok-builtin: #5b4a9c; --tok-decl: #1a1c1f; } :root[data-theme="dark"] { --ink: #e5e8ec; --ink-soft: #aab2bd; --ink-faint: #7d858f; --paper: #15171a; --paper-soft: #1b1e22; --paper-code: #1d2126; --line: #2c3138; --line-soft: #23272d; --accent: #f0a04b; --accent-soft: #2a2118; --link: #7ab8e8; --bad: #e88b8b; --bad-soft: #2a1d1d; --good: #8fd0a0; --tok-comment: #7d858f; --tok-string: #8fce9f; --tok-number: #79c6dd; --tok-keyword: #f0a878; --tok-verb: #e59ad4; --tok-type: #8fbdf0; --tok-builtin: #b5a8f0; --tok-decl: #e5e8ec; } /* --------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--paper); overflow-wrap: break-word; } a { color: var(--link); text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } .skip { position: absolute; left: -100vw; top: 0; z-index: 50; background: var(--paper); padding: .5rem 1rem; border: 1px solid var(--line); } .skip:focus { left: 0; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------------------------- header */ header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; height: var(--bar); padding: 0 1.25rem; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); } .mark { display: flex; align-items: center; gap: .5rem; font-weight: 640; letter-spacing: -.01em; color: var(--ink); flex: none; } .mark:hover { text-decoration: none; } .mark .glyph { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .35rem; background: var(--accent); color: var(--paper); font-size: .8rem; font-weight: 700; } :root[data-theme="dark"] .mark .glyph, :root:not([data-theme="light"]) .mark .glyph { color: #15171a; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .mark .glyph { color: #fff; } } nav.tabs { display: flex; gap: .25rem; flex: 1 1 auto; overflow-x: auto; } nav.tabs a { padding: .3rem .6rem; border-radius: .4rem; color: var(--ink-soft); font-size: .92rem; white-space: nowrap; } nav.tabs a:hover { background: var(--paper-soft); text-decoration: none; } nav.tabs a.here { color: var(--ink); background: var(--accent-soft); font-weight: 560; } .tools { display: flex; align-items: center; gap: .5rem; flex: none; } .find input { width: 11rem; max-width: 30vw; padding: .32rem .6rem; font: inherit; font-size: .88rem; color: var(--ink); background: var(--paper-soft); border: 1px solid var(--line); border-radius: .4rem; } .find input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } #theme { width: 2rem; height: 2rem; padding: 0; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--ink-soft); background: var(--paper-soft); border: 1px solid var(--line); border-radius: .4rem; } #theme:hover { color: var(--ink); } #hits { position: absolute; top: var(--bar); right: 1.25rem; width: min(30rem, calc(100vw - 2.5rem)); max-height: 70vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 12px 32px rgb(0 0 0 / .16); } #hits a { display: block; padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); } #hits a:last-child { border-bottom: 0; } #hits a:hover, #hits a.on { background: var(--paper-soft); text-decoration: none; } #hits b { display: block; font-weight: 560; } #hits em { display: block; font-style: normal; font-size: .84rem; color: var(--ink-faint); } #hits .none { padding: .8rem; color: var(--ink-faint); font-size: .9rem; } /* --------------------------------------------------------------- shell */ .shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--rail); gap: 2.5rem; max-width: 84rem; margin: 0 auto; padding: 0 1.25rem; align-items: start; } .shell.wide { grid-template-columns: minmax(0, 1fr) var(--rail); max-width: 68rem; } .shell.wide .side { display: none; } .side { position: sticky; top: var(--bar); padding: 2rem 0; max-height: calc(100vh - var(--bar)); overflow-y: auto; } .side details { border: 0; } .side summary { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 620; cursor: default; list-style: none; margin-bottom: .5rem; } .side summary::-webkit-details-marker { display: none; } .side ul { list-style: none; margin: 0; padding: 0; } .side li a { display: block; padding: .22rem .55rem; margin-left: -.55rem; border-radius: .35rem; font-size: .92rem; color: var(--ink-soft); } .side li a:hover { background: var(--paper-soft); color: var(--ink); text-decoration: none; } .side li a.here { color: var(--ink); font-weight: 560; background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); } main { min-width: 0; padding: 2rem 0 4rem; } article { max-width: var(--prose); } .rail { position: sticky; top: var(--bar); padding: 2.6rem 0; max-height: calc(100vh - var(--bar)); overflow-y: auto; } .rail h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 620; margin: 0 0 .5rem; border: 0; padding: 0; } .rail ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .rail li a { display: block; padding: .16rem .7rem; font-size: .85rem; color: var(--ink-faint); border-left: 2px solid transparent; margin-left: -1px; } .rail li.h3 a { padding-left: 1.4rem; font-size: .82rem; } .rail li a:hover { color: var(--ink); text-decoration: none; } .rail li a.on { color: var(--ink); border-left-color: var(--accent); } /* -------------------------------------------------------------- prose */ h1, h2, h3, h4 { scroll-margin-top: calc(var(--bar) + 1rem); } h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 660; margin: 0 0 1.2rem; } h2 { font-size: 1.4rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 620; margin: 2.6rem 0 .9rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line-soft); } h3 { font-size: 1.1rem; font-weight: 620; margin: 2rem 0 .7rem; } h4 { font-size: .98rem; font-weight: 620; margin: 1.6rem 0 .5rem; color: var(--ink-soft); } h2 .anchor, h3 .anchor, h4 .anchor { margin-left: .4rem; color: var(--ink-faint); opacity: 0; font-weight: 400; text-decoration: none; } h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus-visible { opacity: 1; } p { margin: 0 0 1.1rem; } article > ul, article > ol { margin: 0 0 1.1rem; padding-left: 1.4rem; } li { margin-bottom: .35rem; } li > ul, li > ol { margin: .35rem 0 .3rem; padding-left: 1.3rem; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } blockquote { margin: 0 0 1.1rem; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--accent); color: var(--ink-soft); } blockquote p:last-child { margin-bottom: 0; } strong { font-weight: 620; color: var(--ink); } code { font-family: var(--mono); font-size: .875em; padding: .1em .3em; border-radius: .25rem; background: var(--paper-code); } a code { color: inherit; } /* ---------------------------------------------------------- code blocks */ figure.sample { margin: 0 0 1.6rem; } .cap { display: flex; align-items: center; gap: .5rem; padding: .3rem .75rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .01em; border: 1px solid var(--line); border-bottom: 0; border-radius: .45rem .45rem 0 0; background: var(--paper-soft); color: var(--ink-soft); } .cap cite { font-style: normal; } .cap.luc { background: var(--accent-soft); color: var(--accent); border-color: var(--line); } .cap.out { background: var(--paper-soft); } .cap.out::before { content: "▸"; color: var(--good); } .cap.bad { background: var(--bad-soft); color: var(--bad); } .cap.bad::before { content: "■"; font-size: .6em; } .cap.shell::before { content: "$"; color: var(--ink-faint); } .cap + .code { border-radius: 0 0 .45rem .45rem; } .cap + .code:not(:last-child) { border-radius: 0; border-bottom: 0; } .code { position: relative; border: 1px solid var(--line); border-radius: .45rem; background: var(--paper-code); overflow-x: auto; margin-bottom: 1.1rem; } figure.sample .code { margin-bottom: 0; } .code:last-child { border-radius: 0 0 .45rem .45rem; } .code pre { margin: 0; padding: .85rem 1rem; } .code code, .code samp { display: block; font-family: var(--mono); font-size: .8125rem; line-height: 1.6; background: none; border: 0; padding: 0; white-space: pre; color: var(--ink); } .code.result { background: var(--paper-soft); } .code.result samp { color: var(--ink-soft); } .code.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 26%, transparent); } .code.bad samp { color: var(--bad); } .code kbd { font: inherit; color: var(--ink); font-weight: 560; } .code .prompt { color: var(--ink-faint); user-select: none; } button.copy { position: absolute; top: .4rem; right: .4rem; z-index: 2; padding: .12rem .45rem; font-family: var(--mono); font-size: .7rem; line-height: 1.5; color: var(--ink-faint); background: var(--paper); border: 1px solid var(--line); border-radius: .3rem; opacity: 0; cursor: pointer; transition: opacity .12s; } .code:hover button.copy, button.copy:focus-visible { opacity: 1; } button.copy:hover { color: var(--ink); } /* syntax classes, deliberately few */ .code .c { color: var(--tok-comment); font-style: italic; } .code .s { color: var(--tok-string); } .code .n { color: var(--tok-number); } .code .k { color: var(--tok-keyword); font-weight: 560; } .code .v { color: var(--tok-verb); font-weight: 620; } .code .t { color: var(--tok-type); } .code .b { color: var(--tok-builtin); } .code .d { color: var(--tok-decl); font-weight: 560; } /* -------------------------------------------------------------- tables */ .table { overflow-x: auto; margin: 0 0 1.4rem; } table { border-collapse: collapse; width: 100%; font-size: .92rem; } th, td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; } th { font-weight: 620; color: var(--ink-soft); border-bottom-color: var(--line); white-space: nowrap; } td code, th code { white-space: nowrap; } /* --------------------------------------------------------------- cards */ .cards { display: grid; gap: .6rem; margin: 1.6rem 0 0; } .card { display: block; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); background: var(--paper); } .card:hover { border-color: var(--accent); text-decoration: none; background: var(--paper-soft); } .card strong { display: block; font-weight: 600; margin-bottom: .1rem; } .card span { display: block; font-size: .9rem; color: var(--ink-faint); line-height: 1.5; } /* ------------------------------------------------------------ sequence */ nav.seq { display: flex; justify-content: space-between; gap: 1rem; max-width: var(--prose); margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } nav.seq a { display: block; max-width: 48%; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); font-weight: 560; } nav.seq a:hover { border-color: var(--accent); text-decoration: none; } nav.seq a.on { text-align: right; margin-left: auto; } nav.seq span { display: block; font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); } /* --------------------------------------------------------------- front */ .hero { max-width: 46rem; margin: 1rem 0 2.5rem; } .hero p.lead { font-size: 1.22rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 1.6rem; } .doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; } /* -------------------------------------------------------------- footer */ footer { max-width: 84rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: .88rem; } footer p { margin: 0; } /* ---------------------------------------------------------- responsive */ @media (max-width: 68rem) { .shell { grid-template-columns: var(--side) minmax(0, 1fr); gap: 2rem; } .shell.wide { grid-template-columns: minmax(0, 1fr); } .rail { display: none; } } @media (max-width: 52rem) { :root { --bar: 3.25rem; } .shell, .shell.wide { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 1rem; } .side { position: static; padding: 1.25rem 0 0; max-height: none; overflow: visible; } .side details { border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .75rem; background: var(--paper-soft); } .side summary { cursor: pointer; margin: 0; } .side details[open] summary { margin-bottom: .5rem; } .side ul { padding-top: .25rem; } main { padding: 1.5rem 0 3rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; margin-top: 2.2rem; } nav.tabs { order: 3; width: 100%; } header.top { flex-wrap: wrap; height: auto; padding: .5rem 1rem; position: static; } .side, .rail { top: 0; } .find input { width: 100%; max-width: none; } .tools { flex: 1 1 auto; } #hits { position: fixed; top: auto; right: 1rem; left: 1rem; width: auto; } nav.seq { flex-direction: column; } nav.seq a { max-width: none; } nav.seq a.on { text-align: left; } } @media print { header.top, .side, .rail, nav.seq, footer, button.copy { display: none; } .shell { display: block; } article { max-width: none; } }