/* 
Theme Name: TechBlog 科技博客 
Theme URI: https://example.com/  
Author: 自定义 
Description: 自适应双栏科技风SEO友好博客主题 
Version: 1.0 
License: GNU General Public License v2 or later 
Tags: 科技, 自适应, SEO, 双栏, 博客 
*/ 
/* 全局重置 */ 
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
} 
:root { 
  --bg-primary: #0f172a; 
  --bg-secondary: #1e293b; 
  --accent: #3b82f6; 
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); 
  --text-primary: #f1f5f9; 
  --text-secondary: #94a3b8; 
  --border-color: #334155; 
  --shadow: 0 4px 20px rgba(59, 130, 246, 0.15); 
  --shadow-hover: 0 8px 30px rgba(59, 130, 246, 0.25); 
} 
body { 
  background-color: var(--bg-primary); 
  color: var(--text-primary); 
  line-height: 1.7; 
  overflow-x: hidden; 
} 
a { 
  color: var(--accent); 
  text-decoration: none; 
  transition: all 0.3s ease; 
} 
a:hover { 
  color: #8b5cf6; 
} 
/* 布局 */ 
.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
} 
.grid-layout { 
  display: grid; 
  grid-template-columns: 1fr 320px; 
  gap: 30px; 
  margin: 30px 0; 
} 
/* 导航栏 */ 
.site-header { 
  background: rgba(15, 23, 42, 0.9); 
  backdrop-filter: blur(10px); 
  border-bottom: 1px solid var(--border-color); 
  position: sticky; 
  top: 0; 
  z-index: 999; 
  padding: 15px 0; 
} 
.header-inner { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
} 
.site-title { 
  font-size: 22px; 
  font-weight: 700; 
  background: var(--accent-gradient); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
.nav-menu { 
  display: flex; 
  gap: 25px; 
  list-style: none; 
} 
.nav-menu a { 
  color: var(--text-primary); 
  font-weight: 500; 
} 
.nav-menu a:hover { 
  color: var(--accent); 
} 
/* 文章卡片 */ 
.post-card { 
  background: var(--bg-secondary); 
  border: 1px solid var(--border-color); 
  border-radius: 12px; 
  padding: 25px; 
  margin-bottom: 25px; 
  box-shadow: var(--shadow); 
  transition: all 0.3s ease; 
} 
.post-card:hover { 
  transform: translateY(-3px); 
  box-shadow: var(--shadow-hover); 
} 
.post-thumbnail img { 
  width: 100%; 
  height: 220px; 
  object-fit: cover; 
  border-radius: 8px; 
  margin-bottom: 15px; 
} 
.post-title { 
  font-size: 22px; 
  font-weight: 600; 
  margin-bottom: 10px; 
} 
.post-meta { 
  color: var(--text-secondary); 
  font-size: 14px; 
  margin-bottom: 15px; 
  display: flex; 
  gap: 15px; 
} 
.post-excerpt { 
  color: var(--text-secondary); 
  margin-bottom: 15px; 
} 
.read-more { 
  display: inline-block; 
  padding: 8px 20px; 
  background: var(--accent-gradient); 
  border-radius: 6px; 
  color: #fff; 
  font-weight: 500; 
} 
/* 侧边栏 */ 
.sidebar-widget { 
  background: var(--bg-secondary); 
  border: 1px solid var(--border-color); 
  border-radius: 12px; 
  padding: 20px; 
  margin-bottom: 25px; 
  box-shadow: var(--shadow); 
} 
.widget-title { 
  font-size: 18px; 
  font-weight: 600; 
  margin-bottom: 15px; 
  padding-bottom: 8px; 
  border-bottom: 1px solid var(--border-color); 
} 
.widget-list { 
  list-style: none; 
} 
.widget-list li { 
  padding: 8px 0; 
  border-bottom: 1px dashed var(--border-color); 
} 
.widget-list li:last-child { 
  border: none; 
} 
/* 文章页 */ 
.single-post { 
  background: var(--bg-secondary); 
  border: 1px solid var(--border-color); 
  border-radius: 12px; 
  padding: 30px; 
  box-shadow: var(--shadow); 
} 
.single-post h1 { 
  font-size: 28px; 
  margin-bottom: 15px; 
} 
.single-content { 
  margin: 25px 0; 
  color: var(--text-secondary); 
} 
.single-content h2, .single-content h3 { 
  color: var(--text-primary); 
  margin: 20px 0 10px; 
} 
.single-content p { 
  margin-bottom: 15px; 
} 
.single-content img { 
  max-width: 100%; 
  border-radius: 8px; 
  margin: 15px 0; 
} 
/* 上下篇导航 */ 
.post-navigation { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 20px; 
  margin: 30px 0; 
} 
.nav-item { 
  background: var(--bg-secondary); 
  border: 1px solid var(--border-color); 
  border-radius: 12px; 
  padding: 20px; 
} 
/* 相关文章 */ 
.related-posts { 
  margin: 30px 0; 
} 
.related-title { 
  font-size: 22px; 
  font-weight: 600; 
  margin-bottom: 20px; 
} 
.related-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
  gap: 20px; 
} 
.related-card { 
  background: var(--bg-secondary); 
  border: 1px solid var(--border-color); 
  border-radius: 8px; 
  padding: 15px; 
} 
/* 分页 */ 
.pagination { 
  display: flex; 
  gap: 10px; 
  justify-content: center; 
  margin: 30px 0; 
} 
.page-numbers { 
  padding: 8px 15px; 
  background: var(--bg-secondary); 
  border: 1px solid var(--border-color); 
  border-radius: 6px; 
} 
.page-numbers.current { 
  background: var(--accent-gradient); 
  border-color: var(--accent); 
} 
/* 底部 */ 
.site-footer { 
  background: var(--bg-secondary); 
  border-top: 1px solid var(--border-color); 
  padding: 25px 0; 
  text-align: center; 
  color: var(--text-secondary); 
  margin-top: 50px; 
} 
/* 移动端适配 */ 
@media (max-width: 768px) { 
  .grid-layout { 
    grid-template-columns: 1fr; 
  } 
  .nav-menu { 
    gap: 15px; 
    font-size: 14px; 
  } 
  .post-navigation { 
    grid-template-columns: 1fr; 
  } 
  .related-grid { 
    grid-template-columns: 1fr 1fr; 
  } 
  .single-post { 
    padding: 20px; 
  } 
}