style: 仿朋友圈居中布局并简化整体风格

Co-authored-by: aider (deepseek/deepseek-chat) <aider@aider.chat>

static/css/style.css

@@ -14,102 +14,60 @@ html {
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    background-color: #f8fafc;
-    color: #1a202c;
+    background-color: #f5f5f5;
+    color: #333;
     line-height: 1.6;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-}
-
-/* ==================== 导航栏 ==================== */
-.navbar {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    background: #ffffff;
-    border-bottom: 2px solid #000;
-    padding: 0.75rem 1.5rem;
-}
-
-.nav-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
     align-items: center;
-    justify-content: space-between;
-}
-
-.nav-brand {
-    font-size: 1.25rem;
-    font-weight: 700;
-    color: #2d3748;
-    text-decoration: none;
-}
-
-.nav-links {
-    list-style: none;
-    display: flex;
-    gap: 1.5rem;
-}
-
-.nav-links a {
-    text-decoration: none;
-    color: #4a5568;
-    font-weight: 500;
-    transition: color 0.2s;
 }
 
-.nav-links a:hover {
-    color: #3182ce;
+/* ==================== 隐藏页眉页脚 ==================== */
+.navbar,
+.footer {
+    display: none;
 }
 
 /* ==================== 主内容区 ==================== */
 .main-content {
     flex: 1;
-    max-width: 1200px;
-    margin: 2rem auto;
-    padding: 0 1.5rem;
+    max-width: 600px;
     width: 100%;
+    margin: 2rem auto;
+    padding: 0 1rem;
 }
 
 /* ==================== 瀑布流布局 ==================== */
 .waterfall {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: 1fr;
     gap: 1.5rem;
 }
 
 /* ==================== 卡片 ==================== */
 .card {
     background: #ffffff;
-    border: 2px solid #000;
     overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
     display: flex;
     flex-direction: column;
 }
 
-.card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-}
-
 .card-image {
     width: 100%;
-    height: 180px;
+    height: auto;
+    max-height: 400px;
     overflow: hidden;
 }
 
 .card-image img {
     width: 100%;
-    height: 100%;
-    object-fit: cover;
+    height: auto;
     display: block;
 }
 
 .card-body {
-    padding: 1.25rem;
+    padding: 1rem 0;
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -123,24 +81,24 @@ body {
 }
 
 .card-title a {
-    color: #2d3748;
+    color: #333;
     text-decoration: none;
     transition: color 0.2s;
 }
 
 .card-title a:hover {
-    color: #3182ce;
+    color: #000;
 }
 
 .card-date {
     display: block;
     font-size: 0.875rem;
-    color: #a0aec0;
+    color: #999;
     margin-bottom: 0.75rem;
 }
 
 .card-summary {
-    color: #718096;
+    color: #666;
     font-size: 0.9375rem;
     line-height: 1.6;
     flex: 1;
@@ -148,7 +106,7 @@ body {
 }
 
 .card-link {
-    color: #3182ce;
+    color: #333;
     text-decoration: none;
     font-weight: 500;
     font-size: 0.9375rem;
@@ -157,20 +115,19 @@ body {
 }
 
 .card-link:hover {
-    color: #2b6cb0;
+    color: #000;
 }
 
 /* ==================== 空状态 ==================== */
 .empty-state {
-    grid-column: 1 / -1;
     text-align: center;
     padding: 4rem 1rem;
-    color: #a0aec0;
+    color: #999;
     font-size: 1.125rem;
 }
 
 .empty-state a {
-    color: #3182ce;
+    color: #333;
     text-decoration: none;
 }
 
@@ -200,13 +157,13 @@ body {
 
 .form-group label {
     font-weight: 600;
-    color: #2d3748;
+    color: #333;
 }
 
 .form-group input[type="text"],
 .form-group input[type="file"] {
     padding: 0.625rem 0.75rem;
-    border: 2px solid #000;
+    border: 1px solid #ccc;
     font-size: 1rem;
     transition: border-color 0.2s;
 }
@@ -214,15 +171,15 @@ body {
 .form-group input[type="text"]:focus,
 .form-group input[type="file"]:focus {
     outline: none;
-    border-color: #3182ce;
-    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
+    border-color: #333;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
 }
 
 /* ==================== 按钮 ==================== */
 .btn {
     display: inline-block;
     padding: 0.625rem 1.25rem;
-    border: 2px solid #000;
+    border: 1px solid #333;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
@@ -234,12 +191,12 @@ body {
 }
 
 .btn-primary {
-    background-color: #3182ce;
+    background-color: #333;
     color: #ffffff;
 }
 
 .btn-primary:hover {
-    background-color: #2b6cb0;
+    background-color: #000;
 }
 
 .btn-danger {
@@ -253,7 +210,7 @@ body {
 
 /* ==================== 管理页面表格 ==================== */
 .admin-container {
-    max-width: 900px;
+    max-width: 600px;
     margin: 0 auto;
 }
 
@@ -267,28 +224,26 @@ body {
     width: 100%;
     border-collapse: collapse;
     background: #ffffff;
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .admin-table th,
 .admin-table td {
     padding: 0.75rem 1rem;
     text-align: left;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #eee;
 }
 
 .admin-table th {
-    background-color: #f7fafc;
+    background-color: #fafafa;
     font-weight: 600;
-    color: #4a5568;
+    color: #333;
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }
 
 .admin-table td a {
-    color: #3182ce;
+    color: #333;
     text-decoration: none;
 }
 
@@ -296,39 +251,17 @@ body {
     text-decoration: underline;
 }
 
-/* ==================== 页脚 ==================== */
-.footer {
-    text-align: center;
-    padding: 1.5rem;
-    color: #a0aec0;
-    font-size: 0.875rem;
-    border-top: 2px solid #000;
-    margin-top: auto;
-}
-
 /* ==================== 响应式 ==================== */
 @media (max-width: 768px) {
-    .waterfall {
-        grid-template-columns: 1fr;
-    }
-
-    .navbar {
-        padding: 0.5rem 1rem;
-    }
-
-    .nav-links {
-        gap: 1rem;
-    }
-
     .main-content {
-        padding: 0 1rem;
+        padding: 0 0.5rem;
     }
 }
 
 /* ==================== 代码高亮（Pygments 默认主题） ==================== */
 .codehilite {
-    background: #f7fafc;
-    border: 2px solid #000;
+    background: #fafafa;
+    border: 1px solid #eee;
     padding: 1rem;
     overflow-x: auto;
     margin: 1rem 0;