diff --git a/src/app/exam/_components/ExamPage/ExamPage.module.scss b/src/app/exam/_components/ExamPage/ExamPage.module.scss index 959a7b21..076875d2 100644 --- a/src/app/exam/_components/ExamPage/ExamPage.module.scss +++ b/src/app/exam/_components/ExamPage/ExamPage.module.scss @@ -9,9 +9,9 @@ margin: -16px; display: flex; width: 100dvw; - height: calc(100dvh - 48px); + height: calc(100dvh - 40px); @media screen and (min-width: 701px) and (max-width: 900px) { - height: calc(100dvh - 84px); + height: calc(100dvh - 68px); } } diff --git a/src/components/features/Header/Header.module.scss b/src/components/features/Header/Header.module.scss index b722ec9c..e13ec9a1 100644 --- a/src/components/features/Header/Header.module.scss +++ b/src/components/features/Header/Header.module.scss @@ -14,9 +14,8 @@ top: 0; z-index: 720; width: 100dvw; - height: 48px; + height: 40px; margin: -15px; - padding: 8px 0; margin-bottom: 16px; display: flex; justify-content: space-around; @@ -27,7 +26,10 @@ } .item { + width: 100%; + height: 100%; display: flex; + justify-content: center; align-items: center; gap: 4px; // padding: 0 12px; @@ -39,11 +41,14 @@ color: $color-fg; background-color: $color-transparent; transition: background-color 0.3s; + &:hover { + background-color: $color-0; + } } .icon { - margin: auto; + margin: auto 0; width: 28px; - height: 100%; + // height: 100%; aspect-ratio: 1 / 1; } @@ -60,15 +65,15 @@ // アイコンと説明が2段になっていたら少しアイコンサイズを増やす @media screen and (min-width: 701px) and (max-width: 900px) { .header { - height: 84px; + height: 68px; } .item { flex-direction: column; text-align: center; + gap: 0; } .icon { - margin: auto; - margin-bottom: 0px; + margin: 0 auto; font-size: 1.3em; } }