/* ------------------------------------------------------------------
course.css — 本教學工作區所有課程與參考文件共用的樣式表
風格：Tufte 式排版（寬邊界、旁註、襯線字體、克制的顏色），列印友善
主題：預設暗色； 切成亮色（由 theme.js 控制）
用法：
← 放在 ，避免閃白
------------------------------------------------------------------ */
/* ---------- 主題變數：預設暗色 ---------- */
:root {
color-scheme: dark;
--bg: #161614;
--surface: #1e1e1b; /* 卡片、表格列、流程節點底色 */
--ink: #e8e4d8;
--muted: #a9a59a;
--faint: #6f6c64;
--accent: #e0846c; /* 暖紅：強調、標題裝飾 */
--flow: #8bbbe0; /* 藍：流程節點、連結 */
--link-rule: #3a4c5c;
--you: #e2b93b; /* 金：「你在這裡」 */
--you-bg: #2f2812;
--you-ink: #f1d78a;
--you-ring: #4a3d14;
--rule: #33322e;
--code-bg: #262622;
--skill-bg: #22303c;
--ok: #7ac47f;
--ok-bg: #1c2e1e;
--bad: #e57368;
--bad-bg: #3a1f1c;
--tip-bg: #1c242e;
--warn-bg: #332a17;
--win-bg: #2c2716;
--shadow: 0 0 0 3px var(--you-ring);
--serif: "Iowan Old Style", "Palatino", Georgia, "Songti TC", "Noto Serif TC", serif;
--sans: -apple-system, "PingFang TC", "Helvetica Neue", "Noto Sans TC", sans-serif;
--mono: "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK TC", monospace;
--measure: 42rem; /* 主欄寬 */
--margin: 18rem; /* 旁註欄寬 */
}
/* ---------- 亮色主題 ---------- */
[data-theme="light"] {
color-scheme: light;
--bg: #fffff8;
--surface: #ffffff;
--ink: #141414;
--muted: #5a5a5a;
--faint: #9a9a9a;
--accent: #a3412b;
--flow: #2b5a7a;
--link-rule: #b9c9d6;
--you: #b8860b;
--you-bg: #fff8e1;
--you-ink: #6b4d00;
--you-ring: #fff3c4;
--rule: #d9d6cc;
--code-bg: #f3f1e8;
--skill-bg: #e9eff4;
--ok: #2e7d32;
--ok-bg: #e8f3e9;
--bad: #b3261e;
--bad-bg: #fbeae8;
--tip-bg: #eef3f7;
--warn-bg: #fdf3e2;
--win-bg: #f6f0da;
}
* { box-sizing: border-box; }
html { font-size: 17px; background: var(--bg); }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* ---------- 主題切換鈕（theme.js 注入） ---------- */
.theme-toggle {
position: fixed;
top: 0.9rem;
right: 0.9rem;
z-index: 50;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.04em;
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--rule);
background: var(--surface);
color: var(--muted);
cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--flow); }
/* ---------- 版面 ---------- */
.page {
max-width: calc(var(--measure) + var(--margin) + 6rem);
margin: 0 auto;
padding: 3rem 2rem 6rem;
}
article > *,
section > * {
max-width: var(--measure);
}
section { margin: 3rem 0; }
/* ---------- 標題 ---------- */
h1, h2, h3 {
font-family: var(--serif);
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.005em;
}
h1 { font-size: 2.4rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; font-style: italic; }
h3 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }
h2::before {
content: "§ ";
color: var(--accent);
font-style: normal;
}
.lesson-header { margin-bottom: 3rem; border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; }
.lesson-header .kicker {
font-family: var(--sans);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 0.5rem;
}
.lesson-header .subtitle {
font-size: 1.25rem;
font-style: italic;
color: var(--muted);
margin: 0 0 1rem;
}
.lesson-header .meta {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--muted);
}
.lesson-header .meta span + span::before { content: " · "; color: var(--faint); }
/* ---------- 內文 ---------- */
p { margin: 0 0 1.1rem; }
a { color: var(--flow); text-decoration: none; border-bottom: 1px solid var(--link-rule); }
a:hover { border-bottom-color: var(--flow); }
strong { font-weight: 600; }
em { font-style: italic; }
ul, ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.35rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
code, kbd {
font-family: var(--mono);
font-size: 0.85em;
background: var(--code-bg);
padding: 0.1em 0.35em;
border-radius: 3px;
}
pre {
font-family: var(--mono);
font-size: 0.82rem;
background: var(--code-bg);
padding: 1rem 1.2rem;
border-radius: 4px;
overflow-x: auto;
line-height: 1.5;
margin: 0 0 1.2rem;
}
pre code { background: none; padding: 0; font-size: inherit; }
/* skill 名稱：統一以此樣式呈現，讓它在文中一眼可辨 */
code.skill {
color: var(--flow);
background: var(--skill-bg);
font-weight: 600;
white-space: nowrap;
}
/* ---------- 旁註（Tufte sidenote） ---------- */
.sidenote, .marginnote {
font-family: var(--sans);
font-size: 0.8rem;
line-height: 1.45;
color: var(--muted);
}
@media (min-width: 1100px) {
.sidenote, .marginnote {
float: right;
clear: right;
width: var(--margin);
margin-right: calc(-1 * var(--margin) - 3rem);
margin-top: 0.2rem;
margin-bottom: 0.8rem;
position: relative;
}
.sidenote-number { counter-increment: sidenote; }
.sidenote-number::after {
content: counter(sidenote);
font-size: 0.7rem;
vertical-align: super;
color: var(--accent);
margin-left: 0.1em;
}
.sidenote::before {
content: counter(sidenote) " ";
color: var(--accent);
font-size: 0.7rem;
vertical-align: super;
}
article { counter-reset: sidenote; }
}
@media (max-width: 1099px) {
.sidenote, .marginnote {
display: block;
margin: 0.6rem 0 1rem;
padding-left: 0.9rem;
border-left: 2px solid var(--rule);
}
.sidenote-number::after { content: ""; }
}
/* ---------- 表格 ---------- */
table {
border-collapse: collapse;
width: 100%;
font-size: 0.92rem;
margin: 0 0 1.5rem;
font-family: var(--sans);
}
th, td {
text-align: left;
vertical-align: top;
padding: 0.5rem 0.6rem;
border-bottom: 1px solid var(--rule);
}
th {
font-weight: 600;
border-bottom: 2px solid var(--ink);
font-size: 0.82rem;
letter-spacing: 0.04em;
}
table.wide { max-width: none; }
/* ---------- 方塊 ---------- */
.callout {
border-left: 3px solid var(--flow);
background: var(--tip-bg);
padding: 0.9rem 1.1rem;
margin: 1.4rem 0;
font-size: 0.95rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout.warn { border-color: var(--you); background: var(--warn-bg); }
.callout.win { border-color: var(--accent); background: var(--win-bg); }
.callout .label {
display: block;
font-family: var(--sans);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.3rem;
}
.source {
border: 1px solid var(--rule);
padding: 1rem 1.2rem;
margin: 1.4rem 0;
background: var(--surface);
}
.source .label { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.ask {
margin: 3rem 0 0;
padding: 1rem 1.2rem;
border-top: 1px dashed var(--rule);
border-bottom: 1px dashed var(--rule);
font-size: 0.95rem;
color: var(--muted);
}
/* ---------- 流程圖（純 CSS） ---------- */
.flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.35rem;
margin: 1.2rem 0 1.6rem;
max-width: none;
font-family: var(--sans);
font-size: 0.85rem;
}
.flow .step {
border: 1.5px solid var(--flow);
color: var(--flow);
border-radius: 6px;
padding: 0.35rem 0.7rem;
background: var(--surface);
white-space: nowrap;
}
.flow .step small { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 400; }
.flow .step.branch { border-style: dashed; color: var(--muted); border-color: var(--faint); }
.flow .step.you { border-color: var(--you); color: var(--you-ink); background: var(--you-bg); box-shadow: var(--shadow); }
.flow .step.inner { border-width: 1px; font-size: 0.78rem; background: var(--code-bg); }
.flow .arrow { color: var(--faint); padding: 0 0.15rem; }
.flow .arrow::before { content: "→"; }
.flow .label { width: 100%; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.4rem; }
.flow.vertical { flex-direction: column; align-items: flex-start; }
.flow.vertical .arrow::before { content: "↓"; }
/* ---------- 測驗（配合 quiz.js） ---------- */
.quiz { max-width: none; }
.quiz .quiz-intro { max-width: var(--measure); }
.quiz-q {
max-width: var(--measure);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 1rem 1.2rem;
margin: 0 0 1rem;
background: var(--surface);
}
.quiz-q .qnum { font-family: var(--sans); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.08em; }
.quiz-q .qtext { margin: 0.2rem 0 0.8rem; font-size: 1.02rem; }
.quiz-q .reveal {
font-family: var(--sans);
font-size: 0.85rem;
background: var(--code-bg);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 0.4rem 0.8rem;
cursor: pointer;
}
.quiz-q .reveal:hover { border-color: var(--flow); }
.quiz-q .hint { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin: 0.3rem 0 0; }
.quiz-opts { display: grid; gap: 0.45rem; margin-top: 0.6rem; }
.quiz-opt {
font-family: var(--mono);
font-size: 0.88rem;
text-align: left;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 4px;
padding: 0.5rem 0.8rem;
cursor: pointer;
color: var(--ink);
}
.quiz-opt:hover:not(:disabled) { border-color: var(--flow); background: var(--tip-bg); }
.quiz-opt:disabled { cursor: default; opacity: 0.85; }
.quiz-opt.correct { border-color: var(--ok); background: var(--ok-bg); }
.quiz-opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.quiz-explain {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--muted);
margin: 0.7rem 0 0;
padding-top: 0.6rem;
border-top: 1px dashed var(--rule);
}
.quiz-explain.ok::before { content: "✔ 答對了。"; color: var(--ok); font-weight: 600; }
.quiz-explain.ko::before { content: "✘ 不對。"; color: var(--bad); font-weight: 600; }
.quiz-score {
max-width: var(--measure);
font-family: var(--sans);
font-size: 0.9rem;
padding: 0.9rem 1.2rem;
border-radius: 6px;
background: var(--win-bg);
margin-top: 1rem;
}
.quiz-score button {
font-family: var(--sans);
font-size: 0.85rem;
margin-top: 0.5rem;
padding: 0.35rem 0.8rem;
border: 1px solid var(--accent);
background: var(--surface);
color: var(--accent);
border-radius: 4px;
cursor: pointer;
}
.quiz-history { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }
/* ---------- 導覽 ---------- */
.nav {
display: flex;
justify-content: space-between;
gap: 1rem;
font-family: var(--sans);
font-size: 0.85rem;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--rule);
max-width: var(--measure);
}
.nav a { border: 0; }
.nav .disabled { color: var(--faint); }
/* ---------- 指令區塊的複製鈕（由 copy.js 注入） ---------- */
.code-wrap { position: relative; max-width: var(--measure); }
.code-wrap pre { padding-right: 4.8rem; }
.copy-btn {
position: absolute;
top: 0.45rem;
right: 0.45rem;
font-family: var(--sans);
font-size: 0.72rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--rule);
background: var(--surface);
color: var(--muted);
cursor: pointer;
}
.copy-btn:hover { color: var(--ink); border-color: var(--flow); }
/* ---------- 列印：一律亮色 ---------- */
@media print {
:root {
color-scheme: light;
--bg: #fff; --surface: #fff; --ink: #111; --muted: #555; --faint: #999;
--accent: #a3412b; --flow: #2b5a7a; --link-rule: #ccc; --you: #b8860b;
--you-bg: #fff8e1; --you-ink: #6b4d00; --you-ring: #fff3c4; --rule: #ccc;
--code-bg: #f3f1e8; --skill-bg: #eef2f5; --ok: #2e7d32; --ok-bg: #e8f3e9;
--bad: #b3261e; --bad-bg: #fbeae8; --tip-bg: #f2f5f8; --warn-bg: #fdf3e2; --win-bg: #f6f0da;
}
html { font-size: 11pt; }
.page { padding: 0; max-width: none; }
.no-print, .nav, .ask, .theme-toggle { display: none !important; }
a { color: inherit; border: 0; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: var(--muted); }
.sidenote, .marginnote { float: none; width: auto; margin: 0.4rem 0; border-left: 2px solid var(--rule); padding-left: 0.8rem; }
.quiz-q { break-inside: avoid; }
.quiz-opts { display: none; } /* 列印版：只印題目，當回想練習用 */
.quiz-q .reveal { display: none; }
.quiz-q::after { content: "（列印版：先在腦中作答，再回到網頁版核對）"; font-size: 0.75rem; color: var(--muted); }
h2 { break-after: avoid; }
}