diff --git a/apps/waterfall-wiki/src/styles/guidance.module.css b/apps/waterfall-wiki/src/styles/guidance.module.css index f2c3a01..b7a0765 100644 --- a/apps/waterfall-wiki/src/styles/guidance.module.css +++ b/apps/waterfall-wiki/src/styles/guidance.module.css @@ -71,8 +71,8 @@ top: 8px; left: 250px; transform: translateY(-200%); - background: var(--ink); - color: var(--foreground) !important; + background: var(--primary); + color: var(--primary-foreground) !important; padding: 10px 16px; border-radius: 8px; } diff --git a/apps/waterfall-wiki/src/styles/learning-series.css b/apps/waterfall-wiki/src/styles/learning-series.css index 2027664..97c1ef8 100644 --- a/apps/waterfall-wiki/src/styles/learning-series.css +++ b/apps/waterfall-wiki/src/styles/learning-series.css @@ -1,5 +1,5 @@ -.learning-reader{--learning-ink:var(--foreground);--learning-paper:var(--surface);background:var(--surface-muted);color:var(--learning-ink);padding:25px 28px;border-radius:20px}.learning-reader button{cursor:pointer}.learning-reader button:focus-visible,.learning-reader a:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.learning-reader-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:780px;margin:0 auto 24px}.learning-reader-bar>div{display:grid;gap:9px}.learning-reader-badge{font-size:11px;letter-spacing:1px;color:var(--muted-foreground)}.learning-reader-bar strong{font-size:15px;font-weight:550}.learning-reader-bar>button{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;background:var(--surface);padding:10px 13px;border-radius:25px;border:1px solid var(--border)}.learning-boards{max-width:720px;margin:auto;outline-offset:6px;container-type:inline-size}.learning-boards.is-continuous{display:grid;gap:24px}.learning-cover,.learning-sheet{width:100%;aspect-ratio:3/4;box-shadow:0 5px 22px #343b2810;overflow:hidden}.learning-cover img{display:block;width:100%;height:100%;object-fit:contain}.learning-sheet{position:relative;background:var(--learning-paper);padding:5.6cqw 6.8cqw;color:var(--learning-ink);font-size:1.8cqw;line-height:1.5}.learning-sheet-top{display:flex;justify-content:space-between;align-items:center;letter-spacing:.08em;font-size:1.25cqw;color:var(--muted-foreground);padding-bottom:2.6cqw;border-bottom:1px solid var(--border)}.learning-sheet-top>span:last-child{font-family:Arial,sans-serif;font-size:1.15cqw}.learning-sheet-footer{position:absolute;bottom:3.3cqw;left:6.8cqw;right:6.8cqw;border-top:1px solid var(--border);padding-top:1.9cqw;display:flex;justify-content:space-between;font-size:1.2cqw;color:var(--muted-foreground)}.learning-sheet-footer b{margin-left:2cqw;color:var(--foreground-strong);font-weight:600}.learning-intro{padding-top:4.5cqw;margin-bottom:3.6cqw}.learning-chapter{font-size:1.5cqw;letter-spacing:.08em;color:var(--muted-foreground)}.learning-intro h2,.learning-ending h2{font-size:5.8cqw;line-height:1.28;font-weight:800;letter-spacing:-.04em;margin:2.6cqw 0 2cqw}.learning-sheet mark{color:inherit;background:linear-gradient(transparent 45%,var(--learning-accent) 45%,var(--learning-accent) 93%,transparent 93%);padding:0 .15em}.learning-intro>p,.learning-ending>p{color:var(--muted-foreground);font-size:1.85cqw;margin:0}.learning-audience{display:inline-block;font-size:1.35cqw;letter-spacing:.02em;margin-top:2.2cqw;padding:.7cqw 1.4cqw;border:1px solid var(--border);border-radius:20px}.learning-index{display:grid;grid-template-columns:1fr;gap:0}.learning-index button{display:flex;text-align:left;align-items:center;gap:1.6cqw;padding:1.35cqw 0;border-bottom:1px solid var(--border);background:transparent}.learning-index button>span{font-family:Georgia,serif;font-size:3.2cqw;min-width:4cqw;color:var(--muted-foreground);font-style:italic}.learning-index button>div{flex:1;min-width:0}.learning-index strong{font-size:2cqw;font-weight:650;display:block}.learning-index small{font-size:1.2cqw;color:var(--muted-foreground);display:block;line-height:1.55}.learning-index svg{width:2.3cqw;flex-shrink:0;color:var(--muted-foreground)}.learning-index-note{display:flex;align-items:center;gap:1cqw;font-size:1.4cqw;color:var(--muted-foreground);margin-top:2.4cqw}.learning-index-note svg{width:2cqw}.learning-pair-title{padding:3.7cqw 0 2.7cqw}.learning-pair-title>span{font-size:1.3cqw;color:var(--muted-foreground)}.learning-pair-title h2{margin:.6cqw 0 0;font-size:3.5cqw;font-weight:750;letter-spacing:-.035em}.learning-skill{padding:2.6cqw 0;border-top:1px solid var(--border)}.learning-skill-heading{display:flex;gap:1.9cqw;align-items:center}.learning-number{font-family:Georgia,serif;font-size:5.3cqw;font-style:italic;line-height:1;color:var(--foreground-strong);min-width:6.7cqw;position:relative;z-index:0}.learning-number:after{content:"";position:absolute;left:0;right:-.2cqw;height:2cqw;bottom:.1cqw;z-index:-1;background:var(--learning-accent);transform:rotate(-5deg)}.learning-category{font-size:1.2cqw;color:var(--muted-foreground);letter-spacing:.08em}.learning-skill h3{font-size:2.7cqw;line-height:1.4;font-weight:750;letter-spacing:-.025em;margin:.3cqw 0 0}.learning-skill-name{margin:1.15cqw 0 1.55cqw 8.6cqw;display:flex;gap:.7cqw;align-items:center;width:fit-content;max-width:calc(100% - 8.6cqw);font-size:1.25cqw;font-family:Arial,sans-serif;color:var(--muted-foreground);overflow-wrap:anywhere}.learning-skill-name svg{width:1.4cqw;height:1.4cqw;flex-shrink:0}.learning-io{display:grid;gap:.75cqw;margin-bottom:1.7cqw}.learning-io p{display:flex;align-items:baseline;gap:1.2cqw;margin:0;font-size:1.7cqw;line-height:1.6}.learning-io b{font-size:1.35cqw;flex-shrink:0;font-weight:600;padding:.2cqw .8cqw;background:var(--selection);border-radius:4px;color:var(--foreground)}.learning-sample{border:1px solid var(--border);border-radius:.9cqw;padding:1.2cqw 1.9cqw;background:var(--selection);position:relative;margin-bottom:1.7cqw}.sample-label{font-size:1.05cqw;display:block;color:#939987;margin-bottom:.8cqw}.learning-sample>div{display:flex;align-items:center;gap:1.2cqw;font-size:1.5cqw;padding:.4cqw 0}.learning-sample>div>span{font-family:Arial,sans-serif;font-size:1cqw;color:var(--muted-foreground)}.learning-sample p{margin:0;flex:1}.learning-sample svg{color:var(--primary);width:1.6cqw;height:1.6cqw}.sample-1{background:repeating-linear-gradient(#fffefa 0,#fffefa 3.05cqw,#e8eade 3.05cqw,#e8eade 3.15cqw)}.sample-2>div:first-of-type p{background:linear-gradient(transparent 55%,var(--learning-accent) 55%);width:fit-content;flex:initial}.learning-prompt{display:flex;gap:1.2cqw;align-items:baseline}.learning-prompt>span{font-size:1.2cqw;white-space:nowrap;font-weight:600;color:var(--foreground)}.learning-prompt p{font-size:1.55cqw;line-height:1.8;margin:0}.learning-caveat{font-size:1.2cqw;line-height:1.6;color:var(--muted-foreground);margin:1.1cqw 0 0}.learning-ending{padding:5cqw 0 3cqw}.learning-ending h2{font-size:5.2cqw}.learning-workflow{list-style:none;padding:0;margin:1cqw 0 3.5cqw;display:grid;gap:1cqw}.learning-workflow li{position:relative;display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 1.8cqw;background:var(--selection);border-radius:.7cqw;font-size:1.9cqw}.learning-workflow b{font-family:Georgia,serif;font-size:2.6cqw;font-style:italic}.learning-workflow svg{margin-left:auto;width:2cqw;height:2cqw;color:var(--muted-foreground)}.learning-source-box{border:1px solid var(--border);padding:2.5cqw;border-radius:.8cqw;background:var(--selection)}.learning-source-box h3{display:flex;align-items:center;justify-content:space-between;font-size:2.3cqw;margin:0 0 1.6cqw;font-weight:700}.learning-source-box h3 svg{width:2.4cqw;height:2.4cqw}.learning-source-box>div{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5cqw}.learning-source-box a{display:flex;align-items:center;gap:.9cqw;font-family:Arial,sans-serif;font-size:1.25cqw;padding:1.1cqw 0;border-bottom:1px solid var(--selection-border);overflow-wrap:anywhere;min-width:0}.learning-source-box a>span{font-size:1cqw;color:var(--muted-foreground)}.learning-source-box a svg{margin-left:auto;flex-shrink:0;width:1.3cqw;height:1.3cqw}.learning-source-box p{font-size:1.2cqw;line-height:1.8;color:var(--muted-foreground);margin:1.8cqw 0 0}.learning-series-reminder{display:grid;gap:.9cqw;margin-top:3cqw;font-size:1.35cqw}.learning-series-reminder>b{color:var(--muted-foreground);font-size:1.2cqw}.learning-series-reminder a{display:flex;align-items:center;gap:.8cqw}.learning-series-reminder svg{width:1.4cqw;height:1.4cqw}.learning-pagination{display:flex;align-items:center;justify-content:center;gap:30px;margin:22px 0 18px}.learning-pagination>button{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:var(--surface);border:1px solid var(--border)}.learning-pagination>button:disabled{opacity:.35;cursor:default}.learning-pagination>span{min-width:105px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}.learning-pagination small{display:block;font-size:10px;margin-top:5px;color:var(--muted-foreground)}.learning-page-tabs{max-width:720px;margin:0 auto;display:flex;gap:7px;overflow-x:auto;padding:5px 2px 12px}.learning-page-tabs>button{flex:1;min-width:65px;display:grid;gap:5px;border:1px solid var(--border);border-radius:9px;background:var(--selection);padding:10px 8px;font-size:10px;color:var(--muted-foreground);white-space:nowrap}.learning-page-tabs>button>span{font-size:12px;font-family:Georgia,serif;font-style:italic}.learning-page-tabs>button.selected{background:var(--selection);color:var(--foreground);border-color:var(--selection-border)}.learning-related{max-width:720px;margin:22px auto 0;border-top:1px solid var(--border);padding-top:20px}.learning-related>span{font-size:11px;color:var(--muted-foreground)}.learning-related>div{display:grid;gap:8px;margin-top:12px}.learning-related a{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:12px;color:var(--foreground)}.learning-related a>b{font-family:Georgia,serif;font-style:italic;font-size:19px;color:var(--muted-foreground)}.learning-related a>svg{margin-left:auto;flex-shrink:0}.learning-related a.selected{color:var(--primary);font-weight:600} +.learning-reader{padding:16px 10px;border-radius:14px}.learning-reader button{cursor:pointer}.learning-reader button:focus-visible,.learning-reader a:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.learning-reader-bar{gap:10px;margin-bottom:16px;padding:0 3px}.learning-reader-bar>div{display:grid;gap:9px}.learning-reader-badge{font-size:10px}.learning-reader-bar strong{font-size:12px;line-height:1.6}.learning-reader-bar>button{font-size:11px;padding:9px 10px}.learning-boards{max-width:720px;margin:auto;outline-offset:6px;container-type:inline-size}.learning-boards.is-continuous{display:grid;gap:24px}.learning-cover,.learning-sheet{width:100%;aspect-ratio:3/4;box-shadow:0 5px 22px #343b2810;overflow:hidden}.learning-cover img{display:block;width:100%;height:100%;object-fit:contain}.learning-sheet{position:relative;background:var(--learning-paper);padding:5.6cqw 6.8cqw;color:var(--learning-ink);font-size:1.8cqw;line-height:1.5}.learning-sheet-top{display:flex;justify-content:space-between;align-items:center;letter-spacing:.08em;font-size:1.25cqw;color:#707665;padding-bottom:2.6cqw;border-bottom:1px solid #dcded1}.learning-sheet-top>span:last-child{font-family:Arial,sans-serif;font-size:1.15cqw}.learning-sheet-footer{position:absolute;bottom:3.3cqw;left:6.8cqw;right:6.8cqw;border-top:1px solid #dcded1;padding-top:1.9cqw;display:flex;justify-content:space-between;font-size:1.2cqw;color:#787c70}.learning-sheet-footer b{margin-left:2cqw;color:#34392b;font-weight:600}.learning-intro{padding-top:4.5cqw;margin-bottom:3.6cqw}.learning-chapter{font-size:1.5cqw;letter-spacing:.08em;color:#727963}.learning-intro h2,.learning-ending h2{font-size:5.8cqw;line-height:1.28;font-weight:800;letter-spacing:-.04em;margin:2.6cqw 0 2cqw}.learning-sheet mark{color:inherit;background:linear-gradient(transparent 45%,var(--learning-accent) 45%,var(--learning-accent) 93%,transparent 93%);padding:0 .15em}.learning-intro>p,.learning-ending>p{color:#676e5f;font-size:1.85cqw;margin:0}.learning-audience{display:inline-block;font-size:1.35cqw;letter-spacing:.02em;margin-top:2.2cqw;padding:.7cqw 1.4cqw;border:1px solid #d6d9cb;border-radius:20px}.learning-index{display:grid;grid-template-columns:1fr;gap:0}.learning-index button{display:flex;text-align:left;align-items:center;gap:1.6cqw;padding:1.35cqw 0;border-bottom:1px solid #e2e4d9;background:transparent}.learning-index button>span{font-family:Georgia,serif;font-size:3.2cqw;min-width:4cqw;color:#84916a;font-style:italic}.learning-index button>div{flex:1;min-width:0}.learning-index strong{font-size:2cqw;font-weight:650;display:block}.learning-index small{font-size:1.2cqw;color:#858c79;display:block;line-height:1.55}.learning-index svg{width:2.3cqw;flex-shrink:0;color:#7e886c}.learning-index-note{display:flex;align-items:center;gap:1cqw;font-size:1.4cqw;color:#727b63;margin-top:2.4cqw}.learning-index-note svg{width:2cqw}.learning-pair-title{padding:3.7cqw 0 2.7cqw}.learning-pair-title>span{font-size:1.3cqw;color:#7c846d}.learning-pair-title h2{margin:.6cqw 0 0;font-size:3.5cqw;font-weight:750;letter-spacing:-.035em}.learning-skill{padding:2.6cqw 0;border-top:1px solid #d9ddcf}.learning-skill-heading{display:flex;gap:1.9cqw;align-items:center}.learning-number{font-family:Georgia,serif;font-size:5.3cqw;font-style:italic;line-height:1;color:#343b2a;min-width:6.7cqw;position:relative;z-index:0}.learning-number:after{content:"";position:absolute;left:0;right:-.2cqw;height:2cqw;bottom:.1cqw;z-index:-1;background:var(--learning-accent);transform:rotate(-5deg)}.learning-category{font-size:1.2cqw;color:#778168;letter-spacing:.08em}.learning-skill h3{font-size:2.7cqw;line-height:1.4;font-weight:750;letter-spacing:-.025em;margin:.3cqw 0 0}.learning-skill-name{margin:1.15cqw 0 1.55cqw 8.6cqw;display:flex;gap:.7cqw;align-items:center;width:fit-content;max-width:calc(100% - 8.6cqw);font-size:1.25cqw;font-family:Arial,sans-serif;color:#717b62;overflow-wrap:anywhere}.learning-skill-name svg{width:1.4cqw;height:1.4cqw;flex-shrink:0}.learning-io{display:grid;gap:.75cqw;margin-bottom:1.7cqw}.learning-io p{display:flex;align-items:baseline;gap:1.2cqw;margin:0;font-size:1.7cqw;line-height:1.6}.learning-io b{font-size:1.35cqw;flex-shrink:0;font-weight:600;padding:.2cqw .8cqw;background:#e8eadd;border-radius:4px;color:#626c53}.learning-sample{border:1px solid #dce0d1;border-radius:.9cqw;padding:1.2cqw 1.9cqw;background:#fffefa;position:relative;margin-bottom:1.7cqw}.sample-label{font-size:1.05cqw;display:block;color:#939987;margin-bottom:.8cqw}.learning-sample>div{display:flex;align-items:center;gap:1.2cqw;font-size:1.5cqw;padding:.4cqw 0}.learning-sample>div>span{font-family:Arial,sans-serif;font-size:1cqw;color:#9ca48e}.learning-sample p{margin:0;flex:1}.learning-sample svg{color:#849c59;width:1.6cqw;height:1.6cqw}.sample-1{background:repeating-linear-gradient(#fffefa 0,#fffefa 3.05cqw,#e8eade 3.05cqw,#e8eade 3.15cqw)}.sample-2>div:first-of-type p{background:linear-gradient(transparent 55%,var(--learning-accent) 55%);width:fit-content;flex:initial}.learning-prompt{display:flex;gap:1.2cqw;align-items:baseline}.learning-prompt>span{font-size:1.2cqw;white-space:nowrap;font-weight:600;color:#63714f}.learning-prompt p{font-size:1.55cqw;line-height:1.8;margin:0}.learning-caveat{font-size:1.2cqw;line-height:1.6;color:#858c79;margin:1.1cqw 0 0}.learning-ending{padding:5cqw 0 3cqw}.learning-ending h2{font-size:5.2cqw}.learning-workflow{list-style:none;padding:0;margin:1cqw 0 3.5cqw;display:grid;gap:1cqw}.learning-workflow li{position:relative;display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 1.8cqw;background:#ecefdf;border-radius:.7cqw;font-size:1.9cqw}.learning-workflow b{font-family:Georgia,serif;font-size:2.6cqw;font-style:italic}.learning-workflow svg{margin-left:auto;width:2cqw;height:2cqw;color:#8b9579}.learning-source-box{border:1px solid #d5dac8;padding:2.5cqw;border-radius:.8cqw;background:#fffefa}.learning-source-box h3{display:flex;align-items:center;justify-content:space-between;font-size:2.3cqw;margin:0 0 1.6cqw;font-weight:700}.learning-source-box h3 svg{width:2.4cqw;height:2.4cqw}.learning-source-box>div{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5cqw}.learning-source-box a{display:flex;align-items:center;gap:.9cqw;font-family:Arial,sans-serif;font-size:1.25cqw;padding:1.1cqw 0;border-bottom:1px solid #e8ebdf;overflow-wrap:anywhere;min-width:0}.learning-source-box a>span{font-size:1cqw;color:#98a18b}.learning-source-box a svg{margin-left:auto;flex-shrink:0;width:1.3cqw;height:1.3cqw}.learning-source-box p{font-size:1.2cqw;line-height:1.8;color:#87917a;margin:1.8cqw 0 0}.learning-series-reminder{display:grid;gap:.9cqw;margin-top:3cqw;font-size:1.35cqw}.learning-series-reminder>b{color:#7e886d;font-size:1.2cqw}.learning-series-reminder a{display:flex;align-items:center;gap:.8cqw}.learning-series-reminder svg{width:1.4cqw;height:1.4cqw}.learning-pagination{margin-top:17px}.learning-pagination>button{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:var(--surface);border:1px solid var(--border)}.learning-pagination>button:disabled{opacity:.35;cursor:default}.learning-pagination>span{min-width:105px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}.learning-pagination small{display:block;font-size:10px;margin-top:5px;color:var(--muted-foreground)}.learning-page-tabs{max-width:720px;margin:0 auto;display:flex;gap:7px;overflow-x:auto;padding:5px 2px 12px}.learning-page-tabs>button{flex:1;min-width:65px;display:grid;gap:5px;border:1px solid var(--border);border-radius:9px;background:var(--selection);padding:10px 8px;font-size:10px;color:var(--muted-foreground);white-space:nowrap}.learning-page-tabs>button>span{font-size:12px;font-family:Georgia,serif;font-style:italic}.learning-page-tabs>button.selected{background:var(--selection);color:var(--foreground);border-color:var(--selection-border)}.learning-related{max-width:720px;margin:22px auto 0;border-top:1px solid var(--border);padding-top:20px}.learning-related>span{font-size:11px;color:var(--muted-foreground)}.learning-related>div{display:grid;gap:8px;margin-top:12px}.learning-related a{font-size:11px;line-height:1.7}.learning-related a>b{font-family:Georgia,serif;font-style:italic;font-size:19px;color:var(--muted-foreground)}.learning-related a>svg{margin-left:auto;flex-shrink:0}.learning-related a.selected{color:var(--primary);font-weight:600} @media(max-width:650px){.learning-reader{padding:16px 10px;border-radius:14px}.learning-reader-bar{gap:10px;margin-bottom:16px;padding:0 3px}.learning-reader-bar strong{font-size:12px;line-height:1.6}.learning-reader-bar>button{font-size:11px;padding:9px 10px}.learning-reader-badge{font-size:10px}.learning-related a{font-size:11px;line-height:1.7}.learning-pagination{margin-top:17px}.learning-sheet{font-synthesis:none}} -.detail-layout.coded-detail{grid-template-columns:minmax(0,1fr);max-width:1050px;border:0;box-shadow:none;overflow:visible}.coded-detail .detail-media{background:transparent}.coded-detail .detail-info{margin:28px auto 0;max-width:780px;width:100%;border-top:1px solid var(--border)}.coded-detail .detail-info>.eyebrow{display:none} +.detail-layout.coded-detail{grid-template-columns:minmax(0,1fr);max-width:1050px;border:0;box-shadow:none;overflow:visible}.coded-detail .detail-media{background:transparent}.coded-detail .detail-info{margin:28px auto 0;max-width:780px;width:100%;border-top:1px solid #e5e7df}.coded-detail .detail-info>.eyebrow{display:none} .learning-index button{padding:1cqw 0} .learning-standalone{width:1080px;height:1440px;margin:0;background:var(--selection);overflow:hidden}.learning-standalone .learning-boards{width:1080px;max-width:none;margin:0;container-type:inline-size}.learning-standalone .learning-cover,.learning-standalone .learning-sheet{box-shadow:none}.learning-html-cover svg{display:block;width:100%;height:100%}.snapshot-reader{padding:24px;background:var(--surface);border-radius:20px}.snapshot-reader>header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 auto 20px;max-width:800px}.snapshot-reader header p{font-size:12px;color:var(--muted-foreground)}.snapshot-reader header b{font-size:15px}.snapshot-reader header button{font-size:12px}.snapshot-stage{max-width:720px;margin:auto;aspect-ratio:3/4;background:var(--surface)}.snapshot-stage img{display:block;width:100%;height:auto}.snapshot-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;color:var(--muted-foreground)}.snapshot-reader>nav{display:flex;align-items:center;justify-content:center;gap:20px;font-size:13px;margin:20px 0}.snapshot-reader nav button{border-radius:50%;padding:9px;background:var(--surface)}.snapshot-reader nav a{display:flex;align-items:center;gap:7px;color:var(--foreground)}.snapshot-reader button:disabled{opacity:.4;cursor:default}.snapshot-thumbs{display:flex;max-width:720px;gap:8px;margin:auto}.snapshot-thumbs>button{width:calc(100% / 8);aspect-ratio:3/4;background:var(--surface-muted);border:2px solid transparent;border-radius:8px;overflow:hidden}.snapshot-thumbs>button[aria-pressed=true]{border-color:var(--border)}.snapshot-thumbs img{width:100%;height:100%;object-fit:cover}