first commit

src/styles/_typography.scss

@@ -0,0 +1,86 @@
+:root {
+  --font-sans: 'Noto Serif SC', 'Source Han Serif SC', Georgia, serif;
+  --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  --text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem);
+  --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
+  --text-base: clamp(0.938rem, 0.89rem + 0.24vw, 1rem);
+  --text-md: clamp(1.05rem, 0.99rem + 0.3vw, 1.125rem);
+  --text-lg: clamp(1.15rem, 1.06rem + 0.45vw, 1.25rem);
+  --text-xl: clamp(1.3rem, 1.16rem + 0.7vw, 1.5rem);
+  --text-2xl: clamp(1.55rem, 1.34rem + 1.05vw, 1.875rem);
+  --text-3xl: clamp(1.85rem, 1.52rem + 1.65vw, 2.25rem);
+  --text-4xl: clamp(2.15rem, 1.7rem + 2.25vw, 3rem);
+  --text-5xl: clamp(2.6rem, 1.9rem + 3.5vw, 3.75rem);
+
+  --leading-none: 1;
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.6;
+  --leading-relaxed: 1.75;
+  --leading-loose: 2;
+
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.04em;
+  --tracking-wider: 0.08em;
+  --tracking-widest: 0.12em;
+}
+
+/* 分级标题 */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  color: var(--ink);
+  margin-bottom: var(--space-sm);
+}
+
+h1 {
+  font-size: var(--text-4xl);
+  margin-bottom: var(--space-lg);
+}
+
+h2 {
+  font-size: var(--text-3xl);
+  padding-left: var(--space-md);
+  border-left: 3px solid var(--accent);
+  margin-bottom: var(--space-sm);
+}
+
+h3 {
+  font-size: var(--text-2xl);
+  position: relative;
+  padding-left: var(--space-lg);
+  
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+    opacity: 0.6;
+  }
+}
+
+h4 {
+  font-size: var(--text-xl);
+  color: var(--ink-2);
+}
+
+h5 {
+  font-size: var(--text-lg);
+  color: var(--ink-2);
+}
+
+h6 {
+  font-size: var(--text-base);
+  color: var(--ink-3);
+}