箇条書きのドットの大きさを可変にする
author: Nrem.icon
UserCSS.icon
app.css の箇条書きのドットは絶対値で指定されており、
ページ本文のフォントサイズや行間を変更するとずれる
ドットの中心からの相対的な座標指定ではない
このUserCSSは、これらの要因によるレイアウトずれが起こらないようにする
https://gyazo.com/d7ea750b236611b48112fb777bbed87f
箇条書き記号の縦横が「算出された行の高さ」に等しい時のスクリーンショット
from /nrem-configs/箇条書きのドットの大きさを可変にする
変数--calculated-paragraph-line-heightはfont-size* line-heightと同等
依存先: 画面幅に応じてページの表示スケールを変更するUserCSS
code:style.css
body {
--bullet-list-dot-width: calc(6em / 15);
--bullet-list-dot-height: var(--bullet-list-dot-width);
--list-ellipsis-dot-height: calc(2em / 15);
}
.line .indent-mark {
/* width: 20px; */
width: calc(20em / 15);
height: 1em;
}
.line .indent-mark .dot,
.line .quote .indent-mark .dot {
/* right: 9px; */
right: calc(var(--calculated-pargraph-line-height, 24px) / 2 - var(--bullet-list-dot-width, 6px) / 2);
/* top: 10px; */
top: calc(var(--calculated-paragraph-line-height, 24px) / 2 - var(--bullet-list-dot-height, 6px) / 2 - 1em / 15);
width: var(--bullet-list-dot-width, 6px);
height: var(--bullet-list-dot-height, 6px);
}
.line .indent-mark .pad {
vertical-align: middle;
}
.line.number-list .dot,
.line.quote-line .dot {
right: calc(var(--calculated-paragraph-line-height, 24px) / 2 - var(--list-ellipsis-dot-width, var(--bullet-list-dot-width, 6px)) / 2);
top: calc(var(--calculated-paragraph-line-height, 24px) / 2 - var(--list-ellipsis-dot-height, var(--bullet-list-dot-height, 2px)) / 2 - 1em / 15);
width: var(--list-ellipsis-dot-width, var(--bullet-list-dot-width, 6px));
height: var(--list-ellipsis-dot-height, var(--bullet-list-dot-height, 2px));
border-radius: unset;
}
#UserCSS