/* 
Theme Name: 左栏右文SEO博客模板 
Theme URI: https://你的站点地址 
Author: 你的名称 
Description: 侧边栏左置，主内容右置，原生SEO优化，零报错 
Version: 1.0 
License: GPL v2 
Tags: 左侧边栏, 博客, SEO, 响应式 
Text Domain: ls-blog 
*/ 
 
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
:root { 
    --ls-bg: #f5f7fa; 
    --ls-card: #fff; 
    --ls-text: #2c3e50; 
    --ls-gray: #7f8c8d; 
    --ls-primary: #3498db; 
    --ls-border: #e3e6ea; 
    --ls-shadow: 0 2px 8px rgba(0,0,0,0.05); 
    --ls-radius: 8px; 
} 
body { 
    font-family: "PingFang SC", "Microsoft Yahei", sans-serif; 
    background: var(--ls-bg); 
    color: var(--ls-text); 
    line-height: 1.7; 
} 
a { 
    color: var(--ls-primary); 
    text-decoration: none; 
    transition: all 0.2s; 
} 
a:hover { 
    color: #2980b9; 
} 
img { 
    max-width: 100%; 
    height: auto; 
    border-radius: var(--ls-radius); 
} 
 
/* 全局容器 */ 
.ls-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
} 
 
/* 核心布局：代码主内容前置，视觉侧边栏在左 */ 
.ls-content-wrap { 
    display: grid; 
    grid-template-columns: 280px 1fr; /* 视觉上左边侧边栏280px，右边内容自适应 */ 
    gap: 2rem; 
    padding: 2rem 0; 
} 
.ls-main { 
    order: 2; /* 视觉上主内容在右 */ 
} 
.ls-sidebar { 
    order: 1; /* 视觉上侧边栏在左 */ 
    position: sticky; 
    top: 2rem; 
    align-self: flex-start; 
} 
 
