Skip to content

Commit 9ce4183

Browse files
jsshin2022jsshin2022
committed
Unify navigation and polish the hub after a UX review
- Same five-item nav and skip link on every page, with the current page marked - Quiz becomes the last goal chip; game and lab links move into the daily band - Picking a route hides the weekly block so the route shelf comes first - Add a marketing route and send marketing quiz answers to it - One tenure format for Builders across the hub and Builder pages - Builder dialog: '자료 열기' and a way back to the person - Upcoming Data Forum first, with a clear note when sign-up is not open yet - Stamp toast shows above an open dialog - Lab: challenge on top, sticky chart on small screens, notes open once solved - Sort chapters in the game review; small layout fixes
1 parent a2be678 commit 9ce4183

12 files changed

Lines changed: 132 additions & 62 deletions

File tree

‎404.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@
1212
<link rel="stylesheet" href="/assets/css/hub.css">
1313
</head>
1414
<body>
15+
<a class="skip" href="#main">본문으로 건너뛰기</a>
1516
<header class="site-header">
1617
<div class="wrap header-row">
1718
<a class="brand" href="/"><img class="brand-logo" src="/assets/img/team-mark.png" alt="" width="34" height="34"><span class="brand-text"><span class="brand-name">Causal Inference Hub</span><span class="brand-sub">가짜연구소 인과추론팀</span></span></a>
19+
<nav class="site-nav" aria-label="주요 메뉴"><a href="/#curriculum">커리큘럼</a><a href="/game.html">게임</a><a href="/lab.html">실험실</a><a href="/builders/">Builder</a><a href="/#join">참여하기</a></nav>
1820
<button type="button" class="pass-btn" data-passport aria-label="학습 여권 열기">여권 <b data-passport-count>0/9</b></button>
1921
</div>
2022
</header>
21-
<main class="reader">
23+
<main class="reader" id="main">
2224
<div class="wrap">
2325
<h1>페이지를 찾을 수 없습니다</h1>
2426
<p class="meta">예전 블로그 주소로 들어오셨다면 글은 읽을거리로 옮겨졌습니다.</p>

‎article.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,7 @@
2020
<img class="brand-logo" src="assets/img/team-mark.png" alt="" width="34" height="34">
2121
<span class="brand-text"><span class="brand-name">Causal Inference Hub</span><span class="brand-sub">가짜연구소 인과추론팀</span></span>
2222
</a>
23-
<nav class="site-nav" aria-label="주요 메뉴">
24-
<a href="./#cohort">이번 기수</a>
25-
<a href="./#builders">Builder</a>
26-
<a href="./#repos">오픈소스</a>
27-
<a href="./#start">학습 경로</a>
28-
<a href="./#reading">읽을거리</a>
29-
<a href="./#join">참여하기</a>
30-
</nav>
23+
<nav class="site-nav" aria-label="주요 메뉴"><a href="./#curriculum">커리큘럼</a><a href="game.html">게임</a><a href="lab.html">실험실</a><a href="builders/">Builder</a><a href="./#join">참여하기</a></nav>
3124
<button type="button" class="pass-btn" data-passport aria-label="학습 여권 열기">여권 <b data-passport-count>0/9</b></button>
3225
</div>
3326
</header>

‎assets/css/hub.css‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ body {
5555
margin: 0; background: var(--paper); color: var(--ink);
5656
font-family: var(--f-body); font-size: 16px; line-height: 1.6;
5757
-webkit-font-smoothing: antialiased; word-break: keep-all;
58+
min-height: 100vh; min-height: 100dvh;
5859
}
5960
img { max-width: 100%; }
6061
a { color: var(--accent); text-underline-offset: 3px; }
@@ -93,7 +94,7 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
9394
.site-nav::-webkit-scrollbar { display: none; }
9495
.site-nav a { color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 8px; white-space: nowrap; font-size: 15px; font-weight: 500; }
9596
.site-nav a:hover { color: var(--ink); background: var(--surface-2); }
96-
.site-nav a[aria-current="true"] { color: var(--ink); background: var(--surface-2); font-weight: 700; }
97+
.site-nav a[aria-current="true"], .site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 700; }
9798
@media (max-width: 820px) {
9899
.header-row { flex-wrap: wrap; gap: 2px; padding-block: 8px; }
99100
.site-nav { margin-left: 0; width: 100%; }
@@ -249,7 +250,8 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
249250
/* Curriculum shelf */
250251
.goal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
251252
.goal-q { font-weight: 700; }
252-
#route-note { margin-top: 10px; min-height: 1.6em; }
253+
#route-note { margin-top: 10px; min-height: 1.6em; scroll-margin-top: 96px; }
254+
#route-note:empty { min-height: 0; margin-top: 0; }
253255
.shelf-bar { display: flex; align-items: flex-end; gap: 16px; margin: 8px 0 12px; }
254256
.shelf-nav { display: flex; gap: 6px; flex-shrink: 0; }
255257
.shelf-nav button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; }
@@ -314,8 +316,8 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
314316
.shelf-nav { display: none; }
315317
.chap { width: min(66vw, 240px); }
316318
.chapters .nm { display: none; }
317-
.goal-row .route-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter-l) var(--gutter-r); }
318-
.goal-row .route-chips .chip { flex-shrink: 0; }
319+
.goal-row .route-chips { gap: 6px; }
320+
.goal-row .route-chips .chip { font-size: 13.5px; padding: 6px 12px; }
319321
}
320322

