Halo - 优化默认主题 earth 的部分样式

默认主题是耐看的、通用的风格，但仍然存在微调的地方。

本文内容基于 Halo 的“控制台-设置-代码注入”。

全局 head 标签

下面的代码已在本站生效。

<!--此处可插入标签，例如 SEO 相关的内容-->
<style>
  /* 顶部栏-图片 */
  header img[src='/upload/logo.png'] {
    width: 3.8rem;
    height: 3.8rem;
  }

  /* 轮播区域-文字 */
  header + section > div.bg-cover > div > span {
    color: #ffffff;
  }

  header + section > div.bg-cover > div > span:last-child {
    font-size: 1.12rem;
  }

  /* 底部区域 */
  footer {
    padding-top: 1.2rem !important;
    padding-bottom: 0.6rem !important;
  }

  footer img[src='/upload/logo.png'] {
    width: 5.2rem;
    height: 5.2rem;
  }

  footer hr {
    margin-top: 1.2rem !important;
    margin-bottom: 1.2rem !important;
  }

  /* 媒体查询 */
  @media screen and (min-width: 600px) {
    /* 内容区，当首页的文章列表的数量太少时，避免底部栏与屏幕之间存在明显的空隙；影响了详情页面 */
    body > section:nth-of-type(2) {
      min-height: 45.2vh;
    }
  }
</style>

内容页 head 标签

下面的代码已在本站生效。

<style>
  /**单个代码块**/
  /* .tailwind-typography :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-top-width: 1px;
    border-top-color: var(--tw-prose-th-borders);
  } */

  .tailwind-typography :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    position: relative;
    padding: 0 4px;
  }
  .tailwind-typography :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)):before {
    content: '';
    width: 100%;
    display: inline-block;
    background: #aaa;
    height: 100%;
    position: absolute;
    opacity: 0.2;
    top: 0;
    left: 0;
    border-radius: 4px;
  }

  .tailwind-typography :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *)):after {
    content: '';
  }

  /* 表格 */
  .tailwind-typography :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    padding-top: 0.5714286em;
  }

  html:not(.dark) .tailwind-typography :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  }

  .tailwind-typography :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    padding-top: 0.5714286em;
  }

  .tailwind-typography :where(tbody tr:last-child):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    border-bottom-width: 1px;
  }

  html:not(.dark) .tailwind-typography :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose'] *)):hover {
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  }

  /* 分隔线 */
  .tailwind-typography :where(hr):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }
</style>

本文内容到此为止，仅供参考；转载需注明出处。