Skip to content

Commit 27c68f5

Browse files
BillLaiTradeBillLaiTrade
committed
重繪第四區虛像補充插圖與對照版面
1 parent c68922a commit 27c68f5

3 files changed

Lines changed: 98 additions & 31 deletions

File tree

‎docs/decisions/unit-4.4-magnifier-virtual-bridge.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,5 @@
99
「虛像在另一側，眼睛為什麼看得到？」放在預設收合的原生 details 中，以照鏡子和看放大鏡兩個小圖補充：像的位置與眼睛接到光的位置可以不同。鏡子小圖畫反射光及其反向延長線，放大鏡小圖畫透射光及其反向延長線；眼睛均在實際收到光的位置。沒有加入眼內構造、調節機制或入眼光束放大圖，這些仍留給第七區。
1010

1111
檢查涵蓋兩區代表光的取樣與斜率一致、虛像位置與倍率、跨 F 的光路選擇、補充區鍵盤展開／收合、對照連結，以及桌面與手機版面。
12+
13+
補充圖的視覺修訂：兩圖採相同光學實驗台配色、鏡面與玻璃材質、圖卡和底座；眼睛都放在右側，直接對照虛像與觀察者的位置。實際光線與反向延長線共用圖例，箭頭沿幾何光路計算。照鏡子保持物像等大、到鏡面的距離相等；放大鏡採物距半焦距，虛像維持正立兩倍。圖下注解與結論簡短呈現，桌面並排、手機上下排列；補充區仍預設收合。