321323
/* This week (curriculum tab): spotlight, recent updates, continue */
@@ -474,12 +476,22 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
474476
.event .ppl b { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; font-size: 24px; color: var(--ink); }
475477
.event .bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
476478
.event .bar i { display: block; height: 100%; background: var(--accent); }
479+
.event .btn.sm { margin-top: auto; align-self: flex-start; }
480+
@media (max-width: 560px) {
481+
.events { grid-template-columns: minmax(0, 1fr); gap: 8px; }
482+
.event { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 12px; padding: 14px; }
483+
.event .ord { grid-row: span 4; font-size: 26px; }
484+
.event .ppl, .event .btn.sm { margin-top: 4px; }
485+
.event .soon-tag { justify-self: start; }
486+
}
477487

478488
/* Goals */
479489
.route-chips { display: flex; flex-wrap: wrap; gap: 8px; }
480490
.chip { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); padding: 7px 14px; border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
481491
.chip:hover { border-color: var(--ink); }
482492
.chip[aria-checked="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
493+
.chip.quiz-chip { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); background: var(--accent-soft); color: var(--accent); }
494+
.chip.quiz-chip:hover { border-style: solid; border-color: var(--accent); }
483495
.route-note { color: var(--muted); font-size: 14px; }
484496

485497
.map-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 12px 0 16px; min-width: 0; }
@@ -617,6 +629,7 @@ dialog.station::backdrop { background: rgba(10, 14, 20, .55); }
617629
.p-timeline li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px 0 8px 18px; }
618630
.p-timeline li::before { content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--surface); }
619631
.p-timeline li.r::before { box-sizing: border-box; background: var(--surface); border: 2px solid var(--c); }
632+
.tl-c { white-space: nowrap; }
620633
.tl-c b { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
621634
.tl-c span { font-size: 11.5px; color: var(--muted); }
622635
.tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
@@ -658,14 +671,6 @@ dialog.station::backdrop { background: rgba(10, 14, 20, .55); }
658671
.notice { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
659672

660673
/* Start-point quiz entry, quiz dialog, finish card, Builder share */
661-
.start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -2px 0 10px; }
662-
.start-btn { font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--rule)); background: var(--accent-soft); color: var(--ink); cursor: pointer; }
663-
.start-btn b { color: var(--accent); font-weight: 800; }
664-
.start-btn:hover { border-style: solid; border-color: var(--accent); }
665-
.start-btn:focus-visible, .start-game:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
666-
.start-game { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
667-
.start-game::after { content: " ›"; }
668-
.start-game:hover { color: var(--ink); text-decoration: underline; }
669674
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; margin-top: 0; }
670675
button.btn { font: inherit; font-weight: 600; cursor: pointer; border: 0; }
671676
button.btn.ghost { border: 1.5px solid var(--rule); }
@@ -828,6 +833,11 @@ button.btn.sm { font-size: 14px; }
828833
.daily { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 28px; padding: 20px 24px; border-radius: 18px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--rule)); }
829834
.daily-head h2 { font-size: 18px; letter-spacing: -.01em; }
830835
.daily-date { font-size: 13px; color: var(--muted); margin-top: 2px; }
836+
.daily-warm { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; font-size: 13.5px; font-weight: 700; }
837+
.daily-warm span { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--muted); }
838+
.daily-warm a { text-decoration: none; }
839+
.daily-warm a::after { content: " ›"; }
840+
.daily-warm a:hover { text-decoration: underline; }
831841
.daily-streak { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #FFF1C2; color: #6B4B00; }
832842
.daily-streak.quiet { background: var(--surface-2); color: var(--muted); font-weight: 600; }
833843
.daily-body { display: grid; gap: 10px; min-width: 0; }
@@ -845,7 +855,7 @@ button.btn.sm { font-size: 14px; }
845855
.daily-why { font-size: 14.5px; }
846856
.daily-more { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 700; }
847857
.daily-next { font-size: 12.5px; color: var(--muted); }
848-
@media (max-width: 760px) { .daily { grid-template-columns: minmax(0, 1fr); padding: 18px; } .daily-opts button { flex: 1 1 100%; } }
858+
@media (max-width: 760px) { .daily { grid-template-columns: minmax(0, 1fr); padding: 18px; } .daily-warm span { flex-basis: auto; } .daily-opts button { flex: 1 1 100%; } }
849859

850860
/* Confounding lab (lab.html) */
851861
.lab { padding-block: 32px 72px; }
@@ -900,19 +910,42 @@ button.btn.sm { font-size: 14px; }
900910
.lab-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
901911
.lab-legend .dot.on { background: var(--l-main); }
902912
.lab-legend .dot.off { background: var(--l-exp); }
913+
.lab-legend .ln { width: 16px; border-top: 2px solid var(--muted); }
914+
.lab-legend .ln.dash { border-top-style: dashed; }
915+
.lab-legend { flex-wrap: wrap; gap: 4px 16px; }
903916
.lab-learn { margin-top: 28px; max-width: 820px; }
904-
.lab-learn h2 { font-size: 18px; margin-bottom: 10px; }
917+
.lab-learn h2 { font-size: 18px; display: inline; }
918+
.lab-learn summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
919+
.lab-learn summary::-webkit-details-marker { display: none; }
920+
.lab-learn summary::before { content: "▸"; color: var(--muted); }
921+
.lab-learn details[open] summary::before { content: "▾"; }
922+
.lab-learn summary span { font-size: 13px; color: var(--muted); }
923+
.lab-learn details[open] summary span { display: none; }
924+
.lab-learn summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
925+
.lab > .wrap > .lab-challenge { margin-top: 18px; max-width: 46em; font-size: 15px; }
905926
.lab-learn ol { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; }
906927
.lab-learn a { font-weight: 700; margin-left: 4px; }
907-
@media (max-width: 900px) { .lab-grid { grid-template-columns: minmax(0, 1fr); } }
928+
@media (max-width: 900px) {
929+
.lab-grid { grid-template-columns: minmax(0, 1fr); }
930+
/* keep the chart in view while the sliders move */
931+
.lab-chart { order: -1; position: sticky; top: var(--header-h, 56px); z-index: 5; padding: 12px 14px; box-shadow: 0 8px 20px rgba(20, 22, 43, .08); }
932+
.lab-chart h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
933+
.lab-chart-sub { display: none; }
934+
.lab-legend { margin-top: 4px; font-size: 12px; }
935+
}
908936
.toast > span:nth-child(2) { flex: 1; min-width: 0; }
909-
@media (max-width: 900px) { .toast { bottom: auto; top: 72px; transform: translate(-50%, -180%); } .toast.show { transform: translate(-50%, 0); } }
937+
@media (max-width: 900px) { .toast { bottom: auto; top: 96px; transform: translate(-50%, -180%); } .toast.show { transform: translate(-50%, 0); } }
910938
.lab-ctl.off input[type=range] { opacity: .45; }
911939
.lab-ctl.off small { color: var(--live); font-weight: 600; }
912940
.lab-note { font-size: 12.5px; color: var(--muted); }
913941
#lab-svg .fit-l { stroke-width: 1.5; opacity: .9; }
914942
#lab-svg .fit-l.on { stroke: var(--l-main); }
915943
#lab-svg .fit-l.off { stroke: var(--l-exp); }
916944
#lab-svg .fit-gap { stroke: var(--live); stroke-width: 3; }
917-
#lab-svg .fit-t { fill: var(--live); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
945+
#lab-svg .fit-t { fill: var(--live); font-size: 13px; font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
918946
@media (max-width: 900px) { .lab-chart { order: -1; } }
947+
948+
/* way back from a repo to the Builder it was opened from */
949+
.back-person { font: inherit; font-size: 13.5px; font-weight: 700; align-self: flex-start; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); cursor: pointer; }
950+
.back-person:hover { border-color: var(--ink); }
951+
.back-person:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

‎assets/js/game.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@
6262
const t = tier(state.score, n, state.right, kinds);
6363
track("game_complete", { score: state.score, total: n, cause_right: state.right.cause, corr_right: state.right.corr });
6464
if (window.hubStamp) { window.hubStamp("game"); if (state.score >= 8) window.hubStamp("sharp"); }
65-
const chapters = [...new Map(state.wrong.map((q) => [q.chapter.url, q.chapter])).values()];
65+
const chNum = (c) => parseInt(c.url.split("/").pop(), 10) || 99;
66+
const chapters = [...new Map(state.wrong.map((q) => [q.chapter.url, q.chapter])).values()].sort((x, y) => chNum(x) - chNum(y));
6667
const share = window.hubShareUrl ? window.hubShareUrl("/game.html", "game") : location.href;
6768
root.innerHTML = `
6869
<p class="gm-kicker">결과</p>

0 commit comments

Comments
 (0)