Merge pull request #71 from /issues/61-feat-responsive-header

feat: headerのレスポンシブ対応
SystemEngineeringTeam · Nov 5, 2024 · 613bc67 · 613bc67
2 parents 0997ca0 + 2bb2c5d
commit 613bc67
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/src/app/_components/Header/index.module.scss b/src/app/_components/Header/index.module.scss
@@ -4,19 +4,20 @@
   justify-content: center;
   align-items: center;
 
+  &::after {
+    content: '';
+    display: block;
+    right: min(10%, 200px);
+    left: min(10%, 200px);
+    top: 78px;
+    position: absolute;
+    border-bottom: solid $border-width $on-background-color; /* 線の色と太さを指定 */
+  }
+
   h1 {
     font-size: $font-size-xl;
     padding-top: 30px;
     position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: -30vw; /* 線を左に伸ばす長さ */
-      right: -30vw; /* 線を右に伸ばす長さ */
-      bottom: 0;
-      border-bottom: solid $border-width $on-background-color; /* 線の色と太さを指定 */
-    }
   }
 
   .link {