セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化する

aaaa

セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化するaaaaAA

aAA

AAA

AA

AA

h1 / ページタイトル

セクション行頭フラグの立った行の先頭にある太字＋をセクション見出し化する

code:import.css

code:var.css

body {

--section-border-color: hsl(from var(--navbar-bg, darkgray) h 15% l / 85%);

--h1-font-size: calc(1.8666667 * var(--page-font-size, 15px));

--h1-font-weight: 500;

--h1-line-height: var(--page-line-height, 42px);

--h1-latin: "EB Garamond", "Source Sans Pro", -apple-system, "Zilla Slab", "Segoe UI Variable Display", "Helvetica", "Arimo";

--h1-ja: "UD Digi Kyokasho NK", "Noto Sans JP";

--h1-font-feature-settings: '';

--h1-text-color: ;

--h2-font-size: ;

--h2-font-weight: ;

--h2-latin: "Source Sans Pro", -apple-system, "Segoe UI Variable Display", "Helvetica", "Arimo", "Inter Variable", "Roboto Flex";

--h2-ja: var(--h1-ja);

--h2-font-feature-settings: '';

--h2-text-color: ;

--h3-font-size: ;

--h3-font-weight: ;

--h3-line-height: var(--page-line-height);

--h3-latin: -apple-system, "Segoe UI Variable Display", "Helvetica", "Arimo", "Inter Variable", "Roboto Flex";

--h3-ja: var(--h2-ja);

--h3-font-feature-settings: '';

--h3-text-color: ;

--h4-font-size: ;

--h4-font-weight: ;

--h4-latin: "Zilla Slab", -apple-system, "Helvetica", "Arimo", "Inter Variable", "Roboto Flex";

--h4-ja: "Yu Gothic Medium", "Noto Sans JP";

--h4-font-feature-settings: '';

--h4-text-color: ;

}

.page {

--virtual-page-margin-top: calc(var(--actual-paragraph-line-height) * 2);

--section-padding-top: var(--page-layout-unit, 7px);

--section-border-top-width: calc(0.05em * var(--actual-paragraph-line-height, 21px));

--section-border-top: var(--section-border-top) solid var(--body-bg);

--h2-border-left: none;

--h2-border-bottom: none;

--h2-border-right: none;

--h3-border-left: var(--page-layout-unit, 7px) solid var(--section-border-color, var(--page-text-color));

--h3-border-bottom: var(--h3-border-bottom-width) solid var(--section-border-color, var(--page-text-color));

--h3-border-bottom-width: var(--page-layout-unit, 7px);

--h3-border-right: none;

--h4-border-left: var(--page-layout-unit, 7px) solid var(--section-border-color, var(--page-text-color));

--h4-border-bottom: none;

--h4-border-right: none;

}

code:style.css

.page {

--page-width: calc(100% + var(--page-padding-left, 42px) + var(--page-padding-right, var(--page-padding-left, 42px)));

--actual-paragraph-line-height: calc(var(--page-font-size) * var(--page-line-height));

}

h1 / ページタイトル

中央寄せにする

Cosenseのページタイトルの上下の余白はちょうど本文テキストの一行分

code:style.css

:is(.page, .stream .page) .line-title,

.line.line-title {

font-size: var(--h1-font-size, 1.73em);

line-height: var(--h1-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, var(--h1-ja)), var(--paragraph-ja), var(--sans-serif-ja), var(--icons, "AppIcons"), var(--fallback);

font-feature-settings: var(--h1-font-feature-settings);

& .text {

text-align: center;

text-wrap: balance;

}

}

h1 / 見出し太字5

太字5は元々ページタイトルとほとんど同じサイズであるから、セクション化に際して表示をページタイトルと合わせて「改ページ」のような表示にする

中央寄せにする

code:style.css

.line:has(.empty-char-index + .level-5),

