見出しのデザインを変えるUserCSS
元ソース：/Mijinko/見出しのデザインを変えるUserCSS
配色は全て脱色済み
level-3だけは今まで通りの古いスタイルを使っている
このプロジェクトは/Mijinkoとは違い、きれいなページを作ることを目的とはしていないので
縦に長くなりすぎるのを防ぐためでもある
あくまで見分けがはっきりつけばいい
色設定
code:style.css
body {
--accent-color: #787878;
--accent-color-gray: #676767;
--accent-level-2: #D9D9D9;
--accent-level-3: var(--accent-color);
--accent-level-4: #9e9e9e;
}
共通
code:style.css
/* 見出しの上の間をちょっと空ける */
strong.level {
display: inline-block;
margin-top: .5em;
}
level-4
code:style.css
/* 見出しのデザインを変える（作りかけ） */
strong.level-4 {
display: block;
border-bottom: 3px solid var(--accent-level-4);
padding: 0;
padding-left: 0.5em;
margin-top: -.5em;
margin-bottom: -1em;
}
.cursor-line strong.level-4 {
margin-top: .5em;
margin-bottom: 0em;
}
level-3
code:style.css
strong.level-3 {
border-left: solid 14px var(--accent-color);
padding-left: 11px;
margin-bottom: 6px;
}
level-2
code:style.css
strong.level-2 /* .deco-\* */ {
border-left: solid 4px /*14px*/ var(--accent-level-2);
padding-left: 11px;
margin-bottom: 3px;
}