update: Header>decrease height

watasuke102 · Jan 10, 2024 · 589217a · 589217a
1 parent e27b8f7
commit 589217a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git 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
@@ -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;
   }
 }