mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-11-09 10:39:41 -06:00
174 lines
17 KiB
CSS
174 lines
17 KiB
CSS
.field-explorer{--field-accent:#175a79;--field-ink:#192e3b;--field-muted:#4c6371;--field-line:#c6d2d9;--field-paper:#fff;--field-soft:#f2f6f8;max-width:1450px;margin:0 auto;padding:28px;color:var(--field-ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--field-paper);box-sizing:border-box}
|
|
.field-explorer *{box-sizing:border-box}
|
|
.field-explorer [hidden]{display:none!important}
|
|
.field-explorer a{color:var(--field-accent);text-underline-offset:3px}
|
|
.field-explorer button,.field-explorer input,.field-explorer select{font:inherit;color:var(--field-ink);background:var(--field-paper);border:1px solid var(--field-line);border-radius:6px;min-height:44px;padding:8px 12px}
|
|
.field-explorer button{cursor:pointer;text-align:left}
|
|
.field-explorer button:hover{background:var(--field-soft)}
|
|
.field-explorer :focus-visible{outline:3px solid var(--field-accent);outline-offset:3px}
|
|
.field-explorer summary{color:var(--field-ink)!important;cursor:pointer;min-height:44px;padding:10px 0;font-weight:600}
|
|
.field-explorer h1,.field-explorer h2,.field-explorer h3{color:var(--field-ink);border:0!important;padding:0!important;box-shadow:none;margin-top:0}
|
|
.field-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--field-line)}
|
|
.field-header h1{font-size:32px;line-height:1.15;letter-spacing:-.025em;margin:4px 0 10px}
|
|
.field-header p{margin:0;color:var(--field-muted)}
|
|
.field-eyebrow{font-size:12px;font-weight:750;letter-spacing:.12em}
|
|
.field-header>a{white-space:nowrap}
|
|
.field-skip{position:absolute;left:-10000px}
|
|
.field-skip:focus{position:relative;left:auto;display:inline-block;padding:12px}
|
|
.field-browser{display:grid;grid-template-columns:290px minmax(0,1fr);gap:36px;align-items:start;padding-top:26px}
|
|
.field-sidebar{position:sticky;top:160px;max-height:calc(100vh - 185px);overflow:auto;padding:0 14px 14px 0;scrollbar-gutter:stable}
|
|
.field-search-label{font-size:16px;font-weight:700;display:block;margin-bottom:8px}
|
|
.field-search-wrap{display:flex;align-items:center;gap:5px}
|
|
.field-search-wrap input{width:100%;min-width:0}
|
|
.field-search-wrap button{padding:8px}
|
|
.field-results{font-size:14px;color:var(--field-muted);margin:10px 0 20px}
|
|
#field-taxonomy h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
|
|
#field-taxonomy>details{border-bottom:1px solid var(--field-line)}
|
|
#field-taxonomy summary{display:list-item;list-style-position:inside;font-size:16px;line-height:1.4}
|
|
#field-taxonomy summary span{font-weight:400;color:var(--field-muted);font-size:13px;margin-left:5px}
|
|
#field-taxonomy ul{list-style:none;margin:0 0 12px 8px;padding:0 0 0 12px;border-left:2px solid var(--field-line)}
|
|
#field-taxonomy li{margin:0}
|
|
#field-taxonomy button,#field-list button{display:block;border:0;border-radius:4px;width:100%;padding:10px 12px;line-height:1.35}
|
|
#field-taxonomy button[aria-current=true],#field-list button[aria-current=true]{color:var(--field-accent);background:var(--field-soft);font-weight:750;box-shadow:inset 3px 0 var(--field-accent)}
|
|
.field-hierarchy{margin-top:20px}
|
|
.field-hierarchy p{font-size:14px;color:var(--field-muted)}
|
|
.field-hierarchy>details{margin-left:10px}
|
|
.field-search-result{margin:0 0 12px;border-bottom:1px solid var(--field-line);padding-bottom:10px}
|
|
.field-search-result small{display:block;font-size:13px;color:var(--field-muted);padding:2px 12px}
|
|
.field-reader{min-width:0}
|
|
.field-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;font-size:14px;color:var(--field-muted);margin-bottom:15px}
|
|
.field-back{margin:0 0 15px}
|
|
.field-detail{scroll-margin-top:170px}
|
|
.field-detail h2{font-size:34px;line-height:1.2;margin-bottom:14px;letter-spacing:-.025em}
|
|
.field-definition{font-size:20px;line-height:1.6;max-width:850px;margin:0 0 22px}
|
|
.field-parent{font-size:14px;color:var(--field-muted)}
|
|
.field-reading-header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:26px 0 12px}
|
|
.field-reading-header h3{font-size:18px;margin:0}
|
|
.field-reading-header label{display:flex;align-items:center;gap:8px;font-size:14px}
|
|
.field-reading-header select{max-width:155px}
|
|
.field-book-links{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
|
|
.field-book-links a{display:block;text-decoration:none;background:var(--field-soft);border:1px solid var(--field-line);border-left:4px solid var(--field-accent);border-radius:6px;padding:14px 18px;font-size:17px;font-weight:650}
|
|
.field-book-links a:hover{text-decoration:underline}
|
|
.field-book-links span{display:block;font-size:14px;font-weight:400;color:var(--field-muted);margin-top:3px}
|
|
.field-empty{color:var(--field-muted);padding:15px;background:var(--field-soft);border-radius:6px}
|
|
.field-word-connections{border-top:1px solid var(--field-line);border-bottom:1px solid var(--field-line);margin:24px 0}
|
|
.field-word-connections span{font-weight:400;color:var(--field-muted);margin-left:6px}
|
|
.field-word-connections li{margin-bottom:16px;line-height:1.8}
|
|
.field-word-connections button{padding:0;min-height:32px;border:0;background:transparent;text-decoration:underline;color:var(--field-accent)}
|
|
.field-word-connections li details{font-size:14px;color:var(--field-muted)}
|
|
.field-map-region{margin-top:30px;min-width:0}
|
|
.field-map-heading{display:flex;gap:15px;align-items:center;justify-content:space-between}
|
|
.field-map-heading h2{font-size:22px;margin:0}
|
|
.field-map-heading a{white-space:nowrap;font-size:15px}
|
|
.field-status,.field-gesture,.field-legend{font-size:14px;color:var(--field-muted);margin:10px 0}
|
|
.field-map-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0}
|
|
.field-map-options{position:relative;margin-left:auto}
|
|
.field-map-options summary{font-size:14px;padding:8px}
|
|
.field-map-options label{margin-right:8px}
|
|
.field-map-options a{display:block;padding:10px}
|
|
.field-canvas{height:440px;border:1px solid var(--field-line);border-radius:8px;overflow:hidden;touch-action:none;cursor:grab;background:#fff}
|
|
.field-canvas.dragging{cursor:grabbing;user-select:none}
|
|
.field-canvas svg,.field-static{display:block;width:100%;height:100%;object-fit:contain}
|
|
.field-canvas .node{cursor:pointer}
|
|
.field-canvas .node.linked path,.field-canvas .node.linked polygon{stroke:#17766e;stroke-width:2.3}
|
|
.field-canvas .node.selected path,.field-canvas .node.selected polygon{fill:#e7f1fa;stroke:#245b78;stroke-width:3}
|
|
.field-canvas .node:focus path,.field-canvas .node:focus polygon{stroke:#245b78;stroke-width:3}
|
|
.field-canvas .muted{opacity:.22}
|
|
.field-canvas .edge.active path,.field-canvas .edge.active polygon{stroke:#245b78;stroke-width:2}
|
|
.field-canvas .edge.active polygon{fill:#245b78}
|
|
.field-canvas .edge.active text{fill:#173f57}
|
|
.field-method{margin-top:40px;border-top:1px solid var(--field-line);padding-top:16px;font-size:14px;color:var(--field-muted)}
|
|
body .page-columns main#quarto-document-content:has(>.field-explorer){grid-column:screen-start/screen-end;width:100%;max-width:none}
|
|
main:has(>.field-explorer)>#title-block-header{display:none}
|
|
body:has(>.field-explorer){margin:0;background:#fff}
|
|
body.quarto-dark .field-explorer{--field-accent:#a9d7ef;--field-ink:#f1f5f8;--field-muted:#becdd6;--field-line:#526776;--field-paper:#1b2933;--field-soft:#293d4b}
|
|
.field-expanded .field-sidebar,.field-expanded .field-header,.field-expanded .field-method,.field-expanded .field-skip{display:none}
|
|
.field-expanded .field-browser{display:block;padding-top:0}.field-expanded .field-canvas{height:65vh}
|
|
@media(max-width:850px){.field-explorer{padding:20px 16px}.field-header{align-items:start;gap:15px}.field-header h1{font-size:27px}.field-header>a{font-size:14px}.field-browser{grid-template-columns:1fr;gap:25px}.field-sidebar{position:static;max-height:380px;padding:0 8px 15px 0;border-bottom:1px solid var(--field-line)}.field-detail h2{font-size:29px}.field-definition{font-size:18px}.field-detail{scroll-margin-top:240px}.field-map-heading{align-items:start}.field-canvas{height:350px}.field-reading-header{flex-wrap:wrap}.field-map-tools{gap:6px}.field-map-tools button{font-size:14px;padding:8px}.field-map-options{margin-left:0}.field-method{margin-top:25px}}
|
|
@media(prefers-reduced-motion:reduce){.field-explorer *{scroll-behavior:auto!important}}
|
|
@media print{.field-sidebar,.field-map-tools,.field-gesture,.field-header>a,.field-method{display:none}.field-browser{display:block}.field-canvas{height:500px}.field-explorer{padding:0}}
|
|
/* Drill down: collections are a plain list; only classified subjects use a tree. */
|
|
.field-global-search{max-width:540px;margin-top:20px}
|
|
.field-browser{grid-template-columns:230px 280px minmax(0,1fr);gap:26px}
|
|
.field-sidebar{top:170px;padding-right:14px}
|
|
.field-topics,.field-classified ul{list-style:none;padding:0;margin:0}
|
|
.field-topics li{margin:0}
|
|
#field-taxonomy .field-topics button{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:15px;min-height:44px;padding:10px 8px;line-height:1.35}
|
|
.field-topics button span{font-size:13px;font-weight:400;color:var(--field-muted)}
|
|
#field-taxonomy .field-topics button[aria-current=true]{background:var(--field-soft);font-weight:700;box-shadow:inset 3px 0 var(--field-accent)}
|
|
.field-classified{margin-top:25px;border-top:1px solid var(--field-line);padding-top:20px}
|
|
.field-classified p{font-size:13px;color:var(--field-muted)}
|
|
.field-classified ul ul{margin-left:12px!important;padding-left:10px!important;border-left:2px solid var(--field-line)!important}
|
|
.field-concepts{position:sticky;top:170px;max-height:calc(100vh - 195px);overflow:auto;padding-right:15px;border-right:1px solid var(--field-line);scroll-margin-top:180px;scrollbar-gutter:stable}
|
|
.field-concepts h2{font-size:22px;line-height:1.3;margin-bottom:12px}
|
|
#field-topic-question{font-size:16px;color:var(--field-muted)}
|
|
.field-concept-row{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--field-line)}
|
|
.field-concept-row p{font-size:14px;line-height:1.5;margin:4px 8px;color:var(--field-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
|
#field-list .field-concept-row button{font-size:16px;padding:10px 8px;font-weight:600}
|
|
.field-tabs{display:flex;gap:4px;border-bottom:1px solid var(--field-line);margin:24px 0}
|
|
.field-tabs button{border:0;border-radius:0;background:transparent;padding:12px 18px}
|
|
.field-tabs button[aria-selected=true]{box-shadow:inset 0 -3px var(--field-accent);font-weight:750;color:var(--field-accent)}
|
|
.field-word-connections{border:0;margin:0}
|
|
.field-word-connections h3{font-size:18px}
|
|
.field-word-connections ul{padding-left:20px}
|
|
.field-mobile-back{display:none}
|
|
.field-expanded .field-concepts,.field-expanded .field-global-search{display:none}
|
|
.field-expanded .field-browser{display:block}
|
|
@media(min-width:701px) and (max-width:1150px){.field-browser{grid-template-columns:220px minmax(0,1fr)}.field-sidebar{position:static;max-height:230px;grid-column:1/-1}.field-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.field-classified{display:none}.field-concepts{top:170px}.field-reader{grid-column:2}.field-header h1{font-size:28px}}
|
|
@media(max-width:700px){.field-header{display:block}.field-header>a{display:inline-block;margin-top:12px}.field-browser{display:block;padding-top:20px}.field-global-search{position:relative}.field-sidebar,.field-concepts{position:static;max-height:none;overflow:visible;border:0;padding:0}.field-reader{display:none}.field-browser[data-step=topics] .field-concepts{display:none}.field-browser[data-step=concepts] .field-sidebar{display:none}.field-browser[data-step=detail] .field-sidebar,.field-browser[data-step=detail] .field-concepts{display:none}.field-browser[data-step=detail] .field-reader{display:block}.field-mobile-back{display:block;margin-bottom:20px}.field-browser[data-step=topics] .field-mobile-back{display:none}.field-reading-header label{font-size:14px}.field-definition{font-size:18px}.field-concepts{scroll-margin-top:240px}.field-expanded .field-reader{display:block}.field-expanded .field-concepts,.field-expanded .field-sidebar{display:none!important}.field-tabs{margin-top:20px}}
|
|
body.quarto-dark .field-canvas{background:var(--field-paper)}
|
|
body.quarto-dark .field-canvas .graph>polygon{fill:var(--field-paper)}
|
|
body.quarto-dark .field-canvas .node path,body.quarto-dark .field-canvas .node polygon{fill:#293d4b;stroke:#92acbc}
|
|
body.quarto-dark .field-canvas .node.selected path,body.quarto-dark .field-canvas .node.selected polygon{fill:#34576e;stroke:#b4e0f4}
|
|
body.quarto-dark .field-canvas .node.linked path,body.quarto-dark .field-canvas .node.linked polygon{stroke:#8ed6c8}
|
|
body.quarto-dark .field-canvas .node text{fill:#f1f5f8}
|
|
body.quarto-dark .field-canvas .edge path,body.quarto-dark .field-canvas .edge polygon{stroke:#b7cbd7}
|
|
body.quarto-dark .field-canvas .edge polygon{fill:#b7cbd7}
|
|
body.quarto-dark .field-canvas .edge text{fill:#d6e4ed;stroke:var(--field-paper)}
|
|
body.quarto-dark .field-canvas .edge.active path,body.quarto-dark .field-canvas .edge.active polygon{stroke:#b4e0f4}
|
|
body.quarto-dark .field-canvas .edge.active text{fill:#d6eafa}
|
|
/* Quarto decorates grids containing semantic asides with its page grid. */
|
|
.field-explorer .field-browser{display:grid!important;grid-template-columns:230px 280px minmax(0,1fr)!important;width:100%!important;max-width:none!important;gap:26px!important}
|
|
.field-explorer .field-browser>*{grid-column:auto!important;grid-row:auto!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
|
|
.field-explorer .field-sidebar{float:none!important}
|
|
@media(min-width:701px) and (max-width:1150px){.field-explorer .field-browser{grid-template-columns:220px minmax(0,1fr)!important}.field-explorer .field-browser>.field-sidebar{grid-column:1/-1!important}}
|
|
@media(max-width:700px){.field-explorer .field-browser{display:block!important}.field-explorer .field-browser>.field-reader{display:none}.field-explorer .field-browser[data-step=detail]>.field-reader{display:block}}
|
|
.field-explorer.field-expanded .field-browser{display:block!important}
|
|
.field-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);padding-bottom:20px}
|
|
.field-header-tools .field-global-search{margin:0;max-width:none}
|
|
.field-header-tools>a{display:inline-block;margin-top:8px;font-size:14px}
|
|
.field-header h1{font-size:30px}.field-header p:not(.field-eyebrow){font-size:16px}
|
|
.field-explorer #field-taxonomy .field-topics{border:0!important;padding:0!important;margin:0!important}
|
|
.field-browser{padding-top:22px}
|
|
.field-definition{font-size:18px;margin-bottom:16px}
|
|
.field-reading-header{margin:18px 0 10px}.field-book-links{margin-bottom:18px}
|
|
.field-tabs{margin:20px 0 16px}.field-map-region{margin-top:18px}
|
|
@media(max-width:700px){.field-header{display:block}.field-header-tools{margin-top:18px}.field-header h1{font-size:27px}.field-header-tools>a{margin-top:10px}}
|
|
#field-map-panel{scroll-margin-top:170px}
|
|
@media(max-width:700px){#field-map-panel{scroll-margin-top:240px}}
|
|
.field-tabs{scroll-margin-top:170px}
|
|
@media(max-width:700px){.field-tabs,.field-reader{scroll-margin-top:240px}}
|
|
.field-back-browser{display:inline-block;margin-bottom:15px}
|
|
.field-expanded .field-reader{display:flex!important;flex-direction:column}
|
|
.field-expanded .field-breadcrumb,.field-expanded .field-back,.field-expanded .field-mobile-back,.field-expanded #field-expand{display:none}
|
|
.field-expanded .field-tabs{order:0;margin-top:0}
|
|
.field-expanded #field-map-panel{order:1}
|
|
.field-expanded #field-connections{order:2}
|
|
.field-expanded .field-detail{order:3;margin-top:30px}
|
|
.field-expanded .field-canvas{height:60vh}
|
|
.field-sidebar,.field-concepts{top:var(--field-top,12px);max-height:calc(100vh - var(--field-top,12px) - 20px)}
|
|
.field-detail,.field-concepts,.field-tabs,.field-reader,#field-map-panel{scroll-margin-top:var(--field-top,12px)}
|
|
#field-topic-title{position:sticky;top:0;background:var(--field-paper);padding:8px 0!important;z-index:1}
|
|
.field-status{font-size:16px;font-weight:650;color:var(--field-ink)}
|
|
@media(max-width:700px){.field-sidebar,.field-concepts{max-height:none}.field-reader .field-breadcrumb{display:none}.field-mobile-back{margin-bottom:16px}}
|
|
.field-explorer input::placeholder{color:var(--field-muted);opacity:1}
|
|
.field-sidebar,.field-concepts{max-height:calc(100vh - var(--field-top,12px) - 70px)}
|
|
.field-topic-select{display:none}
|
|
@media(min-width:701px) and (max-width:1150px){.field-topic-select{display:flex;align-items:center;gap:12px;font-weight:650}.field-topic-select select{flex:1}.field-sidebar #field-taxonomy{display:none}.field-sidebar{max-height:none}}
|
|
@media(max-width:700px){.field-sidebar,.field-concepts{max-height:none}}
|
|
/* Leave room inside the containing page for sticky navigation at its lower edge. */
|
|
.field-explorer .field-browser{padding-bottom:80px}
|
|
.field-sidebar,.field-concepts{max-height:min(65vh,calc(100vh - var(--field-top,12px) - 36px))}
|
|
@media(min-width:701px) and (max-width:1150px){.field-sidebar{max-height:none}}
|
|
@media(max-width:700px){.field-sidebar,.field-concepts{max-height:none}.field-explorer .field-browser{padding-bottom:0}}
|