動画を並べて表示する記法

inspired by

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

/* .line .deco-\| video.video { object-fit: contain; margin: 0 } */

.line .deco-\| .iframe-video-player iframe { object-fit: contain; margin: 0 }

code:style.css!

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

.line .level-6 .deco-\| > span { width: calc(100%/6) }

.line .level-7 .deco-\| > span { width: calc(100%/7) }

.line .level-8 .deco-\| > span { width: calc(100%/8) }

.line .level-9 .deco-\| > span { width: calc(100%/9) }

.line .level-10 .deco-\| > span { width: calc(100%/10) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

/* 文字サイズ固定化 */

.line .deco-\|.deco-\* > span{ font-size: 15px; line-height: 15px;}