‎units/4/parts/4.4/assets/magnifier-studio.css‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -119,30 +119,43 @@
119119
.magnifier-lab.convex-bench .magnifier-trace { flex:0 0 auto; flex-wrap:nowrap; align-items:stretch; }
120120
.magnifier-takeaway { margin:14px 0 10px; padding:10px 12px; border-radius:10px; background:#e5efda; color:#28553a; font-size:.86rem; line-height:1.6; font-weight:650; }
121121
.magnifier-takeaway .magnifier-review-link { display:block; margin:4px 0 0; font-size:.73rem; font-weight:400; }
122-
.magnifier-lab .magnifier-why { margin:10px 0 0; border:1px solid #bccdb1; border-radius:9px; background:#f8faf3; color:#31543c; font-size:.8rem; }
123-
.magnifier-lab .magnifier-why summary { display:flex; align-items:center; gap:8px; width:auto; padding:9px 11px; list-style:none; cursor:pointer; font-weight:650; }
122+
.magnifier-lab .magnifier-why { margin:12px 0 0; border:1px solid #c2d1b7; border-radius:15px; background:#f6f8f0; color:#31543c; font-size:.82rem; overflow:hidden; }
123+
.magnifier-lab .magnifier-why summary { display:flex; align-items:center; gap:11px; width:auto; padding:15px 18px; list-style:none; cursor:pointer; font-size:.88rem; font-weight:650; }
124124
.magnifier-why summary::-webkit-details-marker { display:none; }
125-
.magnifier-why summary::before { content:'▸'; }
126-
.magnifier-why[open] summary::before { content:'▾'; }
127-
.magnifier-why summary small { margin-left:auto; padding:1px 7px; border-radius:9px; background:#e3ebd8; font-size:.66rem; font-weight:400; white-space:nowrap; }
128-
.magnifier-why-body { padding:0 11px 10px; }
129-
.magnifier-lab .magnifier-why p { margin:4px 0 9px; padding:0; line-height:1.6; }
130-
.magnifier-analogies { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
131-
.magnifier-analogies figure { min-width:0; margin:0; padding:8px; border:1px solid #d1dec5; border-radius:8px; background:#fffdf5; }
132-
.magnifier-analogies h4 { margin:0 0 3px; font-size:.78rem; }
133-
.magnifier-analogies svg { display:block; width:100%; height:auto; }
134-
.magnifier-analogies figcaption { margin:4px 0 0; font-size:.74rem; line-height:1.5; }
135-
.magnifier-analogies svg text { fill:#31543c; font:12px system-ui,sans-serif; }
136-
.analogy-mirror { fill:none; stroke:#608b94; stroke-width:5; }
137-
.analogy-hatch { fill:none; stroke:#96aa9a; stroke-width:2; }
138-
.analogy-stem { fill:none; stroke:#6d9163; stroke-width:3; }
139-
.analogy-red { fill:#d96950; }
140-
.analogy-blue { fill:#438dbb; }
141-
.analogy-light { fill:none; stroke:#d98568; stroke-width:1.6; }
142-
.analogy-back { fill:none; stroke:#d98568; stroke-width:1.4; stroke-dasharray:4 4; }
143-
.analogy-dashed-frame { fill:none; stroke:#8ba18a; stroke-width:1.2; stroke-dasharray:4 4; }
144-
.analogy-lens { fill:#d5e9df; stroke:#527b69; stroke-width:2; }
145-
.analogy-eye { fill:#f5f2df; stroke:#52735c; stroke-width:1.5; }
146-
.analogy-pupil { fill:#34583d; }
147-
.magnifier-lab .magnifier-why-conclusion { margin:9px 0 0; font-weight:650; }
148-
@container convex-bench (max-width:599px) { .magnifier-analogies { grid-template-columns:minmax(0,1fr); } }
125+
.magnifier-why summary::before { content:'＋'; display:grid; place-items:center; width:23px; height:23px; flex:0 0 23px; border-radius:50%; background:#e0e9d5; color:#406448; font-size:16px; font-weight:400; }
126+
.magnifier-why[open] summary::before { content:'−'; }
127+
.magnifier-why[open] summary { border-bottom:1px solid #dce5d3; }
128+
.magnifier-why summary small { margin-left:auto; padding:3px 10px; border:1px solid #d3dfc8; border-radius:20px; font-size:.68rem; font-weight:400; white-space:nowrap; }
129+
.magnifier-why-body { padding:16px 18px 18px; }
130+
.magnifier-lab .magnifier-why p { margin:0 0 14px; padding:0; line-height:1.7; }
131+
.magnifier-lab .magnifier-why-intro { color:#5b7258; font-size:.8rem; }
132+
.magnifier-analogies { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
133+
.magnifier-analogies figure { min-width:0; margin:0; border:1px solid #d5decb; border-radius:12px; background:#fffdf7; box-shadow:0 3px 10px #2e4c2a06; overflow:hidden; }
134+
.analogy-heading { display:flex; align-items:center; gap:8px; padding:13px 14px 11px; }
135+
.analogy-number { display:grid; place-items:center; flex:0 0 25px; height:25px; border-radius:8px; background:#edf1e3; color:#728369; font-size:.64rem; font-variant-numeric:tabular-nums; }
136+
.magnifier-analogies h4 { margin:0; color:#2e533a; font-size:.87rem; font-weight:650; }
137+
.analogy-medium { margin-left:auto; color:#829175; font-size:.65rem; letter-spacing:.08em; }
138+
.magnifier-analogies svg { display:block; width:calc(100% - 16px); height:auto; margin:0 8px; overflow:visible; }
139+
.magnifier-analogies svg text { font:20px system-ui,sans-serif; fill:#34583c; }
140+
.analogy-label text { font-weight:550; }
141+
.analogy-light { fill:none; stroke:#ffbf96; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
142+
.analogy-back { fill:none; stroke:#e4efcf; stroke-width:1.4; stroke-dasharray:5 5; opacity:.8; }
143+
.analogy-direction { fill:none; stroke:#ffbf96; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
144+
.magnifier-analogies figcaption { display:grid; gap:4px; padding:13px 15px 16px; font-size:.76rem; line-height:1.6; }
145+
.magnifier-analogies figcaption strong { color:#30583c; font-weight:650; }
146+
.magnifier-analogies figcaption span { color:#71816a; font-size:.72rem; }
147+
.analogy-line-key { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; margin:12px 0; color:#7c8c72; font-size:.68rem; }
148+
.analogy-line-key span { display:inline-flex; align-items:center; gap:7px; }
149+
.analogy-line-key i { display:inline-block; width:23px; height:0; border-top:2px solid #c28661; }
150+
.analogy-line-key .analogy-key-dashed { border-top:2px dashed #8fa17b; }
151+
.magnifier-lab .magnifier-why .magnifier-why-conclusion { margin:0; padding:11px 14px; border-radius:9px; background:#e7eedb; color:#355b3e; font-size:.78rem; font-weight:550; text-align:center; }
152+
@container convex-bench (max-width:599px) {
153+
.magnifier-analogies { grid-template-columns:minmax(0,1fr); gap:14px; }
154+
.magnifier-lab .magnifier-why summary { padding:12px; gap:8px; font-size:.8rem; }
155+
.magnifier-why-body { padding:13px 11px; }
156+
.magnifier-analogies h4 { font-size:.82rem; }
157+
.analogy-heading { padding:11px; }
158+
.magnifier-analogies figcaption { padding:10px 12px 13px; }
159+
.analogy-line-key { justify-content:flex-start; gap:5px 14px; font-size:.64rem; }
160+
.magnifier-lab .magnifier-why .magnifier-why-conclusion { text-align:left; padding:10px 12px; }
161+
}

0 commit comments

Comments
 (0)