优化Foundation theme首页显示效果

解决这个帖子的问题

刚才rebuild更新后,首页字体变的很小 - 贡献 / 用户体验 - Discourse Meta

通过自定义组件优化首页显示:

优化前:

优化后:

自定义组件css代码:

/* ========== 让板块行上下边距一致 ========== */
.category-list tbody tr td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ========== 表头“类别、话题、最新”整体字体 ========== */
.category-list-header {
  font-size: 1.2rem !important;
}


/* 主分类字体大小 */
.category-list .category-name .badge-category__name {
  font-size: 1rem !important;
}

/* 子分类字体大小 */
.category-list .subcategory {
  font-size: 0.98rem !important;
}

/* 表头 "话题" 右边留白增大 */
.category-list-header .topics.topic-list-data.num {
  padding-right: 50px !important;
}

/* 数据列 "1 / 周" 右边留白增大 */
td.topics.topic-list-data.num {
  padding-right: 50px !important;
}

/* ========== 发帖数字体控制========== */
.topics .value {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

/* ========== 单位 "周"字体控制 ========== */
.topics .unit {
  font-size: 1rem !important;
}

/* ========== 右侧精选主题字体调整 ========== */

/* 精选话题标题 */
.featured-topic .title {
  font-size: 0.97rem !important;
  font-weight: 500 !important;
}

/* 发布时间(如"30 天") */
.featured-topic .last-posted-at,
.featured-topic .relative-date {
  font-size: 0.9rem !important;
}

/* 话题状态图标 */
.featured-topic .topic-statuses {
  font-size: 0.97rem !important;
}

/* 单个精选主题块间距 */
.featured-topic {
  margin-bottom: 2px !important;     /* 主题之间留白 */
  padding: 5px 0 !important;          /* 上下内边距 */
  line-height: 1 !important;        /* 整体行高 */
}