cwadayi commited on
Commit
47a68ac
·
verified ·
1 Parent(s): f524f3e

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +6 -126
style.css CHANGED
@@ -94,24 +94,23 @@ header {
94
  main { padding: 2rem 1rem; max-width: 1000px; margin: 0 auto; }
95
  section {
96
  background: #fff;
97
- margin-bottom: 3.5rem;
98
- padding: 3rem;
99
- border-radius: 20px;
100
  box-shadow: var(--shadow);
101
  opacity: 0;
102
  transform: translateY(30px);
103
- transition: opacity 0.6s ease-out, transform 0.6s ease-out will-change(opacity, transform);
104
  }
105
  section.visible { opacity: 1; transform: translateY(0); }
106
  h2 {
107
  color: var(--primary-color);
108
  text-align: center;
109
- font-size: 2.4rem;
110
  font-weight: 700;
111
  margin-bottom: 2.5rem;
112
  position: relative;
113
  padding-bottom: 1rem;
114
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
115
  }
116
  h2::after {
117
  content: '';
@@ -124,10 +123,6 @@ h2::after {
124
  background-color: var(--highlight-color);
125
  border-radius: 2px;
126
  }
127
- h3 {
128
- font-size: 1.6rem;
129
- margin-bottom: 1.2rem;
130
- }
131
  p, li { font-size: 1.1rem; }
132
 
133
  /* --- Specific Section Styles --- */
@@ -196,11 +191,10 @@ footer {
196
  .figure-container img{max-width:100%;height:auto;display:block;margin:15px auto;border:1px solid #ccc;border-radius:8px;transition:transform .3s ease,box-shadow .3s ease;}
197
  .figure-container img:hover{transform:scale(1.03);box-shadow:0 5px 20px rgba(0,0,0,.15);}
198
  .figure-container figcaption{margin-top:10px;font-size:.9rem;color:#555;line-height:1.5;text-align:left;padding:10px;background-color:#f8f9fa;border-radius:4px;}
199
- table{width:100%;border-collapse:separate;border-spacing:0;margin-top:20px;box-shadow:var(--shadow);}
200
  th,td{padding:15px;text-align:left;border:1px solid #dee2e6;}
201
  thead{background-color:#00796b;color:#fff;}
202
  tbody tr:nth-of-type(even){background-color:#f8f9fa;}
203
- tbody tr:hover {background-color: #e9f7f9; transition: background-color 0.3s;}
204
  td.category{background-color:#e0f7fa;font-weight:700;color:#004d40;vertical-align:middle;}
205
  .interpretation-methods,.case-study-steps{display:grid;grid-template-columns:1fr;gap:30px;margin-top:20px;}
206
  @media (min-width:768px){.interpretation-methods,.case-study-steps{grid-template-columns:1fr 1fr;}}
@@ -219,117 +213,3 @@ td.category{background-color:#e0f7fa;font-weight:700;color:#004d40;vertical-alig
219
  .example-link:hover{background-color:var(--accent-color);transform:scale(1.05);}
220
  .app-card-header h3{margin:0;color:white;font-size:1.4rem;}
221
  .app-card-body{padding:25px;flex-grow:1;display:flex;flex-direction:column;}
222
-
223
- /* 漢堡選單 */
224
- .nav-toggle {
225
- display: none;
226
- background: none;
227
- border: none;
228
- font-size: 1.5rem;
229
- color: var(--primary-color);
230
- cursor: pointer;
231
- }
232
- @media (max-width: 768px) {
233
- .nav-toggle {
234
- display: block;
235
- }
236
- .nav-menu {
237
- display: none;
238
- flex-direction: column;
239
- position: absolute;
240
- top: 60px;
241
- left: 0;
242
- width: 100%;
243
- background: white;
244
- padding: 1rem;
245
- box-shadow: var(--shadow);
246
- }
247
- .nav-menu.active {
248
- display: flex;
249
- }
250
- }
251
-
252
- /* 表格響應式 */
253
- @media (max-width: 768px) {
254
- .table-container {
255
- overflow-x: auto;
256
- }
257
- table {
258
- min-width: 600px;
259
- }
260
- table, thead, tbody, th, td, tr {
261
- display: block;
262
- }
263
- thead {
264
- display: none;
265
- }
266
- tr {
267
- margin-bottom: 1rem;
268
- border: 1px solid var(--border-color);
269
- border-radius: 8px;
270
- padding: 1rem;
271
- }
272
- td {
273
- display: flex;
274
- justify-content: space-between;
275
- padding: 0.5rem;
276
- }
277
- td::before {
278
- content: attr(data-label);
279
- font-weight: bold;
280
- color: var(--primary-color);
281
- width: 40%;
282
- }
283
- }
284
-
285
- /* 可展開內容 */
286
- .toggle-header {
287
- cursor: pointer;
288
- position: relative;
289
- padding-right: 30px;
290
- }
291
- .toggle-header::after {
292
- content: '▼';
293
- position: absolute;
294
- right: 10px;
295
- transition: transform 0.3s;
296
- }
297
- .toggle-header.active::after {
298
- transform: rotate(180deg);
299
- }
300
- .toggle-content {
301
- display: none;
302
- }
303
- .toggle-content.active {
304
- display: block;
305
- }
306
-
307
- /* 工具提示 */
308
- .tooltip {
309
- position: relative;
310
- border-bottom: 1px dotted var(--primary-color);
311
- cursor: help;
312
- }
313
- .tooltip:hover::after {
314
- content: attr(data-tooltip);
315
- position: absolute;
316
- bottom: 100%;
317
- left: 50%;
318
- transform: translateX(-50%);
319
- background: var(--bg-dark);
320
- color: white;
321
- padding: 8px 12px;
322
- border-radius: 6px;
323
- font-size: 0.9rem;
324
- width: max-content;
325
- max-width: 200px;
326
- z-index: 10;
327
- }
328
-
329
- /* 深色模式(基於系統偏好) */
330
- @media (prefers-color-scheme: dark) {
331
- :root {
332
- --bg-light: #2d3436;
333
- --text-primary: #dfe6e9;
334
- }
335
- }
 
94
  main { padding: 2rem 1rem; max-width: 1000px; margin: 0 auto; }
95
  section {
96
  background: #fff;
97
+ margin-bottom: 2.5rem;
98
+ padding: 2rem 2.5rem;
99
+ border-radius: 16px;
100
  box-shadow: var(--shadow);
101
  opacity: 0;
102
  transform: translateY(30px);
103
+ transition: opacity 0.6s ease-out, transform 0.6s ease-out;
104
  }
105
  section.visible { opacity: 1; transform: translateY(0); }
106
  h2 {
107
  color: var(--primary-color);
108
  text-align: center;
109
+ font-size: 2.2rem;
110
  font-weight: 700;
111
  margin-bottom: 2.5rem;
112
  position: relative;
113
  padding-bottom: 1rem;
 
114
  }
115
  h2::after {
116
  content: '';
 
123
  background-color: var(--highlight-color);
124
  border-radius: 2px;
125
  }
 
 
 
 
126
  p, li { font-size: 1.1rem; }
127
 
128
  /* --- Specific Section Styles --- */
 
191
  .figure-container img{max-width:100%;height:auto;display:block;margin:15px auto;border:1px solid #ccc;border-radius:8px;transition:transform .3s ease,box-shadow .3s ease;}
192
  .figure-container img:hover{transform:scale(1.03);box-shadow:0 5px 20px rgba(0,0,0,.15);}
193
  .figure-container figcaption{margin-top:10px;font-size:.9rem;color:#555;line-height:1.5;text-align:left;padding:10px;background-color:#f8f9fa;border-radius:4px;}
194
+ table{width:100%;border-collapse:collapse;margin-top:20px;}
195
  th,td{padding:15px;text-align:left;border:1px solid #dee2e6;}
196
  thead{background-color:#00796b;color:#fff;}
197
  tbody tr:nth-of-type(even){background-color:#f8f9fa;}
 
198
  td.category{background-color:#e0f7fa;font-weight:700;color:#004d40;vertical-align:middle;}
199
  .interpretation-methods,.case-study-steps{display:grid;grid-template-columns:1fr;gap:30px;margin-top:20px;}
200
  @media (min-width:768px){.interpretation-methods,.case-study-steps{grid-template-columns:1fr 1fr;}}
 
213
  .example-link:hover{background-color:var(--accent-color);transform:scale(1.05);}
214
  .app-card-header h3{margin:0;color:white;font-size:1.4rem;}
215
  .app-card-body{padding:25px;flex-grow:1;display:flex;flex-direction:column;}