Add support for responsive design to tasks and documents

[fujiwara-e]

修正内容

1. モバイル環境で，ヘッダーが表示されない問題を修正
2. 文書一覧画面でソートや検索部分の UI が崩れる問題
3. 文書一覧画面のグリッドレイアウトの修正
4. 文書一覧画面の各文書のコンポーネント (文書カード) の UI を調整
5. 全体的な色味を調整
6. <style> 部分を stylesheets/ 以下に切り分け
7. タスク一覧画面のグリッドレイアウトの修正
8. todoのみ→完了済タスクも表示

修正方法

1. importmapでbootstrapのjavascriptを有効にし，ハンバーガーメニューを追加
   [bootstrap-rubygem リポジトリ https://github.com/twbs/bootstrap-rubygem] を参考
2. ソート項目はプルダウンメニューにまとめた．検索機能は，アイコンを押すとウィンドウが開くようにした．
   これに加えて，モバイル環境下で文書追加ボタンが出てない (おそらく画面外にはみ出す) 部分も修正
   検索機能，文書追加はボタンの UI を変更
3. 文書一覧画面で文書が一行一列で表示されていた部分を，一行三列に変更
   レスポンシブに対応させ，モバイル環境なら一行二列
   全画面表示で15個，画面分割(半分) で10個のカード表示
4. 文書カードのどの要素にカーソルが当たっているか表示できるようにした．
5. Bootstrap で定義されている色を利用するようにした．また，独自で設定した色は，application.scss で上書きするようにした．
6. 各 scss ファイルにまとめるようにした．
7. 文書一覧画面と同様に，一行三列に変更，レスポンシブ対応，ソートおよび検索のプルダウン表示
   スタイルは，tasks.scss にまとめた
8. デフォルトは，todo のみが表示されている状態にし，チェックを入れると全てのタスクが表示されるようにした．