SyncTimerのレイアウトを変更

開始・リセットボタンとタイマーの表示設定の配置を変更した。

変更前

変更後

変更の目的

そもそも開始ボタンが大きいほうが押しやすくていいのでは、くらいの安易な気持ちでこの配置にしたのだが、

• 表示設定をもうちょっと拡張しようかな、と思い始めたときに「表示設定」がこの位置にあると狭い
• タブレットサイズで表示したときにタイマーと再生ボタンの間に設定が入ってしまう
  • 設定は配信を開始する前に調整するし、一度設定を決めたら基本的には再生とリセットしか押さないはずなので設定が下のほうがいい、と思う

という考えがあり配置を変更することにした。

技術的には難しくなかった。自動的なグリッドレイアウトって便利だねぇ。

Pico.cssのグリッドレイアウトはシンプルに等分配置しかできないし、多段階のレスポンシブではないので融通は利かないけど。 （もっと柔軟なグリッドレイアウトが必要な場合はBootstrapなどの機能を追加する方法が提示されている）