整理黑历史 & flex实现小标题右对齐

  前半篇是日记。
  需要小标题右对齐参考的话直接进入正文界面后点击左边的目录跳转即可ヾ(*´∀`*)ノ


.+†+.

  昨天晚上在草莓县版聊“16岁的时候你在干嘛”。
  然后就去翻了一圈初高中时期写过的东西,发现移动硬盘里只有15年以后的数据,更早的要在我之前用的小U盘里。
  然后去新浪博客翻了一圈,发现当初写的镜音同人居然被吞了一半……hello?14岁幼女写的R18招你惹你了?

  一圈翻下来最大的感觉就是,抑郁症简直毁掉了我作为天才少女的一生……
  其实说抑郁症毁掉我也不确切,精神分裂和强迫症的苗头自小就有,实际上毁掉我自己的还是我自己。就像在炉心融解那篇同人里写的一样,我从小的成长模式几乎就是“让一个新的自我去杀死旧的自我以此完成蜕变”,而这种自我杀戮的模式也正是我创作的源泉。只不过在抑郁症的影响下这种模式出现了断链,先是旧人格在新人格养成之前就自我崩坏,随后终于生成的新人格似乎也对这种原始的自相残杀模式开始抱有怀疑,不再杀死救人格,而是作为一个看护者与幼稚的旧人格共生,只在必要时刻才会出现。
  所以现在打字的我又是哪一个我呢?

  以及昨天版聊的时候被烧鸡说像兔子,第一反应果然又是小三郎……
  虽然嘴上说着我是猫系少女,但果然我绝大多数的时间都还是没有猫的桀骜和坦然,还是狡兔三窟的缜密更加符合我的设定吧。
  果然我是注定没法伪装成凡人的啊【闭嘴

flex实现小标题右对齐

  在整理旧文的时候想办法捣鼓出了小标题右对齐,是用flex实现的,不过这种方法容易造成其它页面的排版错误,所以我是把css代码单独插在每个页面的上方。
  为了保持页面整洁这篇文章并没有用到小标题右对齐,实现的范例在这里:
  巫殇·森 - Witch in the Forest
  然后是代码↓

主界面css样式

1
2
3
4
5
6
7
8
9
10
11
12
.post-block {
max-width: 95%;
margin: auto;
}
.posts-expand .post-body h2,
.posts-expand .post-body h3,
.posts-expand .post-body h4,
.posts-expand .post-body h5,
.posts-expand .post-body h6 {
padding-top: 0px;
margin-top: 20px;
}

  ↑复制以上内容添加到custom.styl
  第一段是调整正文宽度,第二段是在小标题上加一行空行,可以按需求修改/删除。但是magin:auto是用来居中元素的,如果删掉这一行可能会出现启用flex之后正文内容偏移的现象,建议保留。

正文追加css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>.posts-expand .post-body {
display: inline-flex !important;
flex-direction:column;
align-items:flex-end;
}
.posts-expand .post-body p,
.posts-expand .post-body center {
width: 100%
}
.posts-expand .post-body h3 {
font-size: 16px;
display:inline-block;
padding: 3px 10px 3px 20px;
border-radius: 20px 0 0 20px;
background: rgba(255,255,255,.5);
box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
</style>

  ↑复制以上内容添加到markdown正文中
  注意<style>标签与正文之间不可以有任何其它的html/段落标签,否则会导致样式应用错误,最好是放在<!--more-->标签的后面。