Skip to content

Commit a5c4b40

Browse files
author
wu-kan
committed
侧边栏头像样式修改
1 parent b3017f5 commit a5c4b40

File tree

3 files changed

+107
-209
lines changed

3 files changed

+107
-209
lines changed

‎_config.yml

Lines changed: 100 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,29 @@
9191

9292
# 以下四个配置项为空时jekyll-github-metadata会帮你生成
9393
title: wu-kan
94-
description: | # 不知道怎么写介绍，放个音乐吧
94+
description: | # 头像背后的信息，<br/>代表换行
95+
SYSU17级超算方向在读<br/>
96+
永远喜欢水野爱<br/>
97+
田宫例四驱车<br/>
98+
ASCer<br/>
99+
<a href="/assets/jekyll-sitemaps/atom.xml" title="rss">
100+
<i class="fas fa-rss"></i>
101+
</a>
102+
<a href="mailto:[email protected]" title="[email protected]">
103+
<i class="fas fa-envelope"></i>
104+
</a>
105+
<a href="https://github.com/wu-kan" title="github">
106+
<i class="fab fa-github"></i>
107+
</a>
108+
<a href="https://codeforces.com/profile/WuK" title="WuK">
109+
<i class="fas fa-chart-bar fw"></i>
110+
</a>
111+
<a href="https://vjudge.net/user/WuK" title="WuK">
112+
<i class="fas fa-smile"></i>
113+
</a>
114+
<a href="https://www.zhihu.com/people/wu.kan/activities" title="zhihu">
115+
<i class="fab fa-zhihu"></i>
116+
</a>
95117
<iframe
96118
src="https://music.163.com/outchain/player?type=0&id=155059595&auto=0&height=32"
97119
width=100%
@@ -245,42 +267,13 @@ post:
245267
246268
page:
247269
body:
248-
theme-base: theme-base-0d # 可选的值08~0f
270+
theme-base: theme-base-0d # 可选的值08~0f，见https://github.com/poole/lanyon
249271
layout-reverse: false # 开启后sidebar在右边，反之左边
250272
sidebar-overlay: false # 开启后正文不随sidebar移动而移动
251273
sidebar:
252274
avatar: # 侧边栏显示的头像
253275
enable: true
254276
img: https://gravatar.loli.net/avatar/a12c5fff23dde00df79af9aca4e7b6e4?s=300 # 头像的地址
255-
info: | # 头像背后的信息，<br/>代表换行
256-
<br/>SYSU17级在读
257-
<br/>计科超算方向
258-
<br/>永远喜欢水野爱
259-
<br/>田宫例四驱车
260-
<br/>ASC
261-
social:
262-
- title: rss
263-
href: /assets/jekyll-sitemaps/atom.xml
264-
class: "fas fa-rss"
265-
- title: [email protected] # email
266-
href: mailto:[email protected]
267-
class: "fas fa-envelope"
268-
- title: github
269-
href: https://github.com/wu-kan
270-
class: "fab fa-github"
271-
- title: WuK # codeforces
272-
href: https://codeforces.com/profile/WuK
273-
class: "fas fa-chart-bar fw"
274-
- title: WuK # vjudge
275-
href: https://vjudge.net/user/WuK
276-
class: "fas fa-smile"
277-
- title: 942759535 # qq
278-
class: "fab fa-qq"
279-
- title: Wu-_-Kan # weixin
280-
class: "fab fa-weixin"
281-
- title: zhihu
282-
href: https://www.zhihu.com/people/wu.kan/activities
283-
class: "fab fa-zhihu"
284277
nav:
285278
- title: '<i class="fas fa-home fa-fw"></i> 首页'
286279
href: /
@@ -559,55 +552,62 @@ page:
559552
defer="defer"
560553
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"
561554
onload='
562-
function loadWidget(config) {
563-
config = config || {
564-
live2dconfig: {
565-
baseUrl: "https:\/\/cdn.jsdelivr.net/gh/fghrsh/live2d_api/model/HyperdimensionNeptunia/nepnep",
566-
model: "https:\/\/cdn.jsdelivr.net/gh/fghrsh/live2d_api/model/HyperdimensionNeptunia/nepnep/index.json",
567-
globalFollowPointer: true,
568-
layout: {
569-
width: "4",
570-
height: "4",
571-
center_y: "-0.4"
572-
}
573-
}
574-
};
575-
config.board = document.createElement("div");
576-
config.board.style.bottom = 0;
577-
config.board.style.right = 0;
578-
config.board.style.zIndex = "1";
579-
config.board.style.position = "fixed";
580-
config.board.style.writingMode = "sideways-lr";
581-
config.live2dconfig.canvas = document.createElement("canvas");
582-
config.live2dconfig.canvas.style.width = "280px";
583-
config.board.insertAdjacentElement("beforeend", config.live2dconfig.canvas);
584-
document.body.insertAdjacentElement("beforeend", config.board);
585-
waifu = loadLive2d(config.live2dconfig);
586-
config.closeButton = document.createElement("span");
587-
config.closeButton.classList.add("far");
588-
config.closeButton.classList.add("fa-window-close");
589-
config.closeButton.classList.add("fa-fw");
590-
config.closeButton.style.zIndex = config.closeButton.style.zIndex + 1;
591-
config.closeButton.onclick = function () {
592-
config.live2dconfig.canvas.style.display = config.live2dconfig.canvas.style.display !== "none" ? "none" : "inline";
555+
function loadWidget(cfg) {
556+
cfg.board = document.createElement("div");
557+
cfg.board.style.bottom = 0;
558+
cfg.board.style.right = 0;
559+
cfg.board.style.zIndex = "1";
560+
cfg.board.style.position = "fixed";
561+
document.body.insertAdjacentElement("beforeend", cfg.board);
562+
cfg.canvas = document.createElement("canvas");
563+
cfg.canvas.style.width = "280px";
564+
cfg.board.insertAdjacentElement("beforeend", cfg.canvas);
565+
cfg.closeButton = document.createElement("span");
566+
cfg.closeButton.classList.add("far");
567+
cfg.closeButton.classList.add("fa-window-close");
568+
cfg.closeButton.classList.add("fa-fw");
569+
cfg.closeButton.onclick = function () {
570+
cfg.canvas.style.display = cfg.canvas.style.display !== "none" ? "none" : "inline";
593571
};
594-
config.board.insertAdjacentElement("beforeend", config.closeButton);
572+
cfg.board.insertAdjacentElement("beforeend", cfg.closeButton);
573+
return cfg;
595574
}
596-
if (screen.width >= 768) { loadWidget(); }'
575+
if (screen.width >= screen.height) {
576+
loadLive2d({
577+
canvas: loadWidget({}).canvas,
578+
baseUrl: "https:\/\/cdn.jsdelivr.net/gh/fghrsh/live2d_api/model/HyperdimensionNeptunia/nepnep",
579+
model: "https:\/\/cdn.jsdelivr.net/gh/fghrsh/live2d_api/model/HyperdimensionNeptunia/nepnep/index.json",
580+
globalFollowPointer: true,
581+
layout: {
582+
width: "4",
583+
height: "4",
584+
center_y: "-0.4"
585+
}
586+
});
587+
}'
588+
></script>
589+
<script
590+
src='https://zz.bdstatic.com/linksubmit/push.js'
591+
<!--
592+
or
593+
http://push.zhanzhang.baidu.com/push.js
594+
for http
595+
-->
596+
defer='defer'
597597
></script>
598598
<style>
599599
pre {
600600
max-height: 50vh;
601601
overflow: auto;
602602
background-color: rgba(0, 0, 0, 0);
603603
}
604+
html,
604605
h1,
605606
h2,
606607
h3,
607608
h4,
608609
h5,
609610
h6,
610-
html,
611611
.sidebar {
612612
font-family: Menlo, Monaco, "Courier New", Microsoft JhengHei, monospace;
613613
}
@@ -645,18 +645,9 @@ page:
645645
}
646646
}
647647
.page-title {
648-
padding-top: 2rem;
648+
padding-top: 2.2rem;
649649
padding-bottom: 1rem;
650650
}
651-
.sidebar-social {
652-
text-align: center;
653-
font-size: 0.7rem;
654-
}
655-
.sidebar-social a:hover,
656-
.sidebar-social a:focus {
657-
text-decoration: none;
658-
background-color: rgba(255, 255, 255, 0.1);
659-
}
660651
#sidebar-search-input {
661652
background: none;
662653
border: none;
@@ -677,6 +668,39 @@ page:
677668
background-image: none;
678669
}
679670
/*头像效果-start*/
671+
.ih-item.circle {
672+
position: relative;
673+
border-radius: 4px;
674+
}
675+
.ih-item.circle .info {
676+
position: absolute;
677+
top: 0;
678+
bottom: 0;
679+
left: 0;
680+
right: 0;
681+
text-align: center;
682+
border-radius: 4px;
683+
-webkit-backface-visibility: hidden;
684+
backface-visibility: hidden;
685+
}
686+
.ih-item.circle .img {
687+
width: 100%;
688+
height: 100%;
689+
margin: 0;
690+
position: relative;
691+
border-radius: 4px;
692+
}
693+
.ih-item.circle .img:before {
694+
position: absolute;
695+
display: block;
696+
content: "";
697+
width: 100%;
698+
height: 100%;
699+
border-radius: 4px;
700+
-webkit-transition: all 0.35s ease-in-out;
701+
-moz-transition: all 0.35s ease-in-out;
702+
transition: all 0.35s ease-in-out;
703+
}
680704
.ih-item.circle.effect {
681705
margin: 0 auto;
682706
-webkit-perspective: 900px;
@@ -696,135 +720,19 @@ page:
696720
-o-transform-style: preserve-3d;
697721
transform-style: preserve-3d;
698722
}
699-
.ih-item.circle.effect .info .info-back {
700-
opacity: 1;
701-
border-radius: 50%;
702-
width: 100%;
703-
height: 100%;
704-
}
705-
.ih-item.circle.effect.bottom_to_top .img {
706-
-webkit-transform-origin: 50% 0;
707-
-moz-transform-origin: 50% 0;
708-
-ms-transform-origin: 50% 0;
709-
-o-transform-origin: 50% 0;
710-
transform-origin: 50% 0;
711-
}
712-
.ih-item.circle.effect.bottom_to_top a:hover .img {
713-
-webkit-transform: rotate3d(1, 0, 0, 180deg);
714-
-moz-transform: rotate3d(1, 0, 0, 180deg);
715-
-ms-transform: rotate3d(1, 0, 0, 180deg);
716-
-o-transform: rotate3d(1, 0, 0, 180deg);
717-
transform: rotate3d(1, 0, 0, 180deg);
718-
}
719-
.ih-item.circle.effect.top_to_bottom .img {
720-
-webkit-transform-origin: 50% 100%;
721-
-moz-transform-origin: 50% 100%;
722-
-ms-transform-origin: 50% 100%;
723-
-o-transform-origin: 50% 100%;
724-
transform-origin: 50% 100%;
725-
}
726-
.ih-item.circle.effect.top_to_bottom a:hover .img {
727-
-webkit-transform: rotate3d(1, 0, 0, -180deg);
728-
-moz-transform: rotate3d(1, 0, 0, -180deg);
729-
-ms-transform: rotate3d(1, 0, 0, -180deg);
730-
-o-transform: rotate3d(1, 0, 0, -180deg);
731-
transform: rotate3d(1, 0, 0, -180deg);
732-
}
733-
.ih-item.circle.effect.left_to_right .img {
734-
-webkit-transform-origin: 100% 50%;
735-
-moz-transform-origin: 100% 50%;
736-
-ms-transform-origin: 100% 50%;
737-
-o-transform-origin: 100% 50%;
738-
transform-origin: 100% 50%;
739-
}
740-
.ih-item.circle.effect.left_to_right a:hover .img {
741-
-webkit-transform: rotate3d(0, 1, 0, 180deg);
742-
-moz-transform: rotate3d(0, 1, 0, 180deg);
743-
-ms-transform: rotate3d(0, 1, 0, 180deg);
744-
-o-transform: rotate3d(0, 1, 0, 180deg);
745-
transform: rotate3d(0, 1, 0, 180deg);
746-
}
747723
.ih-item.circle.effect.right_to_left .img {
748724
-webkit-transform-origin: 0% 50%;
749725
-moz-transform-origin: 0% 50%;
750726
-ms-transform-origin: 0% 50%;
751727
-o-transform-origin: 0% 50%;
752728
transform-origin: 0% 50%;
753729
}
754-
.ih-item.circle.effect.right_to_left a:hover .img {
730+
.ih-item.circle.effect.right_to_left:hover .img {
755731
-webkit-transform: rotate3d(0, 1, 0, -180deg);
756732
-moz-transform: rotate3d(0, 1, 0, -180deg);
757733
-ms-transform: rotate3d(0, 1, 0, -180deg);
758734
-o-transform: rotate3d(0, 1, 0, -180deg);
759735
transform: rotate3d(0, 1, 0, -180deg);
760736
}
761-
.ih-item a:hover {
762-
text-decoration: none;
763-
}
764-
.ih-item img {
765-
width: 100%;
766-
height: 100%;
767-
}
768-
.ih-item.circle {
769-
position: relative;
770-
width: 120px;
771-
height: 120px;
772-
border-radius: 50%;
773-
}
774-
.ih-item.circle .img {
775-
position: relative;
776-
width: 120px;
777-
height: 120px;
778-
border-radius: 50%;
779-
}
780-
.ih-item.circle .img:before {
781-
position: absolute;
782-
display: block;
783-
content: "";
784-
width: 100%;
785-
height: 100%;
786-
border-radius: 50%;
787-
-webkit-transition: all 0.35s ease-in-out;
788-
-moz-transition: all 0.35s ease-in-out;
789-
transition: all 0.35s ease-in-out;
790-
}
791-
.ih-item.circle .img img {
792-
border-radius: 50%;
793-
}
794-
.ih-item.circle .info {
795-
position: absolute;
796-
top: 0;
797-
bottom: 0;
798-
left: 0;
799-
right: 0;
800-
text-align: center;
801-
border-radius: 50%;
802-
-webkit-backface-visibility: hidden;
803-
backface-visibility: hidden;
804-
}
805-
@media all and (max-width: 780px) {
806-
.ih-item.circle .img {
807-
position: relative;
808-
width: 100px;
809-
height: 100px;
810-
/*margin-top: 20px;*/
811-
border-radius: 50%;
812-
}
813-
.ih-item.circle {
814-
position: relative;
815-
width: 100px;
816-
height: 100px;
817-
border-radius: 50%;
818-
}
819-
}
820737
/*头像效果-end*/
821738
</style>
822-
<script
823-
src='https://zz.bdstatic.com/linksubmit/push.js'
824-
defer='defer'
825-
></script>
826-
# http协议用这个
827-
# <script
828-
# src='http://push.zhanzhang.baidu.com/push.js'
829-
# defer='defer'
830-
# ></script>

0 commit comments

Comments
 (0)