プレゼンテーションモードを良い感じにするUserCSS

元々のスタイルの微妙な点

https://gyazo.com/e36a6b071c8bb911943a14b046016cff

字がでかい

特にタイトルが妙にでかい

タイトルとその下の行間が狭い

画像を左右中央に表示したい

文字色を変える？

ドットの色を変える？

スライド側の問題もある

タイトルの文字数の目安

24文字以下

一応30文字までは改行されない

1行の文字数の目安

30文字以下

1枚のスライドにダラダラ書きすぎずに、ポンポン切り替えるほうが良いかも

code:style.css

.app.presentation {

.line {

line-height: 160%;

&.section-title {

font-size: clamp(3rem, (100vw - 36rem) * 0.0625, 5rem);

font-weight: 500;

margin-bottom: 6rem;

}

.indent-mark .dot {

width: 0.7rem;

height: 0.7rem;

}

.modal-image img {

display: block;

margin-inline: auto;

}

}

}

classの対応

.app.presentation .line.section-title

ページのタイトル

.app.presentation .line.line-title

なにこれ

.app.presentation .line

ページ内の行

.app.presentation .line .dot

行頭の黒丸

.app.presentation .deco-\*

参考