文章列表样式 V2.0：现代图文分离卡片

css样式

/* ==========================================================================
   文章列表样式 V2.0：现代图文分离卡片
   ========================================================================== */

/* 1. 整体卡片基础样式 */
.post-list.two-column-grid article {
    border: none; /* 移除之前的虚线 */
    padding: 0;
    margin-bottom: 0 !important; 

    /* 核心卡片效果 */
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden; /* 确保内容在圆角内 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 柔和阴影 */
    transition: transform 0.3s, box-shadow 0.3s;

    /* 启用 Flex 布局，实现图文并列 */
    display: flex;
    flex-direction: row; 
    min-height: 180px; /* 保证卡片基本高度 */
}

/* 悬停效果 */
.post-list.two-column-grid article:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* 2. 缩略图样式 */
.post-list.two-column-grid article .post-thumbnail {
    flex: 0 0 40%; /* 缩略图占据卡片宽度的 40% */
    height: auto;
    overflow: hidden;
}

.post-list.two-column-grid article .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片不变形填满 */
    display: block;
}

/* 3. 内容区样式 */
.post-list.two-column-grid article .entry-content-wrap {
    flex: 1; /* 内容区占据剩余空间 */
    padding: 15px 20px;
    display: flex; /* 再次启用 Flex，用于内容垂直布局 */
    flex-direction: column;
    justify-content: space-between; /* 底部元数据推到底部 */
}

/* 标题样式 */
.post-list.two-column-grid article .entry-header .entry-title {
    font-size: 1.3em;
    line-height: 1.4;
    margin-bottom: 8px;
}

.post-list.two-column-grid article .entry-header a {
    color: #333;
    transition: color 0.2s;
}

.post-list.two-column-grid article .entry-header a:hover {
    color: #0074e0;
}

/* 摘要样式 */
.post-list.two-column-grid article .entry-summary {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 10px;
    flex-grow: 1; /* 摘要占据可用空间 */
}

/* 4. 元数据 (日期/分类) 样式 */
.post-list.two-column-grid article .entry-footer {
    font-size: 0.8em;
    color: #aaa;
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
    margin-top: 5px;
}

.post-list.two-column-grid article .entry-footer span {
    margin-right: 15px;
}

/* 响应式调整 (确保移动端堆叠和全宽显示) */
@media screen and (max-width: 768px) {
    .post-list.two-column-grid article {
        flex-direction: column; /* 垂直堆叠 */
        min-height: auto;
    }
    .post-list.two-column-grid article .post-thumbnail {
        flex: none;
        width: 100%;
        height: 180px; /* 移动端图片高度 */
    }
}

/* 统一内容区样式 (Image Always Left) */
.post-list.two-column-grid article .entry-content-wrap {
    flex: 1; /* 内容区占据剩余空间 */
    /* 统一左右内边距，使其在两列中保持一致 */
    padding: 15px 20px 15px 20px; 
    display: flex; 
    flex-direction: column;
    justify-content: space-between; 
}