博客宽屏适配（自用）

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/* 全局宽度 */

.layout {

  width: 100%;

  max-width: 1460px;

}

  

/* 侧边卡片栏宽度 */

.aside-content {

  max-width: 318px;

  min-width: 300px;

}

  

/* 平板尺寸自适应(不启用侧边栏宽度限制) */

@media screen and (max-width: 900px) {

  .aside-content {

    max-width: none !important;

    padding: 0 5px 0 5px;

  }

}

  

.layout.hide-aside {

  max-width: 1400px;

}

博客宽屏适配更新

 

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/* 全局宽度 */

.layout {

  width: 100%;

  max-width: 1460px;

}

  

/* 侧边卡片栏宽度 */

.aside-content {

  max-width: 318px;

  min-width: 300px;

}

  

.layout>div:first-child {

  width: calc(100% - 318px);

  -webkit-transition: all .3s;

  -moz-transition: all .3s;

  -o-transition: all .3s;

  -ms-transition: all .3s;

  transition: all .3s

}

  

/* 平板尺寸自适应(不启用侧边栏宽度限制) */

@media screen and (max-width: 900px) {

  .aside-content {

    max-width: none !important;

    padding: 0 5px 0 5px;

  }

}

  

.layout.hide-aside {

  max-width: 1400px;

}

  
  

#page-header.post-bg {

  height: 460px !important;

}

个人信息卡片背景图

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

[data-theme="light"] #aside-content > .card-widget.card-info {

    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWEin.jpg);

    background-repeat: no-repeat;

    background-attachment: inherit;

    background-size: 100%;

}

[data-theme="dark"] #aside-content > .card-widget.card-info {

    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWVGq.jpg);

    background-repeat: no-repeat;

    background-attachment: inherit;

    background-size: 100%;

}

  

/* 个人信息卡片背景图 */

  

/* 个人卡片信息 */

#aside-content .card-widget {

  position: relative;

  overflow: hidden;

  margin-top: 20px;

  padding: 24px 24px;

}

文章卡片擦亮动画

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

#recent-posts > .recent-post-item .post_cover {

    position: relative;

}

#recent-posts>.recent-post-item .post_cover::after {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255,255,255,.5);

    content: '';

    -webkit-transition: -webkit-transform .3s;

    -moz-transition: -moz-transform .3s;

    -o-transition: -o-transform .3s;

    -ms-transition: -ms-transform .3s;

    transition: transform .3s;

    -webkit-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);

    -moz-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);

    -o-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);

    -ms-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);

    transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);

}

#recent-posts>.recent-post-item .post_cover:hover::after {

    -webkit-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);

    -moz-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);

    -o-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);

    -ms-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);

    transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);

}

  

/* 文章卡片擦亮动画 */

翻页按钮

1
2
3
4
5
6
7
8
9
10
11

/* 翻页按钮居中 */

#pagination {

  width: 100%;

  margin: auto;

}

文章标题居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#page-header #post-info {

  position: absolute;

  /* 这里的bottom：的值可以调节标题的上下位置 */

  bottom: 160px;

  padding: 0 8%;

  width: 100%;

  text-align: center;

}

文章字体

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

body {

  font-family: 'HarmonyOS_Sans_SC_Medium';

}

  
  

@font-face {

  font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;

  src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),

       url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff') format('woff');

}

文章行间距

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 文章行间距 */

#article-container p {

  margin: 0 0 16px;

  font-size: 16px;

  line-height: 2.3;

}

时间轴背景图

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
26
27
28
29
30
31

/* 时间轴样式 */

#page-header {

  position: relative;

  width: 100%;

  /* background-color: #49b1f5; */

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  -ms-transition: all 0.5s;

  transition: all 0.5s;

  background-image: url(https://cdn.jsdelivr.net/gh/NorthPoet/images/images/picture-2312336.jpg);

}

菜单字体样式

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* 字体 */

@font-face {

  font-family: ZhuZiAYuanJWD;

  src: url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/fonts/ZhuZiAWan.woff2);

  font-display: swap;

  font-weight: lighter;

}

  

div#menus {

  font-family: "ZhuZiAYuanJWD";

}

h1#site-title {

  font-family: ZhuZiAYuanJWD;

  font-size: 3em !important;

}

a.article-title,

a.blog-slider__title,

a.categoryBar-list-link,

h1.post-title {

  font-family: ZhuZiAYuanJWD;

}

导航栏居中

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
26
27
28
29
30
31
32
33

/* 导航栏 */

/* 一级菜单居中 */

#nav .menus_items {

  position: absolute !important;

  width: fit-content !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

}

/* 子菜单横向展示 */

#nav .menus_items .menus_item:hover .menus_item_child {

  display: flex !important;

}

/* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */

.menus_items .menus_item:nth-child(2) .menus_item_child {

  left: -125px;

}

卡片边框

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

.cardHover,

.error404 #error-wrap .error-content,

.layout>div:first-child:not(.recent-posts),

#recent-posts>.recent-post-item,

#aside-content .card-widget,

.layout>.recent-posts .pagination>*:not(.space) {

  border-radius: 8px;

  background: var(--card-bg);

  -webkit-box-shadow: var(--card-box-shadow);

  box-shadow: var(--card-box-shadow);

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  -o-transition: all 0.3s;

  -ms-transition: all 0.3s;

  transition: all 0.3s;

  border: 1px solid transparent;

}

  

.cardHover:hover,

.error404 #error-wrap .error-content:hover,

.layout>div:first-child:not(.recent-posts):hover,

#recent-posts>.recent-post-item:hover,

#aside-content .card-widget:hover,

.layout>.recent-posts .pagination>*:not(.space):hover {

  -webkit-box-shadow: var(--card-hover-box-shadow);

  box-shadow: var(--card-hover-box-shadow);

  border: 1px solid #425AEF;

}

带框框的分类样式

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

.category-lists ul li {

  display: flex;

  width: fit-content;

  font-size: 1.2em !important;

  padding: 0.2em 0.5em;

  background: #fff;

  margin: 0.5em 0.5em;

  border-radius: 12px;

  -webkit-backface-visibility: hidden;

  -webkit-transform-style: preserve-3d;

  border: 1.5px solid #e3e8f7;

  box-shadow: 0 8px 16px -4px #2c2d300c !important;

  align-items: center;

  font-size: 18px !important;

}

  

.category-lists .category-list {

  text-align: center;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  flex-direction: row;

  margin: 5em 0 3em;

}

带框框的标签样式

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.tag-cloud-list a {

  width: fit-content;

  font-size: 1.2em !important;

  padding: 0.2em 0.5em;

  background: #fff;

  margin: 0.5em 0.5em;

  border-radius: 12px;

  -webkit-backface-visibility: hidden;

  -webkit-transform-style: preserve-3d;

  border: 1.5px solid #e3e8f7;

  box-shadow: 0 8px 16px -4px #2c2d300c !important;

  align-items: center;

  font-size: 18px !important;

}

.tag-cloud-list.is-center {

  text-align: center;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  flex-direction: row;

  margin: 5em 0 3em;

}

文章头部增加高度

1
2
3
4
5
6
7

  #page-header.post-bg {

    height: 460px !important;

}

侧边栏标签统一字体大小

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 侧边栏标签统一字体大小 */

#aside-content .card-tag-cloud a {

  display: inline-block;

  padding: 0 4px;

  font-size: 16px !important;

}