2024-09-25 博客优化

作于：2024-09-25 12:58 ，预计阅读时间 2 分钟

闲下来的时候给博客样式略微做了点更新。

字体

anemone 这个主题默认使用的 suCSS 样式，suCSS 的 font-family 配置对汉字不太友好，网页显示会回退到宋体。

考虑到 suCSS 不大，原仓库也没怎么维护，干脆自己维护一份拷贝好了，所以拉了源码重构了 suCSS 的调色盘。

:root,
::backdrop {
  /* set sans-serif & mono fonts */
  /* prettier-ignore */
  --suCSS-sans-font:
    /* for Mac*/      'Helvetica Neue', Helvetica,
    /* fallback */    Tahoma, Arial,
    /* for Windows */ 'Microsoft YaHei',
    /* for Mac */     'PingFang SC', 'Hiragino Sans GB', 'Heiti SC',
    /* for Android */ 'Droid Sans',
    /* for Linux */   'WenQuanYi MicroHei',
    /* fallback */    sans-serif;

  /* prettier-ignore */
  --suCSS-mono-font:
    /* preferred */   'Cascadia Code', 'Cascadia Mono', 'CaskaydiaCove NF',
    /* for Windows */ Consolas,
    /* for Mac */     Menlo, Monaco, 'Andale Mono',
    /* for Android */ 'Droid Sans Mono',
    /* for Linux */   'Ubuntu Mono',
    /* fallback */    monospace;
}

等宽字体偏好的是我平时用的 Cascadia 系列字体。

段落缩进

suCSS 默认没有段落缩进，读起来有点费劲，所以还是加上了。

article p {
  text-indent: 2em;
}

选中文本

suCSS 配置的选中文本样式在我的 edge 上莫名其妙不工作，把 , 分隔的选择器分别写成两条样式就没问题。

::selection {
  color: var(--suCSS-pallete-accent);
  background-color: var(--suCSS-pallete-bg-light);
}

::-moz-selection {
  color: var(--suCSS-pallete-accent);
  background-color: var(--suCSS-pallete-bg-light);
}

列表样式错位

之前给文章列表加了日期，把<li>内的<a>标签样式改成了 inline-block 导致 ::marker 元素和 <li> 内容对不齐了。

所以直接撤掉了日期显示。毕竟这个日期也没做好响应式设计，移动端文章列表的标题和日期会错位。

已知问题

/博客/