From 58f82fe7f657e4e55bd25cc8468d78a3650d3554 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Thu, 21 Mar 2024 07:33:31 +0900
Subject: [PATCH] =?UTF-8?q?[project-redisign-help-dialog]=20=E3=83=98?=
 =?UTF-8?q?=E3=83=AB=E3=83=97=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0?=
 =?UTF-8?q?=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E6=9C=80?=
 =?UTF-8?q?=E7=B5=82=E8=AA=BF=E6=95=B4=20(#1905)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* a要素のfocus時のoutlineのデザインを合わせる

* 背景・枠線のスタイルを統一

* 見出し1のフォントサイズを少し増加

* 最大幅・中央揃えを設定
---
 src/components/base/BaseDocumentView.vue             | 4 ++++
 src/components/template/HelpLibraryPolicySection.vue | 4 +++-
 src/components/template/HelpMarkdownViewSection.vue  | 2 ++
 src/components/template/HelpOssLicenseSection.vue    | 2 ++
 src/components/template/HelpUpdateInfoSection.vue    | 5 +++--
 src/styles/mixin.scss                                | 2 +-
 6 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/base/BaseDocumentView.vue b/src/components/base/BaseDocumentView.vue
index 960140cd90..e3ef46a04f 100644
--- a/src/components/base/BaseDocumentView.vue
+++ b/src/components/base/BaseDocumentView.vue
@@ -60,6 +60,10 @@
 
   :deep(a) {
     color: colors.$display-link;
+
+    &:focus-visible {
+      @include mixin.on-focus;
+    }
   }
 
   :deep(img) {
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index bcd58499f7..42ef4e2d83 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -134,10 +134,10 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
+  background-color: colors.$background;
 }
 
 .container-detail {
-  border-left: 1px solid colors.$border;
   background-color: colors.$surface;
 }
 
@@ -146,6 +146,8 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   flex-direction: column;
   padding: vars.$padding-2;
   gap: vars.$gap-1;
+  max-width: 960px;
+  margin: auto;
 }
 
 .title {
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 858548dc39..61531e1424 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -44,5 +44,7 @@ onMounted(async () => {
 
 .inner {
   padding: vars.$padding-2;
+  max-width: 960px;
+  margin: auto;
 }
 </style>
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index f2392b4497..05fd702a0c 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -76,6 +76,8 @@ const selectLicenseIndex = (index: number | undefined) => {
   flex-direction: column;
   padding: vars.$padding-2;
   gap: vars.$gap-1;
+  max-width: 960px;
+  margin: auto;
 }
 
 .title {
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index 01059c1217..a40c565c40 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -65,12 +65,13 @@ const props =
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
+  background-color: colors.$surface;
 }
 
 .inner {
   padding: vars.$padding-2;
-  background-color: colors.$surface;
+  max-width: 960px;
+  margin: auto;
 }
 
 .info {
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 4c684b7853..48c33d30a2 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -6,7 +6,7 @@
 
 // 見出し1(h1)用のスタイル
 @mixin headline-1 {
-  font-size: 1.5rem;
+  font-size: 1.75rem;
   font-weight: 600;
   line-height: 2;
   margin: 0;