fix: improve homepage hierarchy and repository link

Author: SamKuler

docs/assets/stylesheets/extra.css

@@ -178,10 +178,8 @@ body {
 }
 
 .ae-hero {
-  display: grid;
-  gap: 1.5rem;
-  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
   margin: 0.5rem 0 2.6rem;
+  max-width: 48rem;
   position: relative;
 }
 
@@ -206,31 +204,43 @@ body {
   text-transform: uppercase;
 }
 
+.ae-hero h1 {
+  margin-top: 0;
+  max-width: 44rem;
+}
+
 .ae-lead {
   font-size: clamp(1rem, 2vw, 1.25rem);
   line-height: 1.75;
   margin: 0;
-  max-width: 44rem;
+  max-width: 38rem;
 }
 
-.ae-hero__panel {
-  align-self: end;
-  background: var(--ae-paper-raised);
-  border: 1px solid var(--ae-ink);
-  box-shadow: var(--ae-shadow);
-  padding: 1.1rem;
+.ae-hero__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1.35rem;
 }
 
 .ae-metrics {
+  border-bottom: 1px solid var(--ae-line);
+  border-top: 1px solid var(--ae-line);
   display: grid;
-  gap: 0.7rem;
-  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 2rem;
+  padding: 0.9rem 0;
 }
 
 .ae-metric {
-  border-left: 2px solid var(--ae-trace);
   min-width: 0;
-  padding-left: 0.65rem;
+}
+
+.ae-metric + .ae-metric {
+  border-left: 1px solid var(--ae-line);
+  padding-left: 1rem;
 }
 
 .ae-metric strong {
@@ -256,7 +266,6 @@ body {
   font-family: "Avenir Next Condensed", "DIN Condensed", sans-serif;
   font-weight: 750;
   gap: 0.5rem;
-  margin-top: 1.2rem;
   padding: 0.65rem 0.95rem;
   text-decoration: none !important;
   transition: transform 130ms ease, box-shadow 130ms ease;
@@ -268,6 +277,16 @@ body {
   transform: translate(2px, 2px);
 }
 
+.ae-route {
+  font-family: "Avenir Next Condensed", "DIN Condensed", sans-serif;
+  font-weight: 750;
+  text-decoration-thickness: 0.1em !important;
+}
+
+.ae-route::after {
+  content: " →";
+}
+
 .ae-path-grid {
   display: grid;
   gap: 0.9rem;
@@ -329,10 +348,6 @@ body {
 }
 
 @media (max-width: 52rem) {
-  .ae-hero {
-    grid-template-columns: 1fr;
-  }
-
   .ae-path-grid {
     grid-template-columns: 1fr;
   }
@@ -344,11 +359,25 @@ body {
   }
 
   .ae-metrics {
-    grid-template-columns: 1fr;
+    gap: 0.45rem;
   }
 
   .ae-metric {
-    padding: 0.25rem 0 0.25rem 0.65rem;
+    padding-left: 0;
+  }
+
+  .ae-metric + .ae-metric {
+    border-left: 0;
+    padding-left: 0;
+  }
+
+  .ae-metric strong {
+    font-size: 1rem;
+  }
+
+  .ae-metric span {
+    font-size: 0.56rem;
+    line-height: 1.35;
   }
 }
 

docs/index.md

@@ -1,20 +1,19 @@
-# 模拟电子技术 30 天双轨自学指南
-
 <div class="ae-hero" markdown>
-<div>
 <p class="ae-kicker">Analog Electronics · Field Notes 01–30</p>
 
-这份指南面向希望在短时间内系统补齐模拟电子技术的学习者。目标是用 30 天建立可计算、可解释、可追问的模拟电路知识框架：每天先守住冲刺轨，再按余力进入深入轨。
+# 模拟电子技术 30 天双轨自学指南
 
+<p class="ae-lead">从电路语言与器件模型出发，建立能计算、能解释、能承受追问的模拟电路知识框架。</p>
+
+<div class="ae-hero__actions">
 <a class="ae-start" href="sprint/week-1/#day-1">开始 Day 1　→</a>
+<a class="ae-route" href="学习路线与使用方法/">先看学习路线</a>
 </div>
 
-<div class="ae-hero__panel">
-<div class="ae-metrics">
-<div class="ae-metric"><strong>30</strong><span>天双轨路线</span></div>
-<div class="ae-metric"><strong>23.4h</strong><span>冲刺轨总时长</span></div>
-<div class="ae-metric"><strong>7</strong><span>章完整教材</span></div>
-</div>
+<div class="ae-metrics" aria-label="课程规模">
+<div class="ae-metric"><strong>30 天</strong><span>连续冲刺路线</span></div>
+<div class="ae-metric"><strong>23.4 h</strong><span>已计时学习任务</span></div>
+<div class="ae-metric"><strong>7 章</strong><span>完整教材与推导</span></div>
 </div>
 </div>
 

mkdocs.yml

@@ -1,5 +1,7 @@
 site_name: 模拟电子技术自学指南
 site_description: 从电路基础到面试表达的 30 天双轨模拟电子技术自学指南
+repo_url: https://github.com/SamKuler/analog-electronics-guide
+repo_name: analog-electronics-guide · Star
 docs_dir: docs
 site_dir: _site
 use_directory_urls: true
@@ -8,6 +10,8 @@ theme:
   name: material
   language: zh
   font: false
+  icon:
+    repo: fontawesome/brands/github
   features:
     - navigation.sections
     - navigation.top

tests/test_rendering_contract.py

@@ -56,6 +56,35 @@ def test_mermaid_fences_use_material_native_renderer(self):
             config,
         )
 
+    def test_header_links_the_public_github_repository(self):
+        config = (ROOT / "mkdocs.yml").read_text(encoding="utf-8")
+
+        self.assertIn(
+            "repo_url: https://github.com/SamKuler/analog-electronics-guide",
+            config,
+        )
+        self.assertIn(
+            "repo_name: analog-electronics-guide · Star",
+            config,
+        )
+        self.assertIn("repo: fontawesome/brands/github", config)
+
+    def test_homepage_hero_separates_actions_from_metrics(self):
+        index = (DOCS / "index.md").read_text(encoding="utf-8")
+        css = (DOCS / "assets" / "stylesheets" / "extra.css").read_text(
+            encoding="utf-8"
+        )
+
+        self.assertIn('class="ae-hero__actions"', index)
+        self.assertIn('class="ae-route"', index)
+        self.assertIn("先看学习路线", index)
+        self.assertNotIn('class="ae-hero__panel"', index)
+        self.assertLess(index.index("ae-hero__actions"), index.index("ae-metrics"))
+        self.assertIn(".ae-hero__actions", css)
+        self.assertIn(".ae-route", css)
+        self.assertIn("border-top: 1px solid var(--ae-line);", css)
+        self.assertIn("border-bottom: 1px solid var(--ae-line);", css)
+
 
 if __name__ == "__main__":
     unittest.main()