Skip to content

Commit 0cdea64

Browse files
Changlan-ChenChanglan-Chen
authored
Add files via upload
1 parent 47c53b6 commit 0cdea64

17 files changed

Lines changed: 13754 additions & 2143 deletions

‎css/general.css‎

Lines changed: 295 additions & 243 deletions
Large diffs are not rendered by default.

‎css/plots.css‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
/* World Map Styles */
2+
.section-map {
3+
padding: 9.6rem 0;
4+
background-color: #f9f8eb;
5+
}
6+
7+
.map-description {
8+
font-size: 1.8rem;
9+
line-height: 1.6;
10+
max-width: 90rem;
11+
margin: 0 auto 3.2rem auto;
12+
color: #555;
13+
}
14+
15+
.map-box {
16+
width: 100%;
17+
height: 60rem;
18+
background-color: #fff;
19+
border-radius: 11px;
20+
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.08);
21+
overflow: hidden;
22+
position: relative;
23+
}
24+
25+
.country {
26+
stroke: #fff;
27+
stroke-width: 0.5px;
28+
cursor: pointer;
29+
transition: opacity 0.2s, stroke-width 0.2s;
30+
}
31+
32+
.country:hover {
33+
opacity: 0.8;
34+
stroke: #222;
35+
stroke-width: 1.2px;
36+
}
37+
38+
.country-info-box {
39+
margin-top: 2.4rem;
40+
padding: 2rem 2.4rem;
41+
font-size: 1.8rem;
42+
line-height: 1.6;
43+
background-color: #fff;
44+
border-radius: 11px;
45+
box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.06);
46+
}
47+
48+
.map-tooltip {
49+
position: absolute;
50+
padding: 0.8rem 1.2rem;
51+
background-color: rgba(33, 37, 41, 0.92);
52+
color: #fff;
53+
font-size: 1.4rem;
54+
border-radius: 6px;
55+
pointer-events: none;
56+
opacity: 0;
57+
}
58+
59+
/* Radar Chart Styles */
60+
61+
.radar-header {
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
gap: 2.4rem;
66+
margin-bottom: 1.6rem;
67+
}
68+
69+
.radar-title {
70+
font-size: 2.4rem;
71+
font-weight: 600;
72+
color: #333;
73+
margin-bottom: 0.6rem;
74+
}
75+
76+
.radar-subtitle {
77+
font-size: 1.4rem;
78+
line-height: 1.5;
79+
color: #666;
80+
}
81+
82+
.radar-year-control {
83+
display: flex;
84+
align-items: center;
85+
gap: 0.8rem;
86+
font-size: 1.6rem;
87+
}
88+
89+
.radar-year-control select {
90+
font-size: 1.6rem;
91+
padding: 0.4rem 0.8rem;
92+
}
93+
94+
#radar-chart {
95+
width: 100%;
96+
display: flex;
97+
justify-content: center;
98+
align-items: center;
99+
}
100+
101+
.radar-svg {
102+
width: 100%;
103+
max-width: 60rem;
104+
height: auto;
105+
}
106+
107+
.radar-grid {
108+
fill: none;
109+
stroke: #dee2e6;
110+
stroke-width: 1px;
111+
}
112+
113+
.radar-axis {
114+
stroke: #adb5bd;
115+
stroke-width: 1px;
116+
}
117+
118+
.radar-axis-label {
119+
font-size: 1.3rem;
120+
fill: #333;
121+
}
122+
123+
.radar-level-label {
124+
font-size: 1.1rem;
125+
fill: #868e96;
126+
}
127+
128+
.radar-area {
129+
fill: rgba(11, 114, 133, 0.22);
130+
stroke: #0b7285;
131+
stroke-width: 2.5px;
132+
}
133+
134+
.radar-dot {
135+
fill: #0b7285;
136+
stroke: #fff;
137+
stroke-width: 1.5px;
138+
}
139+
140+
.radar-score-label {
141+
font-size: 1.2rem;
142+
fill: #333;
143+
font-weight: 500;
144+
}
145+
146+
.radar-empty {
147+
font-size: 1.8rem;
148+
color: #666;
149+
padding: 2rem 0;
150+
}
151+
152+
.radar-year-control {
153+
min-width: 26rem;
154+
display: flex;
155+
flex-direction: column;
156+
gap: 0.8rem;
157+
}
158+
159+
.radar-year-top {
160+
display: flex;
161+
justify-content: space-between;
162+
align-items: center;
163+
gap: 1.2rem;
164+
font-size: 1.6rem;
165+
color: #333;
166+
}
167+
168+
.radar-play-button {
169+
border: none;
170+
background-color: #0b7285;
171+
color: #fff;
172+
padding: 0.6rem 1.2rem;
173+
border-radius: 999px;
174+
font-size: 1.4rem;
175+
cursor: pointer;
176+
}
177+
178+
.radar-play-button:hover {
179+
background-color: #095c6b;
180+
}
181+
182+
.radar-year-slider {
183+
width: 100%;
184+
cursor: pointer;
185+
}
186+
187+
.radar-year-scale {
188+
display: flex;
189+
justify-content: space-between;
190+
font-size: 1.2rem;
191+
color: #777;
192+
}
193+
194+
.logo { height: 7.4rem; width: auto; }
195+
196+
.viz-box {
197+
width: 100%;
198+
min-height: 42rem;
199+
background: #f3f8fb;
200+
border: 1px solid #d7e6ee;
201+
border-radius: 12px;
202+
padding: 1.6rem;
203+
box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.04);
204+
}
205+
206+
.viz-small {
207+
width: 100%;
208+
min-height: 18rem;
209+
background: #f3f8fb;
210+
border: 1px solid #d7e6ee;
211+
border-radius: 12px;
212+
padding: 1.4rem;
213+
box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.04);
214+
}
215+
216+
.viz-controls,
217+
.control-row {
218+
display: flex;
219+
flex-wrap: wrap;
220+
gap: 1.2rem;
221+
align-items: center;
222+
margin-bottom: 1.6rem;
223+
}
224+
225+
.viz-controls label,
226+
.control-row label {
227+
font-size: 1.4rem;
228+
font-weight: 500;
229+
}
230+
231+
.viz-controls select,
232+
.viz-controls input,
233+
.control-row select,
234+
.control-row input {
235+
font: inherit;
236+
padding: 0.8rem 1.2rem;
237+
border-radius: 8px;
238+
border: 1px solid #d1d5db;
239+
background: #fff;
240+
}
241+
242+
.viz-note {
243+
font-size: 1.35rem;
244+
color: #555;
245+
margin-top: 1rem;
246+
line-height: 1.7;
247+
}
248+
249+
.insight-grid {
250+
display: grid;
251+
grid-template-columns: repeat(2, 1fr);
252+
gap: 1.6rem;
253+
margin-top: 2.4rem;
254+
}
255+
256+
.insight-title {
257+
font-size: 1.8rem;
258+
font-weight: 600;
259+
color: #333;
260+
margin-bottom: 1.2rem;
261+
}
262+
263+
.panel-copy,
264+
.tooltip-box,
265+
.filter-panel {
266+
font-size: 1.5rem;
267+
line-height: 1.65;
268+
color: #333;
269+
}
270+
271+
.section-time,
272+
.section-feature-viz {
273+
padding: 9.6rem 0 3.2rem 0;
274+
}
275+
276+
.map-narrative { margin-top: 2.4rem; }
277+
278+
.map-legend-note {
279+
max-width: 90rem;
280+
margin: 1.6rem auto 0 auto;
281+
font-size: 1.4rem;
282+
line-height: 1.6;
283+
color: #666;
284+
}
285+
286+
.feature-card {
287+
background: #f4f8f9;
288+
border-radius: 16px;
289+
padding: 2.4rem;
290+
box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.06);
291+
border: 1px solid #dbe8ec;
292+
}
293+
294+
.feature-grid {
295+
display: grid;
296+
grid-template-columns: 1.3fr 0.9fr;
297+
gap: 2.4rem;
298+
align-items: start;
299+
}
300+
301+
.feature-text p {
302+
font-size: 1.7rem;
303+
line-height: 1.75;
304+
margin-bottom: 1.8rem;
305+
color: #4a4a4a;
306+
}
307+
308+
.feature-bullets {
309+
list-style: none;
310+
display: flex;
311+
flex-direction: column;
312+
gap: 1rem;
313+
margin-top: 1.6rem;
314+
}
315+
316+
.feature-bullets li {
317+
font-size: 1.5rem;
318+
line-height: 1.6;
319+
color: #444;
320+
padding-left: 1.6rem;
321+
position: relative;
322+
}
323+
324+
.feature-bullets li::before {
325+
content: "•";
326+
position: absolute;
327+
left: 0;
328+
color: #0b7285;
329+
font-weight: 700;
330+
}
331+
332+
.callout-box {
333+
background: linear-gradient(180deg, #f7fbfc 0%, #edf7f8 100%);
334+
border: 1px solid #d5ecef;
335+
border-radius: 14px;
336+
padding: 2rem;
337+
}
338+
339+
.callout-box h3 {
340+
font-size: 2rem;
341+
margin-bottom: 1.2rem;
342+
color: #284b63;
343+
}
344+
345+
.callout-box p {
346+
font-size: 1.5rem;
347+
line-height: 1.7;
348+
margin-bottom: 1rem;
349+
}
350+
351+
.section-change { padding: 3.2rem 0 9.6rem 0; }
352+
353+
@media (max-width: 59em) {
354+
.insight-grid,
355+
.feature-grid {
356+
grid-template-columns: 1fr;
357+
}
358+
}

0 commit comments

Comments
 (0)