这个新代号，源计划-方舟，是我最近心血来潮又挖的一个大坑。
为了让他的风格能够和谐的形成一个整体，我准备一个个版块重写过去。争取让整个博客的版块都大换血。时间可能会拖得很长。追更的可以先去看试做那篇文章：赛博朋克风格主题样式试做，挑些过渡方案凑活着用。
只有我觉得满意的试做才会单独发文。

贰猹|noionion.top

贰猹

（我就说店长还会想着再改卡片）

Akilar

我准备开个新坑

Akilar

就叫源计划-方舟

Akilar

感觉之前就是因为我写的东西没有特点，和原版的质感差不多。所以别人都记不住。

贰猹

主要是，统一风格

贰猹

设计整体感

贰猹

洪哥的设计就很容易让人有整体的感觉

Akilar

比如洪哥的扁平化风格，kika的轻拟态质感，还有你的，emmm，算卡通设计吧。至少都挺有特点的。

Akilar

群里聊得都是洪化，从来没有人提糖化。

贰猹

你的太过零散

贰猹

每个散装都可以拿出来用

贰猹

自然记不住

Akilar

所以我要写个和他们都不一样的，如果不能让人眼前一亮，最起码也要让人眼前一黑。

贰猹

草

点击查看更新记录

更新记录

2022-12-25:标题样式移至新文

给试做作品发编制
标题样式魔改

点击查看参考教程

参考方向	教程原贴
参考了UI风格和配色样式	Neon-Space-Rainmeter
参考了UI风格和配色样式	JARVIS-Highpitched-OS
fontawesome图标文档	fontawesome
Flex布局参数解释	Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画	CSS3实现伪类hover离开时平滑过渡效果示例
CSS伪类实现三角形绘制	纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园
使用clip-path实现多边形剪裁。	不可思议的CSS之clip-path

认真做的文内标题样式魔改

这个标题样式整整花了我三天时间设计。做了两款都因为长标题情况下会被clip-path切割的七零八落而弃用了。最终方案定稿为斜面切割外加角标的形式。参考了以前中二时代配置rainmeter时用过的机械风格主题。具体样式预览如下：

因为标题的样式魔改涉及图标的变动。所以不得不改动主题样式源码。介意的请止步。以下会先给出diff代码块指明改动步骤，第三步是改动的源码部分的内容，方便读者复制。这里的图标可以参考fontawesome文档，选取心仪的图标后点开，能在左上角找到图标的unicode。对应本魔改项目代码最后几行里headStyle('\f085',1)中的\f085。读者可以自行更改喜欢的图标。如果发现图标不显示或者为乱码，可能是你的fontawesome版本问题。例如v5，v6，或者是否为pro。我的建议是，换！换个能显示出来的图标。

修改[Blogroot]\themes\butterfly\source\css\_layout\post.styl,注意缩进。stylus缩进严格。

- beautify()
-   headStyle(fontsize)
-     padding-left: unit(fontsize + 12, 'px')

-     &:before
-       margin-left: unit((-(fontsize + 6)), 'px')
-       font-size: unit(fontsize, 'px')

-     &:hover
-       padding-left: unit(fontsize + 18, 'px')

-   h1,
-   h2,
-   h3,
-   h4,
-   h5,
-   h6
-     transition: all .2s ease-out

-     &:before
-       position: absolute
-       top: calc(50% - 7px)
-       color: $title-prefix-icon-color
-       content: $title-prefix-icon
-       line-height: 1
-       transition: all .2s ease-out
-       @extend .fontawesomeIcon

-     &:hover
-       &:before
-         color: $light-blue

-   h1
-     headStyle(20)

-   h2
-     headStyle(18)

-   h3
-     headStyle(16)

-   h4
-     headStyle(14)

-   h5
-     headStyle(12)

-   h6
-     headStyle(12)
+ :root
+   --title-prefix-color: #fff //标题字体颜色
+   --title-prefix-background: rgba(25,25,25,0.5) //标题背景颜色
+   --title-prefix-shadow: #555555 //标题字体阴影配色
+   --title-prefix-border: rgba(180, 181, 182,0.6) //标题边框配色
+   --title-prefix-icon-color: #f58b49 //标题图标配色
+   --title-prefix-corner-mark-color: #555759 //标题角标字体配色
+   --title-prefix-corner-mark-background: #dd9f58 //标题角标背景配色
+ [data-theme="dark"]
+   --title-prefix-color: #8dc9ef
+   --title-prefix-background: rgba(36, 56, 65,0.5)
+   --title-prefix-shadow: #182238
+   --title-prefix-border: rgba(39, 66, 69,0.6)
+   --title-prefix-icon-color: #004e77
+   --title-prefix-corner-mark-color: #92cef1
+   --title-prefix-corner-mark-background: #37708f

