プレゼンテーションモードを良い感じにするUserCSS
元々のスタイルの微妙な点
>
字がでかい
特にタイトルが妙にでかい
タイトルとその下の行間が狭い
画像を左右中央に表示したい
文字色を変える？
ドットの色を変える？
スライド側の問題もある
タイトルの文字数の目安
24文字以下
一応30文字までは改行されない
1行の文字数の目安
30文字以下
1枚のスライドにダラダラ書きすぎずに、ポンポン切り替えるほうが良いかも
style.css.app.presentation {
/* --page-bg: #f3f3f3; /* 作業用 */
.line {
font-size: clamp(3rem, (100vw - 36rem) * 0.0625, 4rem); /* 画面幅[84,116]rem */
line-height: 160%;
&.section-title {
font-size: clamp(3rem, (100vw - 36rem) * 0.0625, 5rem);
font-weight: 500;
color: #312e81;
margin-bottom: 6rem;
}
.indent-mark .dot {
background-color: #d4d4d4;
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-\* スライド内の
[*** 太字] 参考