优化首页 Hero、时间轴、卡片与顶栏响应式导航

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: linyn-zero

src/components/Card.astro

@@ -11,8 +11,8 @@ const { backgroundColor, icon = "🚀", title } = Astro.props;
 <div class="card-box">
   <div class="card-title-line">
     <div class="card-icon">{icon}</div>
+    <div class="card-title">{title}</div>
   </div>
-  <div class="card-title">{title}</div>
   <div class="card-content">
     <slot />
   </div>
@@ -51,8 +51,11 @@ const { backgroundColor, icon = "🚀", title } = Astro.props;
   }
 
   .card-title {
+    flex: 1;
+    min-width: 0;
     font-size: 16px;
     font-weight: bold;
+    line-height: 1.3;
   }
 
   .card-icon {

src/components/CardContainer.astro

@@ -9,7 +9,19 @@
 <style>
   .card-container {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 20px;
   }
+
+  @media (max-width: 1080px) {
+    .card-container {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 560px) {
+    .card-container {
+      grid-template-columns: 1fr;
+    }
+  }
 </style>

src/components/HomeHero.astro

@@ -7,21 +7,21 @@ import DarkLightButton from "@/components/DarkLightButton.astro";
 interface Props {
   title: string;
   subtitle: string;
+  rampLabel: string;
+  rampHref: string;
   primaryLabel: string;
   primaryHref: string;
-  secondaryLabel?: string;
-  secondaryHref?: string;
   tertiaryLabel: string;
   tertiaryHref: string;
 }
 
 const {
   title,
   subtitle,
+  rampLabel,
+  rampHref,
   primaryLabel,
   primaryHref,
-  secondaryLabel,
-  secondaryHref,
   tertiaryLabel,
   tertiaryHref,
 } = Astro.props;
@@ -30,12 +30,8 @@ const {
 <Fragment>
   <HomeTitle title={title} subtitle={subtitle} />
   <ButtonGroup>
-    <Button href={primaryHref}>{primaryLabel}</Button>
-    {
-      secondaryLabel && secondaryHref ? (
-        <DarkLightButton href={secondaryHref}>{secondaryLabel}</DarkLightButton>
-      ) : null
-    }
+    <Button href={rampHref}>{rampLabel}</Button>
+    <DarkLightButton href={primaryHref}>{primaryLabel}</DarkLightButton>
     <DarkLightButton href={tertiaryHref}>{tertiaryLabel}</DarkLightButton>
   </ButtonGroup>
 </Fragment>

src/components/HomeTimelineSection.astro

@@ -1,6 +1,6 @@
 ---
 import type { SiteLang } from "@/lib/blog";
-import { renderNewsBody, type NewsEntry } from "@/lib/news";
+import { getNewsExcerpt, renderNewsBody, type NewsEntry } from "@/lib/news";
 import Button from "@/components/Button.astro";
 
 interface Props {
@@ -52,7 +52,10 @@ const text = copy[lang];
               <time class="timeline-date" datetime={item.date.toISOString()}>
                 {item.rawDate}
               </time>
-              <p class="timeline-body" set:html={renderNewsBody(item.body)} />
+              <p
+                class="timeline-body"
+                set:html={renderNewsBody(getNewsExcerpt(item.body))}
+              />
             </div>
             <div class="timeline-axis" aria-hidden="true">
               <span class="timeline-node" />
@@ -73,6 +76,7 @@ const text = copy[lang];
     padding: clamp(1.6rem, 4vw, 2.8rem);
     border-radius: 2.25rem;
     border: 1px solid var(--border-color);
+    overflow: visible;
     background:
       radial-gradient(
         circle at top left,
@@ -127,15 +131,17 @@ const text = copy[lang];
     padding: 0;
     margin: 1rem 0 0;
     display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(10, minmax(0, 1fr));
     gap: 0.9rem;
     position: relative;
     align-items: center;
+    overflow: visible;
   }
 
   .timeline-list::before {
     content: "";
     position: absolute;
+    z-index: 0;
     left: 0;
     right: 0;
     top: 50%;
@@ -150,27 +156,41 @@ const text = copy[lang];
   }
 
   .timeline-item {
+    grid-column: span 2;
     min-width: 0;
     display: grid;
-    grid-template-rows: 1fr 28px 1fr;
+    grid-template-rows: minmax(5.5rem, 1fr) 28px minmax(5.5rem, 1fr);
     position: relative;
+    overflow: visible;
   }
 
   .timeline-entry {
     display: grid;
     gap: 0.45rem;
-    align-content: end;
-    min-height: 104px;
-    padding: 0.35rem 0.2rem;
+    min-height: 0;
+    padding: 0.2rem 0.35rem 0.2rem 0;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    width: calc(150% + 0.9rem);
+    max-width: none;
+    pointer-events: auto;
   }
 
   .timeline-item-reverse .timeline-entry {
     grid-row: 3;
+    align-self: start;
     align-content: start;
   }
 
   .timeline-item:not(.timeline-item-reverse) .timeline-entry {
     grid-row: 1;
+    align-self: end;
+    align-content: end;
+  }
+
+  .timeline-item:last-child .timeline-entry {
+    width: 100%;
   }
 
   .timeline-date {
@@ -205,9 +225,11 @@ const text = copy[lang];
   .timeline-axis {
     grid-row: 2;
     position: relative;
+    z-index: 2;
     display: flex;
     justify-content: center;
     align-items: center;
+    pointer-events: none;
   }
 
   .timeline-axis::before,
@@ -250,23 +272,7 @@ const text = copy[lang];
     display: none;
   }
 
-  @media (max-width: 1180px) {
-    .timeline-list {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-  }
-
-  @media (max-width: 980px) {
-    .timeline-list {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .timeline-item:nth-child(n + 5) {
-      display: none;
-    }
-  }
-
-  @media (max-width: 820px) {
+  @media (max-width: 1200px) {
     .timeline-list {
       min-width: 0;
       display: grid;
@@ -296,6 +302,7 @@ const text = copy[lang];
 
     .timeline-item,
     .timeline-item-reverse {
+      grid-column: auto;
       min-width: 0;
       grid-template-columns: 24px minmax(0, 1fr);
       grid-template-rows: auto;
@@ -313,11 +320,18 @@ const text = copy[lang];
     .timeline-item-reverse .timeline-entry {
       grid-column: 2;
       grid-row: auto;
+      width: 100%;
+      max-width: none;
       min-height: auto;
+      align-self: auto;
       align-content: start;
       padding: 0 0 1rem;
     }
 
+    .timeline-item:last-child .timeline-entry {
+      width: 100%;
+    }
+
     .timeline-axis,
     .timeline-item-reverse .timeline-axis {
       grid-column: 1;

src/components/Topbar.astro

@@ -18,9 +18,10 @@ const translatePath = useTranslatedPath(lang);
 
 interface Props {
   logoText?: string;
+  menuLabel?: string;
 }
 
-const { logoText = "YatCC AI" } = Astro.props;
+const { logoText = "YatCC AI", menuLabel = "Menu" } = Astro.props;
 ---
 
 <header class="topbar-container">
@@ -37,11 +38,20 @@ const { logoText = "YatCC AI" } = Astro.props;
     </div>
 
     <div class="nav-right">
-      <div class="nav-items">
+      <div class="nav-items nav-items--desktop">
         <slot name="nav-items" />
       </div>
 
-      <div class="divider"></div>
+      <div class="nav-overflow">
+        <NavDropdown>
+          <div slot="title">{menuLabel}</div>
+          <div class="nav-overflow-panel">
+            <slot name="nav-overflow" />
+          </div>
+        </NavDropdown>
+      </div>
+
+      <div class="divider nav-divider--desktop"></div>
 
       <NavDropdown>
         <div class="language-icon" slot="title">
@@ -158,8 +168,34 @@ const { logoText = "YatCC AI" } = Astro.props;
       background-color: rgba(255, 255, 255, 0.1);
     }
 
-    @media (max-width: 760px) {
-      .nav-items {
+    .nav-overflow {
+      display: none;
+    }
+
+    .nav-items--desktop {
+      display: flex;
+      align-items: center;
+    }
+
+    .nav-overflow-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+      min-width: 13.5rem;
+      max-height: min(70vh, 32rem);
+      overflow-y: auto;
+    }
+
+    @media (max-width: 1200px) {
+      .nav-items--desktop {
+        display: none;
+      }
+
+      .nav-overflow {
+        display: inline-block;
+      }
+
+      .nav-divider--desktop {
         display: none;
       }
     }