建站和美化汇总

0.说明

起因：设置了背景图片。

顶部导航条默认为纯白，底部网站信息默认透明背景。

若全透明则文字受图片干扰看不清，纯白或单纯半透明会突兀，没有过渡。

故本文设置渐变透明度，使之更协调。

目标效果：

1.顶部

1-1.透明度渐变

文件Hexo\themes\keep\source\css\layout\_partial\header.styl中，

找到下面代码：

.header-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-color);
  padding-top: $scroll-progress-bar-height;
  ......

将background的值修改为：

1	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4));

1-2.字体加粗

为使导航条上文字始终清晰，设置为加粗。

文件Hexo\themes\keep\source\css\layout\_partial\header.styl中，

找到以下代码：

.menu-item {
	float: left;
	position: relative;
	margin-left: 30px;
	font-size: 1rem;
	cursor: pointer;
	color: var(--default-text-color);
	......

加一条font-weight: bold，修改结果：

.menu-item {
	float: left;
	position: relative;
	margin-left: 30px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	color: var(--default-text-color);
	......

2.底部

在文件Hexo\themes\keep\source\css\layout\page.styl中

找到以下代码：

1
2
3

.page-main-content-bottom {
	width: 100%;
}

加两条，修改结果：

.page-main-content-bottom {
	width: 100%;
	background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	padding-top: 15px;
}

第一条设置过渡透明度，第二条调节此背景覆盖范围。