1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 页面基本配色
:root {
  // 全局顶部边距
  --main-top-padding: 30px;
  // 全局卡片圆角
  --card-border-radius: 25px;
  // 标签云卡片圆角
  --tag-border-radius: 8px;
  // 卡片间距
  --section-separation: 40px;
  // 全局字体大小
  --article-font-size: 1.8rem;
  // 行内代码背景色
  --code-background-color: #f8f8f8;
  // 行内代码前景色
  --code-text-color: #e96900;
  // 暗色模式下样式
  &[data-scheme="dark"] {
    // 行内代码背景色
    --code-background-color: #ff6d1b17;
    // 行内代码前景色
    --code-text-color: #e96900;
  }
}
...

1
2
3
4
5
6

// 菜单栏样式
// 下拉菜单改圆角样式
.menu {
  ...
}
...

1
2
3
4
5
6

//将滚动条修改为圆角样式
//菜单滚动条美化
.menu::-webkit-scrollbar {
  ...
}
...

1
2
3
4
5
6
7
8
9

<script src="https://npm.elemecdn.com/nprogress@0.2.0/nprogress.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://npm.elemecdn.com/nprogress@0.2.0/nprogress.css" crossorigin="anonymous" />
<script>
  NProgress.start();
  document.addEventListener("readystatechange", function() {
    if (document.readyState === "interactive") NProgress.inc(0.8);
    if (document.readyState === "complete") NProgress.done();
  });
</script>

1
2
3
4
5
6
7
8
9

<!-- 首页欢迎字幅 -->
<div class="welcome">
  <p style="font-size: 2rem; text-align: center; font-weight: bold">
    <span class="shake">👋</span>
    <span class="jump-text1">Welcome</span>
    ...
  </p>
</div>
<!-- 首页欢迎字幅 -->

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// macOS 风格代码块
.article-content {
  .highlight:before {
    content: '';
    display: block;
    background: url(/code-header.svg);
    ...
  }
}
...

1
2
3
4
5

// 键盘样式
kbd {
  ...
}
...

1
2
3
4
5
6
7
8

// 头像旋转动画
.sidebar header .site-avatar .site-logo {
  ...
}
.sidebar header .site-avatar .site-logo:hover {
  ...
}
...