Merge pull request 'fix: 避免顶部文字重叠' (#2) from fix/header-overlap into main

src/style.css

@@ -58,24 +58,26 @@ input:focus-visible {
 }
 
 .hero {
-  position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+  row-gap: clamp(20px, 3vw, 38px);
   min-height: 220px;
   padding: 22px 0 30px;
   border-top: 1px solid var(--ink);
 }
 
 .hero__index {
-  position: absolute;
+  grid-column: 1 / -1;
-  top: 22px;
+  grid-row: 1;
-  left: 0;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 11px;
   letter-spacing: 0.14em;
 }
 
 .hero__content {
+  grid-column: 1;
+  grid-row: 2;
   align-self: end;
 }
 
@@ -98,6 +100,8 @@ input:focus-visible {
 }
 
 .hero__mark {
+  grid-column: 2;
+  grid-row: 2;
   align-self: end;
   padding-bottom: 2px;
   font-size: clamp(64px, 9vw, 124px);