博客宽屏适配（自用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 全局宽度 */
.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
/* 全局宽度 */
.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
[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
#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
/* 翻页按钮居中 */
#pagination {
  width: 100%;
  margin: auto;
}

文章标题居中

1
2
3
4
5
6
7
8
#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
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
/* 文章行间距 */
#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
/* 时间轴样式 */
#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
/* 字体 */
@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
/* 导航栏 */
/* 一级菜单居中 */
#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
.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
.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
.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
  #page-header.post-bg {
    height: 460px !important;
}

侧边栏标签统一字体大小

1
2
3
4
5
6
/* 侧边栏标签统一字体大小 */
#aside-content .card-tag-cloud a {
  display: inline-block;
  padding: 0 4px;
  font-size: 16px !important;
}