How to custom font size of post title?

[gapplef]

Please follow this Issue template to provide relevant information, such as source code repository, website URL and screenshots, which will help us investigate.
请按照此 Issue 模版提供相关信息，例如源码仓库、网站链接和屏幕截图，这将有助于我们进行调查。

Issue Checklist

• I am using the latest version of NexT.
• I have already read the relevant documents of Hexo and NexT.
• I have already searched for current issues, which does not help me.

---

The font size of post title are not auto adapt to the screen size.

This is an old problem, see theme-next/hexo-theme-next#1086 .
So, previously(NexT v7.3~v7.7), I custom the font size of post title with the following _data/styles.styl:
(One thing I noticed is $font-size-base is 16px for post body, while for tilte is 18px, I don't know if this is the expected.)

.post-body {
  +tablet-mobile() {
    font-size: $font-size-small;  /* 14px */
  }
  +desktop-large() {
    font-size: $font-size-base;  /* 16px */
  }
  +desktop-largest() {
    font-size: $font-size-large; /* 18px */
  }
}

.post-title {
  +tablet-mobile() {
    font-size: $font-size-base;  /* 18px */
  }
  +desktop-large() {
    font-size: 1.225*$font-size-base;  /* 22px */
  }
  +desktop-largest() {
    font-size: 1.445*$font-size-base;  /* 26px */
  }
}

The problem is, after update to Hexo 5.0 and NexT v8.0.0rc5, the above custom of post title also affects archives page.
Also, after update to Hexo 5.0 & NexT v8.0.0rc5, !important is needed for the custom of .post-title to take effect.

My question is: is there any way to custom font size of post title while keep the font size of archives page untouched?

[welcome[bot]]

Thanks for opening this issue, maintainers will get back to you as soon as possible!

[gapplef]

After search post-title in the source code, I found the keywords .posts-expand, and the following works fine for me:

.posts-expand .post-title {
  +tablet-mobile() {
    font-size: $font-size-base;  /* 18px */
  }
  +desktop-large() {
    font-size: 1.225*$font-size-base;  /* 22px */
  }
  +desktop-largest() {
    font-size: 1.445*$font-size-base;  /* 26px */
  }
}

But I don't really understand what's going on here. Also, I found .post-header, and the following custom also work, except the +tablet-mobile case.

.posts-expand .post-header {
  +tablet-mobile() {
    font-size: $font-size-small;  /* 21px */
  }
  +desktop-large() {
    font-size: $font-size-base;  /* 24px */
  }
  +desktop-largest() {
    font-size: $font-size-large; /* 27px */
  }
}

Could anyone give some explanation:
What's .posts-expand?
What's the difference between .post-header, .post-title?
Why $font-size-base various for body, title and header?
Why the +tablet-mobile() case not work with .post-header?

[aixiu]

早就有这问题了，新版本的字体比以前的字体大，有些不能在配置文件里直接设置字号。以前提过，给的建议是使用自定义CSS。
开启自定义CSS配置。在博客根目录\source_data\styles.styl 文件配置：

/* 正文字体字号 */
.post-body{
  font-size: 1em
}

/* 发表于-分类于等字体字号 */
.posts-expand .post-meta{
  font-size: 0.66em
}

/* 代码字号 */
code, kbd, samp {  
  font-size: 0.9em; /* 2 */
}

[gapplef]

@aixiu 感谢回复

我上面讲了，自定义的问题在加.posts-expand之后已解决。

不过我不是很了解CSS，官方文档也没有介绍，导致我有很多疑问，你能否解答：

1. .posts-expand对应于网页的哪部分，为什么之前(next v7.7)自定义文件中.post-title前未加.posts-expand也没问题，升级了最新版之后就不行了？
2. .post-title和.post-header有什么区别？根据测试两者都可以自定义文章标题大小，但使用.post-header时对小屏设备(+tablet-mobile)的自定义又不生效，为什么？
3. $font-size-base 对于 .post-body, .post-title, .post-header取值各不相同，这是正常吗？

[aixiu]

@gapplef 打开网页，审查元素，找到对应CSS，在自定义里改。好些东西想自定义的CSS，都可以用这方法。比如，代码样式，文本大小，包括滚动条等等。

[yanabcd]

能不能出点教程,一更新我们就很糟心的,我希望他是简单的轻量的,也就是:that like Europe say:"less is more".

[stale[bot]]

This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can also use our support channels to get help with the project.