/* 侧边栏模块 */ 
.ls-author-card { 
    background: var(--ls-card); 
    border-radius: var(--ls-radius); 
    box-shadow: var(--ls-shadow); 
    padding: 2rem; 
    text-align: center; 
    margin-bottom: 1.5rem; 
    border: 1px solid var(--ls-border); 
} 
.ls-avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    border: 3px solid var(--ls-primary); 
    margin: 0 auto 1rem; 
    overflow: hidden; 
} 
.ls-author-name { 
    font-size: 1.3rem; 
    font-weight: 700; 
    margin-bottom: 0.5rem; 
} 
.ls-author-desc { 
    color: var(--ls-gray); 
    font-size: 0.9rem; 
    margin-bottom: 1rem; 
} 
.ls-social { 
    display: flex; 
    justify-content: center; 
    gap: 0.8rem; 
} 
.ls-social a { 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background: var(--ls-bg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
 
.ls-widget { 
    background: var(--ls-card); 
    border-radius: var(--ls-radius); 
    box-shadow: var(--ls-shadow); 
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
    border: 1px solid var(--ls-border); 
} 
.ls-widget-title { 
    font-size: 1.1rem; 
    margin-bottom: 1rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 2px solid var(--ls-primary); 
    display: inline-block; 
} 
.ls-widget ul { 
    list-style: none; 
} 
.ls-widget ul li { 
    margin-bottom: 0.8rem; 
    padding-bottom: 0.8rem; 
    border-bottom: 1px dashed var(--ls-border); 
} 
 
/* 面包屑 */ 
.ls-breadcrumb { 
    background: var(--ls-card); 
    padding: 0.8rem 1.2rem; 
    border-radius: var(--ls-radius); 
    font-size: 0.9rem; 
    color: var(--ls-gray); 
    border: 1px solid var(--ls-border); 
    margin-bottom: 1.5rem; 
} 
 
/* 文章列表 */ 
.ls-post-list { 
    counter-reset: post-sn; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
} 
.ls-post-item { 
    background: var(--ls-card); 
    border-radius: var(--ls-radius); 
    box-shadow: var(--ls-shadow); 
    padding: 1.5rem; 
    border: 1px solid var(--ls-border); 
    position: relative; 
    padding-left: 3.5rem; 
    counter-increment: post-sn; 
    transition: all 0.3s; 
} 
.ls-post-item::before { 
    content: counter(post-sn); 
    position: absolute; 
    left: 1rem; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 2rem; 
    height: 2rem; 
    border-radius: 50%; 
    background: var(--ls-primary); 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    font-size: 0.9rem; 
} 
.ls-post-item:hover { 
    transform: translateX(5px); 
    border-color: var(--ls-primary); 
} 
.ls-post-title { 
    font-size: 1.2rem; 
    font-weight: 600; 
    margin-bottom: 0.8rem; 
    line-height: 1.5; 
} 
.ls-post-excerpt { 
    color: var(--ls-gray); 
    font-size: 0.95rem; 
    margin-bottom: 1rem; 
    line-height: 1.7; 
} 
.ls-post-meta { 
    font-size: 0.85rem; 
    color: var(--ls-gray); 
    display: flex; 
    gap: 1.5rem; 
    padding-top: 0.8rem; 
    border-top: 1px dashed var(--ls-border); 
} 
.ls-post-meta span:first-child::before { content: '📅 '; } 
.ls-post-meta span:nth-child(2)::before { content: '📂 '; } 
.ls-post-meta span:nth-child(3)::before { content: '👁️ '; } 
 
/* 文章详情页 */ 
.ls-single-card { 
    background: var(--ls-card); 
    border-radius: var(--ls-radius); 
    box-shadow: var(--ls-shadow); 
    padding: 2rem; 
    border: 1px solid var(--ls-border); 
} 
.ls-single-title { 
    font-size: 1.8rem; 
    margin-bottom: 1rem; 
    line-height: 1.4; 
} 
.ls-single-meta { 
    color: var(--ls-gray); 
    margin-bottom: 1.5rem; 
    padding-bottom: 1rem; 
    border-bottom: 1px solid var(--ls-border); 
} 
.ls-single-content { 
    line-height: 1.8; 
} 
.ls-single-content h2, .ls-single-content h3 { 
    margin: 1.5rem 0 1rem 0; 
    font-weight: 600; 
} 
.ls-single-content p { 
    margin-bottom: 1rem; 
} 
.ls-related { 
    margin-top: 2rem; 
    padding-top: 2rem; 
    border-top: 1px solid var(--ls-border); 
} 
.ls-related h3 { 
    font-size: 1.3rem; 
    margin-bottom: 1rem; 
} 
.ls-related-list { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem; 
} 
.ls-related-item { 
    padding: 1rem; 
    background: var(--ls-bg); 
    border-radius: var(--ls-radius); 
} 
 
/* 分页 */ 
.ls-pagination { 
    display: flex; 
    gap: 0.5rem; 
    justify-content: center; 
    margin-top: 1.5rem; 
} 
.ls-pagination a, .ls-pagination span { 
    padding: 0.5rem 1rem; 
    border-radius: 6px; 
    background: var(--ls-card); 
    border: 1px solid var(--ls-border); 
} 
.ls-pagination .current { 
    background: var(--ls-primary); 
    color: #fff; 
    border-color: var(--ls-primary); 
} 
 
/* 页脚 */ 
.ls-footer { 
    background: var(--ls-card); 
    border-top: 1px solid var(--ls-border); 
    padding: 2rem 0; 
    text-align: center; 
    color: var(--ls-gray); 
    font-size: 0.9rem; 
} 
 
/* 移动端适配：侧边栏放到顶部，主内容在下方 */ 
@media (max-width: 992px) { 
    .ls-content-wrap { 
        grid-template-columns: 1fr; 
    } 
    .ls-main, .ls-sidebar { 
        order: unset; 
    } 
    .ls-sidebar { 
        position: static; 
    } 
}