优化ui布局 and 为移动端提供递进式优化

assets/style.css

@@ -375,7 +375,7 @@ body.loaded .layout {
 .content {
     flex: 1;
     margin-left: 240px;
-    padding: 2rem 0;
+    padding: 2rem 1.5rem; 
     background-color: var(--bg-color);
     position: relative;
     height: 100vh; /* 固定高度 */
@@ -500,6 +500,8 @@ body.loaded .layout {
     flex-direction: column;
     align-items: center;
     padding-top: 2rem;
+    padding-left: 0.5rem; 
+    padding-right: 0.5rem; 
 }
 
 .page.active {
@@ -580,8 +582,8 @@ body.loaded .layout {
     background: linear-gradient(145deg, var(--card-bg-gradient-1), var(--card-bg-gradient-2));
     border-radius: 16px;
     padding: 2rem;
-    margin: 0 auto 2.5rem auto;
-    width: 100%;
+    margin: 0 1rem 2.5rem 1rem;
+    width: calc(100% - 2rem);
     max-width: 1100px;
     position: relative;
     z-index: 1;
@@ -666,6 +668,10 @@ body.loaded .layout {
     font-weight: 500;
     letter-spacing: 0.3px;
     transition: color 0.3s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
 }
 
 .site-card p {
@@ -674,6 +680,12 @@ body.loaded .layout {
     margin: 0;
     line-height: 1.4;
     transition: color 0.3s ease;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    max-height: 2.8em;
+    word-break: break-word;
 }
 
 /* 添加编辑按钮 */
@@ -900,6 +912,9 @@ body.loaded .layout {
     .category {
         max-width: 900px;
         margin-bottom: 2rem;
+        margin-left: 1.5rem; /* 增加左边距 */
+        margin-right: 1.5rem; /* 增加右边距 */
+        width: calc(100% - 3rem); /* 适应新的左右边距 */
     }
 }
 
@@ -989,12 +1004,23 @@ body.loaded .layout {
 
     /* 分类样式优化 */
     .category {
-        margin: 0 1rem 1.5rem;
+        margin: 0 1.5rem 1.5rem 1.5rem;
         padding: 1.5rem;
+        width: calc(100% - 3rem);
     }
 
     .sites-grid {
-        gap: 1rem;
+        gap: 0.8rem;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    }
+    
+    .site-card {
+        padding: 1rem 0.8rem;
+    }
+    
+    .site-card i {
+        font-size: 1.5rem;
+        margin-bottom: 0.8rem;
     }
     
     /* 在移动端的主题切换按钮 */
@@ -1011,8 +1037,9 @@ body.loaded .layout {
     }
 
     .category {
-        margin: 0 1rem 1.2rem 1rem;
+        margin: 0 1.2rem 1.2rem 1.2rem;
         padding: 1.2rem;
+        width: calc(100% - 2.4rem);
     }
 
     .search-container {
@@ -1022,6 +1049,64 @@ body.loaded .layout {
     .page {
         padding-top: 1rem;
     }
+    
+    .sites-grid {
+        gap: 0.6rem;
+        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    }
+    
+    .site-card {
+        padding: 0.8rem 0.6rem;
+    }
+    
+    .site-card i {
+        font-size: 1.3rem;
+        margin-bottom: 0.6rem;
+    }
+
+    .site-card h3 {
+        font-size: 0.9rem;
+        margin-bottom: 0.3rem;
+    }
+
+    .site-card p {
+        font-size: 0.8rem;
+        -webkit-line-clamp: 2;
+        max-height: 2.4em;
+    }
+}
+
+@media (max-width: 400px) {
+    .category {
+        padding: 1rem;
+        margin: 0 0.8rem 1rem 0.8rem;
+        width: calc(100% - 1.6rem);
+    }
+    
+    .sites-grid {
+        gap: 0.5rem;
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    }
+    
+    .site-card {
+        padding: 0.7rem 0.5rem;
+    }
+    
+    .site-card i {
+        font-size: 1.2rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .site-card h3 {
+        font-size: 0.85rem;
+        margin-bottom: 0.25rem;
+    }
+    
+    .site-card p {
+        font-size: 0.75rem;
+        -webkit-line-clamp: 2;
+        max-height: 2.2em;
+    }
 }
 
 /* 动画效果 */
@@ -1055,13 +1140,13 @@ body.loaded .layout {
 
 /* 搜索结果区域 */
 .search-section {
-    width: 100%;
+    width: calc(100% - 2rem);
     max-width: 1100px;
-    margin: 0 auto 2.5rem auto; /* 添加底部间距 */
+    margin: 0 1rem 2.5rem 1rem;
     position: relative;
     z-index: 1;
-    transform: none !important; /* 确保没有变换 */
-    opacity: 1 !important; /* 确保可见 */
+    transform: none !important;
+    opacity: 1 !important;
 }
 
 /* 确保搜索结果中的网格有正确的间距 */