Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于显示的优化 #7

Open
184455 opened this issue Apr 30, 2021 · 0 comments
Open

关于显示的优化 #7

184455 opened this issue Apr 30, 2021 · 0 comments

Comments

@184455
Copy link

184455 commented Apr 30, 2021

首先非常感谢作者的无私分享,把这么完美的东西给大家用!
然后,我提一些个人使用这个主题的觉得可以优化点:

  • 限制最外层容器的宽度;
  • 去掉 TODO 完成以后的中划线;
  • 标题:h1, h2, h3, h4, h5 的样式调整。

1、 限制最外层容器的宽度

首先来看一下没有加宽度限制的页面,感觉在美观度上不是很好:
image

然后看一下加了宽度限制的效果
image

代码修改:
image

#write {
  max-width: 1024px;
}

2、 去掉 TODO 完成以后的中划线

这一点,感觉和个人的使用习惯有关系。
TODO 我主要用来记录自己做的事情,做列表,记录问题的时候用来的。
不仅作为待办,还会记录很多比较杂乱的事情。
这个时候当TODO 很多的时候,满屏的中划线,感觉就很难受。可以感受一下:
image
image

关于这块的代码修改在这里:
image

3、标题:h1, h2, h3, h4, h5 的样式调整

关于标题的修改,效果主要看第一个问题的截图。
感觉标题的字体有一点大,居中和底部线条的效果可以修改一下!
PS:这里一点主要参考了官方 Github 主题的效果!

主要修改代码:
image

#write h1,
#write h2 {
  text-align: left;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

#write h1 {
  font-size: 2.25rem;
}

#write h2 {
  font-size: 1.75rem;
}

#write h3 {
  font-size: 1.5rem;
}

#write h4 {
  font-size: 1.25em;
}

#write h5 {
  font-size: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant