1
/** 加载本地英文字体 **/
2
@font-face {
3
    font-family: Georgia;
4
    src: url('/fonts/georgiab.ttf');
5
}
6

7
/* 全站默认字体（正文） */
8
body, html {
9
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
10
    font-weight: 700;
11
    line-height: 1.6;
12
  }
13

14
/* 导航栏主菜单字体为英文 Georgia */
15
nav a, nav p {
16
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
17
    font-weight: 600;
18
  }
19

20
  /* 英文小标题保持 serif 并优先使用 Georgia */
21
h1, h2, h3, h4, h5, h6 {
22
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
23
    font-weight: 700;
24
  }
25

26
  /* 代码字体（代码块） */
27
  code, pre {
28
    font-family: 'Fira Code', 'Courier New', monospace;
29
    font-weight: 500;
30
  }
31

32
/* 标题字体为 Lobster */
33
nav a[href="/"] {
34
    font-family: 'Lobster', cursive !important;
35
    font-weight: bold !important;
36
    font-size: 1.3em;
37
    color: inherit;
38
    transition: color 0.3s ease;
39
  }

1
<!-- 字体 -->
2
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Noto+Serif+SC:wght@700&display=swap" rel="stylesheet">
3
<link href="https://cdn.jsdelivr.net/npm/[email protected]/distr/fira_code.min.css" rel="stylesheet">
4
<link href="https://at.alicdn.com/t/font_1230224_omviwgy4rx.css" rel="stylesheet">
5
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Lobster&family=PT+Sans&display=swap" rel="stylesheet">

1
  /* 标题悬停时的颜色变化 */
2
  nav a[href="/"]:hover {
3
    color: rgb(var(--color-primary-600));
4
  }
5
  /* 夜间模式下标题悬停时的颜色 */
6
  .dark nav a[href="/"]:hover {
7
    color: rgb(var(--color-primary-500));
8
  }

1
/* 修改logo大小 */
2
 .logo {
3
    max-width: 50px !important;
4
    max-height: 50px !important;
5
  }

1
/* 应用于博客目录链接 hover 下划线动画 */
2
#TableOfContents a {
3
    position: relative;
4
    text-decoration: none; /* 防止默认下划线 */
5
    display: inline-block;
6
    color: inherit; /* 保持与正文一致的颜色 */
7
    transition: color 0.3s ease;
8
  }
9

10
  #TableOfContents a::after {
11
    content: '';
12
    position: absolute;
13
    left: 0;
14
    bottom: -2px;
15
    width: 100%;
16
    height: 2px;
17
    background-color: rgb(var(--color-primary-500));
18
    transform: scaleX(0);
19
    transform-origin: left;
20
    transition: transform 0.3s ease;
21
  }
22

23
  #TableOfContents a:hover::after {
24
    transform: scaleX(1);
25
  }

1
/* 暗色模式：鼠标选中背景 + 柔白文字 */
2
html.dark ::selection {
3
    background: #D36993;
4
    color: #fffafc;
5
  }
6

7
  /* 亮色模式：深粉背景 + 深色文字/默认颜色 */
8
  ::selection {
9
    background: #D36993;
10
    color: #4B1E2E;
11
    /* color: inherit; */
12
  }

1
/* strong 标签 常驻重点色下划线*/
2
.article-content strong {
3
  position: relative;
4
  font-weight: bold;
5
  cursor: pointer;
6
  background: linear-gradient(transparent 60%, #D36993 60%);
7
}
8

9
/* 小标题 常驻重点色下划线*/
10
h4 {
11
  font-weight: bold;
12
  display: inline-block;  /* 让元素宽度跟随文字 */
13
  background: linear-gradient(transparent 60%, #D36993 60%);
14
}

1
/* 夜间模式下 正文颜色 */
2
html.dark .prose {
3
  color: #d4d4d8; /* 更亮的灰白色，适合夜间背景 */
4
}
5

6
/* 夜间模式下 strong 标签 同样正文颜色*/
7
html.dark .article-content strong {
8
  color: #d4d4d8;  /* 与正文保持一致 */
9
}

1
/* 顶部阅读进度条 */
2
.top-scroll-bar {
3
    position: fixed;
4
    top: 0;
5
    left: 0;
6
    z-index: 9999;
7
    display: none;
8
    width: 0;
9
    height: 3px;
10
    background: #d05c8a;
11
  }

1
<!-- 进度条逻辑 -->
2
<script>
3
    window.addEventListener('scroll', () => {
4
      const bar = document.querySelector('.top-scroll-bar');
5
      if (!bar) return;
6
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
7
      const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
8
      const width = (scrollTop / scrollHeight) * 100;
9
      bar.style.width = width + '%';
10
      bar.style.display = 'block';
11
    });
12
</script>

1
<!-- 进度条 -->
2
<div class="top-scroll-bar"></div>

1
<!-- 爱心点击特效 -->
2
<script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/love.min.js"></script>

1
<!-- Live2D，网页上的小人，可以修改live2d_config.js来修改模型，模型都在static/live2d_models里面 -->
2
<!-- 你也可以把js文件下载下来，放到static/js/目录下，就不依赖别人的服务了 -->
3
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js"></script>
4
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.0.min.js"></script>
5

6
<script type="text/javascript">
7
    L2Dwidget.init({
8
        model: {
9
            scale: 1,
10
            hHeadPos: 0.5,
11
            vHeadPos: 0.618,
12
            jsonPath: 'https://cdn.jsdelivr.net/gh/MicroSic/live2d-model@main/xier/model.json',       // xxx.model.json 的路径,换人物修改这个
13
        },
14
        display: {
15
            superSample: 5,     // 超采样等级
16
            width: 150,         // canvas的宽度
17
            height: 250,        // canvas的高度
18
            position: 'left',   // 显示位置：左或右
19
            hOffset: 0,         // canvas水平偏移
20
            vOffset: 0,         // canvas垂直偏移
21
        },
22
        mobile: {
23
            show: true,         // 是否在移动设备上显示
24
            scale: 1,           // 移动设备上的缩放
25
            motion: true,       // 移动设备是否开启重力感应
26
        },
27
        react: {
28
            opacityDefault: 1,  // 默认透明度
29
            opacityOnHover: 1,  // 鼠标移上透明度
30
        },
31
     });
32
</script>

1
<a rel="me" href="https://fairy.id/@Zokiio">Mastodon</a>

1
<a rel="me" href="https://fairy.id/@Zokiio" style="display: none;">Mastodon</a>

1
{{ define "main" }}
2
{{ .Scratch.Set "scope" "single" }}
3

4
<article>
5
  {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
6
  {{ $heroStyle := .Params.heroStyle }}
7
  {{ if not $heroStyle }}{{ $heroStyle = .Site.Params.article.heroStyle }}{{ end }}
8
  {{ $heroStyle := print "hero/" $heroStyle ".html" }}
9
  {{ if templates.Exists ( printf "partials/%s" $heroStyle ) }}
10
  {{ partial $heroStyle . }}
11
  {{ else }}
12
  {{ partial "hero/basic.html" . }}
13
  {{ end }}
14
  {{ end }}

1
  <!-- 文章密码功能 -->
2
  {{ if ( .Params.password | default "" ) }}
3
  <script>
4
      (function(){
5
          if (prompt('请输入文章密码') != "{{ .Params.password }}"){
6
              alert('密码错误！');
7
              if (history.length === 1) {
8
                  window.opener = null;
9
                  window.open('', '_self');
10
                  window.close();
11
              } else {
12
                  history.back();
13
              }
14
          }
15
      })();
16
  </script>
17
  {{ end }}
18
  <!-- 文章密码功能结束 -->