セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化する
ページタイトル
code:var.css
.page {
--h1-font-size: calc(1.8666667 * var(--fs-base));
--h1-font-weight: 500;
--h1-font-feature-settings: '';
}
code:style.css
.page {
--line-height: calc(var(--page-font-height) * var(--page-line-height));
--page-padding-top: var(--line-height);
padding-top: var(--page-padding-top);
}
:is(.page, .stream .page) .line-title,
.line.line-title {
font-size: var(--h1-font-size, 1.73em);
line-height: var(--h1-line-height, var(--page-line-height, 42px));
font-weight: var(--h1-font-weight, 500);
font-family:
var(--h1), var(--h1-latin), var(--paragraph-latin), var(--sans-serif-latin),
var(--h1-ja), var(--paragraph-ja), var(--sans-serif-ja),
var(--icons), var(--fallback);
font-feature-settings: var(--h1-font-feature-settings);
color: var(--line-title-color, var(--page-text-color, #000)); & .text {
text-align: center;
text-wrap: balance;
}
}
セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化する
見出し用フォント:
code:import.css
code:var.css
:root {
--h1-latin: "EB Garamond", "Zilla Slab";
--h2-latin: "Zilla Slab";
--h3-latin: "Zilla Slab";
--h4-latin: "Zilla Slab";
}
見出し太字5 / h1
code:style.css
.line:has(.empty-char-index + .level-5) {
&.section-title:not(.line-title),
.line-title + & {
box-sizing: content-box;
position: relative;
--h: calc(2rem * var(--base-line-height));
margin-top: var(--h);
padding-top: 1rem;
padding-bottom: 1rem;
& .text {
text-align: center !important;
text-wrap: balance;
}
&::before {
display: block;
content: "";
/* box-shadow: var(--shadow-box-slipo-bottom-inset); */
position: absolute;
margin-top: var(--h);
--w: calc(100% + var(--page-padding-left) * 2);
top: calc(-2 * var(--h));
left: -49px;
width: var(--w);
height: var(--h);
background-color: var(--body-bg);
border-bottom: var(--border-page-main-top);
}
& .empty-char-index + .level-5 {
/* tiel grandas kiel la titolo de paĝoj */
box-sizing: content-box;
text-wrap: balance !important;
text-transform: var(--tt-h1);
font-size: var(--fs-h1);
font-weight: var(--fw-h1);
font-family: var(--h1-latin, var(--paragraph-latin, var(--sans-serif-latin))), var(--h1-ja, var(--paragraph-ja, var(--sans-serif-ja))), var(--icons), var(--fallback);
font-feature-settings: var(--ffs-h1);
& .text {
display: inline-block;
box-sizing: content-box;
margin: 0;
padding-bottom: calc(var(--fs-base) * var(--h-line-base));
width: 100%;
}
}
}
}
}
見出し太字4 / h2
code:style.css
.line:not(:has(.indent-mark)),
.stream .page .line:not(:has(.indent-mark)) {
&.section-title:not(.line-title):has(.empty-char-index + .level-4),
&.line-title + .line:has(.empty-char-index + .level-4) {
box-sizing: content-box;
position: relative;
--h-border-section: 8px;
margin-top: var(--h-border-section);
--h-padding-section-h3: calc(var(--fs-base) * var(--h-line-base) / 2);
padding-top: var(--h-padding-section-h3);
padding-bottom: var(--h-padding-section-h3);
&::before {
--page-padding-left: 49px;
--w: calc(100% + var(--page-padding-left) * 2);
display: block;
content: "";
width: var(--w);
position: absolute;
top: calc(--section-margin-top);
left: calc(-1 * var(--page-padding-left));
border-top: var(--section-border-top);
}
&.section-title:not(.line-title):has(.level-4) .text {
text-align: center !important;
text-wrap: balance;
}
& .empty-char-index + .level-4 {
& .text {
text-wrap: balance !important;
text-transform: var(--tt-h2);
}
}
}
}
見出し太字3 / h3
code:var.css
.page {
--h3-border: var(--page-layout-unit, 7px) solid var(--accent-color);
}
code:style.css
:is(.line:not(:has(.indent-mark)), .stream .page .line:not(:has(.indent-mark))):has(.empty-char-index + .level-3) {
&.section-title:not(.line-title),
.line-title + & {
box-sizing: content-box;
position: relative;
margin-top: var(--section-margin-top);
padding-top: var(--h3-padding-top);
padding-bottom: var(--h3-padding-top);
border: var(--h3-border);
&::before {
--w: calc(100% + var(--page-padding-left) * 2);
display: block;
content: "";
width: var(--w);
position: absolute;
top: calc(--section-margin-top);
left: calc(-1 * var(--page-padding-left));
border-top: var(--section-border-top);
}
& .level-3 {
& .text {
text-wrap: pretty !important;
text-transform: var(--tt-h3);
}
}
& .empty-char-index + .level-3 {
& .text {
text-wrap: pretty;
text-transform: var(--tt-h4);
}
}
}
見出し太字2 / h4
code:var.css
.page {
--section-margin-top: 4px;
--section-border-top: calc(0.05rem * var(--h-line-base)) solid var(--body-bg);
--h4-padding-top: 0;
}
code:style.css
:is(.line:not(:has(.indent-mark)), .stream .page .line:not(:has(.indent-mark))):has(.empty-char-index + .level-2) {
&.section-title:not(.line-title),
&.line-title
+ .line:has(.empty-char-index + .level-2) {
box-sizing: content-box;
position: relative;
margin-top: var(--section-margin-top);
padding-top: var(--h4-padding-top);
padding-bottom: var(--h4-padding-top);
border: var(--h4-border);
&::before {
--page-padding-left: 49px;
--w: calc(100% + var(--page-padding-left) * 2);
display: block;
content: "";
width: var(--w);
position: absolute;
top: calc(--section-margin-top);
left: calc(-1 * var(--page-padding-left));
border-top: var(--section-border-top);
}
& .empty-char-index + .level-3 {
color: var(--h3-color);
& .text {
text-wrap: pretty;
text-transform: var(--tt-h4);
}
}
}
}
見出し太字4と5
セクション見出し化された太字4（[**** ]）と太字5（[***** ]）を中央寄せにする
code:style.css
:is(.line, .stream .page .line) {
&.section-title:not(.line-title):has(.level-4),
&.line-title + .line:has(.level-4) {
box-sizing: content-box;
position: relative;
--h-border-section: 8px;
margin-top: var(--h-border-section);
--h-padding-section-h3: calc(var(--fs-base) * var(--h-line-base) / 2);
padding-top: var(--h-padding-section-h3);
padding-bottom: var(--h-padding-section-h3);
}
}
太字5は元々ページタイトルとほとんど同じサイズであるから、セクション化に際して表示をページタイトルと合わせて「改ページ」のような表示にする
Cosenseのページタイトルの上下の余白はちょうど本文テキストの一行分
中の人のプロジェクトで言及されていたはず（具体的にどこで言及されていたのかが思い出せない） code:style.css
.line,
.stream .page .line {
&.line-title,
&.line-title + .line:has(.empty-char-index + .level-5),
&.section-title:not(.line-title, .section-0.line-title + .section-title):has(.empty-char-index + .level-5) {
--h: calc(2rem * var(--h-line-base));
margin-top: var(--h);
}
&.section-title:not(.line-title, .line-title + .line):has(.empty-char-index + .level-5)::before {
display: block;
content: "";
position: absolute;
top: calc(-2 * var(--h));
margin-top: var(--h);
height: var(--h);
left: var(--page-padding-left);
--w: calc(100% + var(--page-padding-left) * 2);
width: var(--w);
background-color: var(--body-bg);
border-bottom: var(--page-border-top);
}
}