スタイルの修正

[kobayashi-m42]

issueURL

https://github.com/nekochans/qiita-stocker-nuxt/issues/82

Doneの定義

https://github.com/nekochans/qiita-stocker-nuxt/issues/82 の完了条件が満たされていること

スクリーンショット

• モーダル表示時の背景色を薄い色に変更

  

• スマホでストック一覧を表示した際の余白を追加

  

変更点概要

仕様的変更点概要

下記のスタイルを修正。

• モーダル表示時の背景色を薄い色に変更
• スマホでストック一覧を表示した際の余白を追加

Issueとは関係ないが、faviconの表示とOGPの設定も合わせて修正を行った。

技術的変更点概要

• Bulmaをカスタマイズするために、@nuxtjs/bulmaパッケージを削除し、CSSでBulmaを読み込むように変更

• faviconやOGPの画像を配信するために、app/static/assets配下に画像を配置している -> Cloudfrontでの配信を楽にするためにapp/static直下ではなく、app/static/assets配下に画像を配置 -> Cloudfrontでは/assetsにアクセスされた場合、S3バケットの方に振り分けられるように設定 (Cloudfrontの修正は https://github.com/nekochans/qiita-stocker-nuxt/issues/82 で対応済み)

• app/static/assets配下の静的ファイルを配信するために、ローカルからのデプロイスクリプト(deployToS3.js)とbuildspec.ymlを修正

• SEOに必要なタグを追加(nuxt.config.tsにOGPの設定を追加)