初始化

2025-08-19 14:56:38 +08:00
parent 83b8ee11de
commit 9c9387f6c2
45 changed files with 4567 additions and 8 deletions
--- a/src/css/basic.css
+++ b/src/css/basic.css
@@ -0,0 +1,135 @@
+/* ===== 基础重置 ===== */
+*,
+*::before,
+*::after {
+  box-sizing: border-box; /* 使用更直观的盒模型 */
+  margin: 0;
+  padding: 0;
+}
+
+/* ===== 根元素设置 ===== */
+:root {
+  /* 字体设置 */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  'Liberation Mono', 'Courier New', monospace;
+
+  /* 颜色变量 */
+  --color-primary: #3a86ff;
+  --color-secondary: #8338ec;
+  --color-accent: #ff006e;
+  --color-text: #333;
+  --color-light: #f8f9fa;
+  --color-dark: #212529;
+  --color-gray: #6c757d;
+
+  /* 响应式基础大小 */
+  --base-font-size: 16px;
+  --spacing-unit: 1rem;
+
+  /* 过渡动画 */
+  --transition-speed: 0.3s;
+}
+
+/* ===== 基础HTML元素样式 ===== */
+html {
+  scroll-behavior: smooth; /* 平滑滚动 */
+  font-size: var(--base-font-size);
+  line-height: 1.6;
+}
+
+body {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background-color: var(--color-light);
+  -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */
+  text-rendering: optimizeLegibility;
+  overflow-x: hidden;
+}
+
+/* ===== 排版元素 ===== */
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+  margin-bottom: var(--spacing-unit);
+  font-weight: 700;
+}
+
+p {
+  margin-bottom: var(--spacing-unit);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--transition-speed);
+}
+
+a:hover {
+  color: var(--color-secondary);
+  text-decoration: underline;
+}
+
+/* ===== 表单元素 ===== */
+input,
+button,
+textarea,
+select {
+  font: inherit; /* 继承字体设置 */
+  margin: 0;
+}
+
+button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+/* ===== 图片和媒体 ===== */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* ===== 实用工具类 ===== */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 calc(var(--spacing-unit) * 1.5);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ===== 响应式媒体查询 ===== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --base-font-size: 16px;
+  }
+}