+ beautify()
+   headStyle(icon,level)
+     &:before
+       content: icon
+     &:after
+       content: 'level'+ level
+       height: unit((1.6 - level/10),'em')

+   h1,
+   h2,
+   h3,
+   h4,
+   h5,
+   h6
+     transition: all .2s ease-out
+     width: fit-content
+     width: -moz-fit-content
+     height: fit-content
+     height: -moz-fit-content
+     min-width: 8em
+     min-height: 2em
+     clip-path: polygon(0 0,calc(100% - 1em) 0,100% 1em,100% 100%,1em 100%,0 calc(100% - 1em))
+     padding: 0px 1.5em  
+     color: var(--title-prefix-color)
+     background: var(--title-prefix-background)
+     text-shadow: 3px 4px var(--title-prefix-shadow)
+     border: 3px solid var(--title-prefix-border)
+     &:before
+       position: absolute
+       bottom: 0.6em
+       left: 0.2em
+       color: var(--title-prefix-icon-color)
+       line-height: 1
+       transition: all .2s ease-out
+       @extend .fontawesomeIcon
+     &:after
+       position: absolute
+       font-size: 12px
+       padding: 0px 0px 0px 20px
+       background: var(--title-prefix-corner-mark-background)
+       font-family: "SAOUI"
+       text-shadow: none
+       line-height: 1em
+       color: var(--title-prefix-corner-mark-color)
+       width: 40px
+       display: flex
+       align-items: center
+       bottom: -3px
+       right: -3px
+       clip-path: polygon(15px 0,100% 0,100% 100%,0 100%)


+     &:hover
+       &:after
+         transition: all .2s ease-out
+         text-shadow: 1px 1px #efefef

+   h1
+     headStyle("\f2db",1)
+   h2
+     headStyle("\f085",2)  
+   h3
+     headStyle("\f5d2",3)
+   h4
+     headStyle("\f233",4)
+   h5
+     headStyle("\f135",5)
+   h6
+     headStyle("\f1de",6)

以下是改动部分的代码的内容，不是全文。注意，不是全文！

:root
  --title-prefix-color: #fff //标题字体颜色
  --title-prefix-background: rgba(25,25,25,0.5) //标题背景颜色
  --title-prefix-shadow: #555555 //标题字体阴影配色
  --title-prefix-border: rgba(180, 181, 182,0.6) //标题边框配色
  --title-prefix-icon-color: #f58b49 //标题图标配色
  --title-prefix-corner-mark-color: #555759 //标题角标字体配色
  --title-prefix-corner-mark-background: #dd9f58 //标题角标背景配色
[data-theme="dark"]
  --title-prefix-color: #8dc9ef
  --title-prefix-background: rgba(36, 56, 65,0.5)
  --title-prefix-shadow: #182238
  --title-prefix-border: rgba(39, 66, 69,0.6)
  --title-prefix-icon-color: #004e77
  --title-prefix-corner-mark-color: #92cef1
  --title-prefix-corner-mark-background: #37708f

beautify()
  headStyle(icon,level)
    &:before
      content: icon
    &:after
      content: 'level'+ level
      height: unit((1.6 - level/10),'em')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out
    width: fit-content
    width: -moz-fit-content
    height: fit-content
    height: -moz-fit-content
    min-width: 8em
    min-height: 2em
    clip-path: polygon(0 0,calc(100% - 1em) 0,100% 1em,100% 100%,1em 100%,0 calc(100% - 1em))
    padding: 0px 1.5em  
    color: var(--title-prefix-color)
    background: var(--title-prefix-background)
    text-shadow: 3px 4px var(--title-prefix-shadow)
    border: 3px solid var(--title-prefix-border)
    &:before
      position: absolute
      bottom: 0.6em
      left: 0.2em
      color: var(--title-prefix-icon-color)
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon
    &:after
      position: absolute
      font-size: 12px
      padding: 0px 0px 0px 20px
      background: var(--title-prefix-corner-mark-background)
      font-family: "SAOUI"
      text-shadow: none
      line-height: 1em
      color: var(--title-prefix-corner-mark-color)
      width: 40px
      display: flex
      align-items: center
      bottom: -3px
      right: -3px
      clip-path: polygon(15px 0,100% 0,100% 100%,0 100%)


    &:hover
      &:after
        transition: all .2s ease-out
        text-shadow: 1px 1px #efefef

  h1
    headStyle("\f2db",1)
  h2
    headStyle("\f085",2)  
  h3
    headStyle("\f5d2",3)
  h4
    headStyle("\f233",4)
  h5
    headStyle("\f135",5)
  h6
    headStyle("\f1de",6)