Update style.css

style.css

@@ -69,118 +69,93 @@ h4 {
 }
 
 /* 圖片容器樣式 */
-.figure-container {
-    text-align: center;
-    margin: 20px 0;
-    padding: 0;
-}
-
-.figure-container img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 15px auto;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
-
-.figure-container figcaption {
-    margin-top: 10px;
-    font-size: 0.9rem;
-    color: #555;
-    line-height: 1.5;
-    text-align: left;
-    padding: 10px;
-    background-color: #f8f9fa;
-    border-radius: 4px;
-}
+.figure-container { text-align: center; margin: 20px 0; padding: 0; }
+.figure-container img { max-width: 100%; height: auto; display: block; margin: 15px auto; border: 1px solid #ccc; border-radius: 4px; }
+.figure-container figcaption { margin-top: 10px; font-size: 0.9rem; color: #555; line-height: 1.5; text-align: left; padding: 10px; background-color: #f8f9fa; border-radius: 4px; }
 
 /* 表格樣式 */
 .table-container { overflow-x: auto; }
-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-}
-th, td {
-    padding: 12px 15px;
-    text-align: left;
-    border: 1px solid #ddd;
-}
+table { width: 100%; border-collapse: collapse; margin-top: 20px; }
+th, td { padding: 12px 15px; text-align: left; border: 1px solid #ddd; }
 thead { background-color: #00796b; color: #fff; }
 tbody tr:nth-of-type(even) { background-color: #f8f9fa; }
-td.category {
-    background-color: #e0f7fa;
-    font-weight: bold;
-    color: #004d40;
-    vertical-align: middle;
-}
+td.category { background-color: #e0f7fa; font-weight: bold; color: #004d40; vertical-align: middle; }
 td i { color: #555; font-size: 0.9em; }
 
 /* 解譯方法 */
-.interpretation-methods {
+.interpretation-methods { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 20px; }
+@media (min-width: 768px) { .interpretation-methods { grid-template-columns: 1fr 1fr; } }
+.interp-item { padding: 20px; border-radius: 8px; background-color: #f8f9fa; border: 1px solid #e9ecef; }
+.interp-item h3 { text-align: left; margin-top: 0; }
+
+/* 約束層級 */
+.constraints-levels { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
+.level-item { padding: 15px; border-left: 5px solid; border-radius: 5px; }
+.level-item:nth-of-type(1) { border-color: #ae2012; background-color: #fff1f0; }
+.level-item:nth-of-type(2) { border-color: #ee9b00; background-color: #fff9eb; }
+.level-item:nth-of-type(3) { border-color: #005f73; background-color: #e0f7fa; }
+
+/* 綜合範例 */
+.case-study { background-color: #495057; color: #f8f9fa; border-radius: 8px; border: 3px solid #94d2bd; }
+.case-study h2 { color: #e9ecef; }
+.case-study-steps { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 20px; }
+@media (min-width: 768px) { .case-study-steps { grid-template-columns: 1fr 1fr; } }
+.step { background-color: #343a40; padding: 20px; border-radius: 5px; }
+.step h3 { color: #94d2bd; }
+
+/* --- 新增樣式: 擴充後的工程應用 --- */
+.app-grid-expanded {
     display: grid;
-    grid-template-columns: 1fr;
-    gap: 30px;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 調整最小寬度以容納更多內容 */
+    gap: 25px; /* 增加間距 */
     margin-top: 20px;
 }
-@media (min-width: 768px) { .interpretation-methods { grid-template-columns: 1fr 1fr; } }
-.interp-item {
-    padding: 20px;
-    border-radius: 8px;
-    background-color: #f8f9fa;
-    border: 1px solid #e9ecef;
-}
-.interp-item h3 { text-align: left; margin-top: 0; }
 
-/* --- 新增樣式: 約束層級 --- */
-.constraints-levels {
+.app-card {
+    background: #fff;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
     display: flex;
     flex-direction: column;
-    gap: 15px;
-    margin-top: 20px;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
-.level-item {
-    padding: 15px;
-    border-left: 5px solid;
-    border-radius: 5px;
+
+.app-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
 }
-.level-item:nth-of-type(1) { border-color: #ae2012; background-color: #fff1f0; } /* 紅色系 */
-.level-item:nth-of-type(2) { border-color: #ee9b00; background-color: #fff9eb; } /* 黃色系 */
-.level-item:nth-of-type(3) { border-color: #005f73; background-color: #e0f7fa; } /* 藍色系 */
 
-/* --- 新增樣式: 綜合範例 --- */
-.case-study {
-    background-color: #495057;
-    color: #f8f9fa;
-    border-radius: 8px;
-    border: 3px solid #94d2bd;
+.app-card-header {
+    background-color: #00796b;
+    color: white;
+    padding: 15px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 }
-.case-study h2 { color: #e9ecef; }
-.case-study-steps {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 30px;
-    margin-top: 20px;
+
+.app-card-header h3 {
+    margin: 0;
+    color: white;
+    font-size: 1.4rem;
 }
-@media (min-width: 768px) { .case-study-steps { grid-template-columns: 1fr 1fr; } }
-.step {
-    background-color: #343a40;
+
+.app-card-body {
     padding: 20px;
-    border-radius: 5px;
+    flex-grow: 1;
 }
-.step h3 { color: #94d2bd; }
 
-/* 工程應用 */
-.app-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
+.app-card-body p {
+    margin: 0 0 10px 0;
 }
-.app-item {
-    background: #f8f9fa;
-    padding: 15px;
-    border-left: 5px solid #0a9396;
+
+.app-card-body ul {
+    margin-top: 15px;
+    padding-left: 20px;
+}
+
+.app-card-body li {
+    margin-bottom: 8px;
 }
 
 /* 頁腳 */