セクション区切りを可視化する 2

左のオレンジの丸がセクション番号になってます。

を使っているので白地ですが、デフォルトのテーマを使っているとこんな風になる

セクション番号がわかって嬉しい場合ってどんなんよ？ と思わんでもないけど、

プレゼン用のページだったりとか、用語集だったりとか、セクション数字が増えていくと

「がんばったな～」とか「そろそろページを分けたいな」とか考えたりします。それもまたScrapbox。

/* セクション区切りを可視化する (番号) */
.app { counter-reset: section }
.app:not(.presentation) .line.section-title:not(.line-title) { position: relative }
.app:not(.presentation) .line.section-title:not(.line-title):after {
  counter-increment: section;
  content: counter(section);
  display: inline-block; width: 1.6em; height: 1.6em;
  position: absolute; top: 5%; left: -5vw;
  background-color: #f7ca2a; border-radius: 50%;
  color: #fff; font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif;
  text-align: center; white-space: nowrap }