更新记录
2022-12-17:赛博风卡片重写
点击查看预览效果
最近迷上了赛博朋克风格和像素风格。在codepen上找了不少素材,有了不少灵感。干脆拿来试试手。 一开始是打算完全重写的。后来发现侧栏卡片的版块每个都是独立文件。要重写的话就要一个一个重写。那如果以前还有其他魔改侧栏的内容,岂不是也要重新维护。啊,想想就好麻烦。所以我们还是按照老规矩,直接用css覆盖上去吧。 适配样式的时候感觉还不错。没有多少需要用到important强行提高权值的地方。 这里必须吐槽一下jerry做目录卡片时那个百分比的效果。用span来装就不考虑行高。还不如用div呢。好歹不会挤占下面的元素内容。 多亏了洪哥推荐的在线clip-path生成工具。虽然那个工具只能按百分比生成,但至少找点方便多了。 这次因为用到了clip-path,我直接一口气把整个卡片切割出来了,所以代码显得非常的简洁。真是太好用了这个clip-path!
新建[Blogroot]\themes\butterfly\source\css\_layout\cyber_card_weiget.styl
//default color:
:root
--card-widget-background: rgba(255, 255, 255, 0.9) //左下角能量条配色
--card-widget-charge: linear-gradient(to top, transparent, #ffb531) //侧栏卡片背景配色
[data-theme="dark"]
--card-widget-background: rgba(35,35,35,0.5)
--card-widget-charge: linear-gradient(to top, transparent, #4db7d5)
.card-widget
background var(--card-widget-background)!important
&:not(.card-info)
padding: 0px 25px 25px 25px!important
//一口气切割出整个卡片。
clip-path: polygon(25px 0, calc(100% - 75px) 0, calc(100% - 50px) 25px, 100% 25px, 100% 40px, 50px 40px, 40px 45px, 100% 45px, 100% 45%, calc(100% - 15px) calc(45% + 25px), calc(100% - 15px) calc(100% - 75px), 100% calc(100% - 50px), 100% 100%, 25px 100%, 12.5px calc(100% - 12.5px), 12.5px calc(100% - 20px) , 0px calc(100% - 32.5px),0px calc(100% - 52.5px),12.5px calc(100% - 40px), 12.5px calc(100% - 50px) , 0px calc(100% - 62.5px),0px calc(100% - 82.5px),12.5px calc(100% - 70px),12.5px calc(100% - 80px) , 0px calc(100% - 92.5px),0px calc(100% - 112.5px),12.5px calc(100% - 100px),12.5px calc(100% - 112.5px), 0 calc(100% - 125px), 0 25px)
.item-headline
margin: 5px 0px 0px 5px
&::before //左下角的能量条
content: ""
height: 112.5px
width: 12.5px
background: var(--card-widget-charge)
display block
position: absolute
left: 0px
bottom: 0px
.aside-list
.aside-list-item
a.thumbnail
img
clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%) //头像框六边形切割
//目录百分比兼容性适配
&#card-toc
.toc-percentage
margin: -15px 70px -15px 0px !important
font-size: 26px !important
魔改过程中可能会碰到不想应用这个样式的卡片。这时候就可以用到css的not选择器。
找到cyber_card_weiget.styl
文件中not选择器的一行,在后面继续添加你不想应用的卡片的类名或者id名即可。例子如下:
.card-widget
background var(--card-widget-background)
&:not(.card-info):not(.card-clock):not(#card-toc)
原本的hr水平分割线我不太喜欢。所以直接改了。
删掉[Blogroot]\themes\butterfly\source\css\_global\index.styl
中原版的关于水平线样式的拓展。注意是删掉以下这部分,不是新建。
hr
position: relative
margin: 40px auto
border: 2px dashed var(--hr-border)
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: var(--hr-before-color)
content: $hr-icon
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
@extend .fontawesomeIcon
新建一个文件[Blogroot]\themes\butterfly\source\css\_layout\cyber_hr-line.styl
,
//default color:
:root
--hr-line-color: #e91417
[data-theme="dark"]
--hr-line-color: #4db7d5
//水平线样式更改
hr
position: relative
margin: 40px auto
display: block
height: 20px
width: 100%
background: transparent
border: none
&:hover
&::before
clip-path: polygon(0 0, 60px 100%, calc(100% - 30px) 100%, 100% 50%, calc(100% - 15px) 50%, calc(100% - 35px) calc(100% - 5px), 65px calc(100% - 5px), 15px 0)
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
&::after
clip-path: polygon(0 50%,35px 0,calc(100% - 60px) 0,100% 100%,calc(100% - 15px) 100%,calc(100% - 65px) 5px,35px 5px,15px 50%)
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
&::before
display: block
content: ""
height: 20px
width: calc(50% + 60px)
left: 0px
position: absolute
background: linear-gradient(to left, var(--hr-line-color),transparent)
clip-path: polygon(0 100%, 60px 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 15px) 50%, calc(100% - 35px) 5px, 65px 5px, 15px 100%)
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
&::after
display: block
content: ""
height: 20px
width: calc(50% + 60px)
right: 0px
position: absolute
background: linear-gradient(to right, var(--hr-line-color),transparent)
clip-path: polygon(0 50%,35px 100%,calc(100% - 60px) 100%,100% 0,calc(100% - 15px) 0,calc(100% - 65px) calc(100% - 5px),35px calc(100% - 5px),15px 50%)
transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)