.line:has(.level-5).section-title:not(.line-title) {

box-sizing: content-box;

--virtual-page-margin-height: calc(var(--virtual-page-margin-top)

+ var(--page-border-top-width));

margin-top: calc(var(--page-padding-bottom)

+ var(--virtual-page-margin-height));

margin-bottom: 0;

--h1-top-height: calc(var(--page-padding-top, var(--page-layout-unit, 7px))

+ var(--actual-paragraph-line-height, 21px));

padding-top: var(--h1-top-height);

padding-bottom: var(--actual-paragraph-line-height, 21px);

&::before {

content: "";

display: block;

position: absolute;

height: var(--virtual-page-margin-height);

top: calc(var(--virtual-page-margin-height) * -1

+ var(--actual-paragraph-line-height, 21px));

width: var(--page-width);

left: calc(var(--page-padding-left, 49px) * -1);

background-color: var(--body-bg);

border-bottom: var(--page-border-top);

}

& .text {

text-align: center !important;

text-wrap: balance;

}

& .level-5 {

/* tiel grandas kiel la titolo de paĝoj */

box-sizing: content-box;

text-transform: var(--h1-text-transform, none);

line-height: var(--h1-line-height, 42px);

font-size: var(--h1-font-size, 1.73em);

font-weight: var(--h1-font-weight, 500);

font-family: var(--h1, var(--h1-latin)), var(--paragraph-latin), var(--sans-serif-latin), var(--h1, var(--h1-ja)), var(--paragraph-ja), var(--sans-serif-ja), var(--icons, "AppIcons"), var(--fallback);

font-feature-settings: var(--h1-font-feature-settings);

& .text {

display: inline-block;

box-sizing: content-box;

padding-top: 0;

padding-bottom: 0;

width: 100%;

}

}

}

h2 / 見出し太字4

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;

margin-top: var(--section-border-top-width);

padding-top: calc(var(--section-padding-top) + var(--actual-paragraph-line-height));

padding-bottom: var(--actual-paragraph-line-height);

&::before {

content: "";

display: block;

position: absolute;

height: var(--section-border-top-width);

width: var(--page-width);

top: calc((var(--section-padding-top-) + var(--section-border-top-width)) * -1);

left: calc(var(--page-padding-left) * -1);

border-bottom: 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);

}

}

}

}

h3 / 見出し太字3

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-border-top-width);

padding-top: var(--section-padding-top);

border-left: var(--h3-border-left);

padding-left: var(--page-layout-unit, 7px);

padding-bottom: var(--page-layout-unit, 7px);

border-bottom: var(--h3-border-bottom);

&::before {

content: "";

display: block;

position: absolute;

height: var(--section-border-top-width);

width: var(--page-width);

top: calc((var(--section-padding-top) + var(--section-border-top-width)) * -1);

left: calc(var(--page-padding-left) * -1);

border-bottom: var(--section-border-top);

}

& .level-3 {

font-size: var(--h3-font-size, 1.44em);

line-height: var(--h3-line-height, 35px);

& .text {

text-wrap: pretty !important;

text-transform: var(--h3-text-transform);

}

}

& .empty-char-index + .level-3 {

& .text {

text-wrap: pretty;

text-transform: var(--h4-text-transform);

}

}

}

h4 / 見出し太字2

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-border-top-width);

padding-top: var(--section-padding-top);

border-left: var(--h4-border-left);

padding-left: var(--page-layout-unit, 7px);

padding-bottom: var(--page-layout-unit, 7px);

border-bottom: var(--h4-border-bottom);

&::before {

content: "";

display: block;

position: absolute;

height: var(--section-border-top-width);

width: var(--page-width);

top: calc((var(--section-padding-top) + var(--section-border-top-width)) * -1);

left: calc(var(--page-padding-left) * -1);

border-bottom: var(--section-border-top);

}

& .level-3 {

color: var(--h3-text-color);

& .text {

text-wrap: pretty;

text-transform: var(--tt-h4);

}

}

}

}