feat(frontend): Bootstrapテーマの変数を調整する

[reminjp]

ProblemsのUIのスタイルはほとんどがBootstrapのデフォルトで、これはAtCoderと比べると大きめです。それゆえ、私はProblemsに対して、1画面で表示できる情報が少ない印象を抱いています。

Bootstrapテーマをいじることで上記の問題を解決しつつ、配色も含めて、よりAtCoderもといAtCoder ProblemsらしいUIに改修できないかと考えています。

cf. Theming Bootstrap

[southball]

AtCoder は今 Bootstrap 3.3.6 を使っていますが、Problems は Bootstrap 4.4.1 （yarn.lock には 4.3.1…） を使っていますから、スタイルは大きな差があるかもしれません。

AtCoder の CSS ファイルでこの gist の URL を得た。これを基づいてテーマを作成することができると思います。

表示できる情報を増やすために $table-cell-padding: .5rem; （デフォルトは .75rem）とかの設定を変更すればできると考えています。

[reminjp]

なるほどー

[southball]

今はもう SCSS が使えるので、ライトテーマの色・他の色の変数を変えたいなら変えられます。

例えば、情報密度を上げたいなら、こういうことができます。（どう変えればいいんですかまた分かりませんけど）

// src/style/_common.scss
$spacer: .75rem;
$table-cell-padding: .5rem;

Before:

With $spacer: .75rem; and $table-cell-padding: .5rem;: