refactor: styles management update

src/styles/index.css

@@ -1,10 +1,24 @@
+/**
+ * 全局样式入口
+ * 按 SMACSS 精简版架构组织导入顺序
+ */
+
+/* ===== 1. 字体 ===== */
 @import '@fontsource-variable/noto-sans-sc';
 @import '@fontsource-variable/noto-sans-jp';
 @import '@fontsource-variable/noto-sans';
+
+/* ===== 2. Tailwind CSS ===== */
 @import 'tailwindcss';
-@import './theme.css';
+
+/* ===== 3. 主题变量 ===== */
+@import './theme/index.css';
+
+/* ===== 4. Tailwind 配置 ===== */
 @import './tailwind-settings.css';
-@import './components/article/index.css';
-@import './components/navbar.css';
-@import './components/dock.css';
+
+/* ===== 5. 组件样式模块 ===== */
+@import './modules/index.css';
+
+/* ===== 6. 工具类 ===== */
 @import './utilities/text-utilities.css';

src/styles/components/article/article-layout.css → src/styles/modules/article/article-layout.css

@@ -1,4 +1,8 @@
-/* 文章布局样式 - 容器、侧边栏、主体 */
+/**
+ * 文章布局样式
+ * 包含容器、侧边栏、主体区域的布局规则
+ */
+
 @layer components {
     .solitude-article-container {
         width: 100%;

src/styles/components/article/article-meta.css → src/styles/modules/article/article-meta.css

@@ -1,4 +1,8 @@
-/* 文章头部元信息样式 */
+/**
+ * 文章头部元信息样式
+ * 包含标题区域、标签、日期等的布局和响应式规则
+ */
+
 @layer components {
     .solitude-article-meta {
         height: 400px;

src/styles/components/article/article-toc.css → src/styles/modules/article/article-toc.css

@@ -1,4 +1,8 @@
-/* 文章目录（Table of Contents）样式 */
+/**
+ * 文章目录（Table of Contents）样式
+ * 侧边栏目录导航的布局和交互规则
+ */
+
 @layer components {
     .toc-wrapper {
         position: sticky;

src/styles/modules/article/content/blockquote.css

@@ -0,0 +1,37 @@
+/**
+ * 文章引用块样式 (blockquote)
+ */
+
+@layer components {
+    .solitude-article-content blockquote {
+        margin: 1rem 0;
+        padding: 0.75rem 1rem;
+        border-left: 3px solid var(--article-content-blockquote-border);
+        background: var(--article-content-blockquote-bg);
+        border-radius: 0 6px 6px 0;
+    }
+
+    .solitude-article-content blockquote p {
+        color: var(--article-content-blockquote-text);
+        font-style: italic;
+        margin: 0;
+    }
+
+    /* 768px (md) */
+    @media (min-width: 768px) {
+        .solitude-article-content blockquote {
+            margin: 1.25rem 0;
+            padding: 0.875rem 1.25rem;
+            border-left-width: 4px;
+            border-radius: 0 8px 8px 0;
+        }
+    }
+
+    /* 1024px (lg) */
+    @media (min-width: 1024px) {
+        .solitude-article-content blockquote {
+            margin: 1.5rem 0;
+            padding: 1rem 1.5rem;
+        }
+    }
+}

src/styles/modules/article/content/code.css

@@ -0,0 +1,124 @@
+/**
+ * 文章代码样式 (code, pre, Shiki)
+ */
+
+@layer components {
+    /* 行内代码 */
+    .solitude-article-content code {
+        font-family:
+            'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
+        font-size: 0.85em;
+        padding: 0.15em 0.35em;
+        background: var(--article-content-code-bg);
+        border-radius: 4px;
+        color: var(--article-content-code);
+    }
+
+    /* 代码块 */
+    .solitude-article-content pre {
+        margin: 1rem 0;
+        padding: 1rem;
+        background: var(--article-content-pre-bg);
+        border-radius: 8px;
+        overflow-x: auto;
+        border: 1px solid var(--article-content-pre-border);
+    }
+
+    .solitude-article-content pre code {
+        background: transparent;
+        padding: 0;
+        color: var(--article-content-text);
+        font-size: 0.85rem;
+        line-height: 1.6;
+    }
+
+    /* Shiki 代码块 */
+    .solitude-article-content pre.shiki {
+        margin: 1rem 0;
+        padding: 1rem;
+        border-radius: 8px;
+        overflow-x: auto;
+        border: 1px solid var(--article-content-pre-border);
+    }
+
+    .solitude-article-content pre.shiki code {
+        background: transparent;
+        padding: 0;
+        font-size: 0.85rem;
+        line-height: 1.6;
+    }
+
+    /* Shiki 双主题 - 亮色 */
+    .solitude-article-content pre.shiki,
+    .solitude-article-content pre.shiki span {
+        color: var(--shiki-light) !important;
+        background-color: var(--shiki-light-bg) !important;
+    }
+
+    /* Shiki 双主题 - 暗色 */
+    .dark .solitude-article-content pre.shiki,
+    .dark .solitude-article-content pre.shiki span {
+        color: var(--shiki-dark) !important;
+        background-color: var(--shiki-dark-bg) !important;
+    }
+
+    /* 768px (md) */
+    @media (min-width: 768px) {
+        .solitude-article-content code {
+            font-size: 0.875em;
+            padding: 0.175em 0.375em;
+        }
+
+        .solitude-article-content pre {
+            margin: 1.25rem 0;
+            padding: 1.125rem;
+            border-radius: 10px;
+        }
+
+        .solitude-article-content pre code {
+            font-size: 0.9rem;
+            line-height: 1.65;
+        }
+
+        .solitude-article-content pre.shiki {
+            margin: 1.25rem 0;
+            padding: 1.125rem;
+            border-radius: 10px;
+        }
+
+        .solitude-article-content pre.shiki code {
+            font-size: 0.9rem;
+            line-height: 1.65;
+        }
+    }
+
+    /* 1024px (lg) */
+    @media (min-width: 1024px) {
+        .solitude-article-content code {
+            font-size: 0.9em;
+            padding: 0.2em 0.4em;
+        }
+
+        .solitude-article-content pre {
+            margin: 1.5rem 0;
+            padding: 1.25rem;
+            border-radius: 12px;
+        }
+
+        .solitude-article-content pre code {
+            font-size: 0.95rem;
+            line-height: 1.7;
+        }
+
+        .solitude-article-content pre.shiki {
+            margin: 1.5rem 0;
+            padding: 1.25rem;
+            border-radius: 12px;
+        }
+
+        .solitude-article-content pre.shiki code {
+            font-size: 0.95rem;
+            line-height: 1.7;
+        }
+    }
+}

src/styles/modules/article/content/container.css

@@ -0,0 +1,51 @@
+/**
+ * 文章内容容器样式
+ */
+
+@layer components {
+    .solitude-article-content {
+        padding-top: 2rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    @media (min-width: 640px) {
+        .solitude-article-content {
+            padding-top: 2.5rem;
+            padding-left: 2rem;
+            padding-right: 2rem;
+        }
+    }
+
+    @media (min-width: 768px) {
+        .solitude-article-content {
+            padding-top: 3rem;
+            padding-left: 4rem;
+            padding-right: 4rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .solitude-article-content {
+            padding-top: 3.5rem;
+            padding-left: 8rem;
+            padding-right: 8rem;
+        }
+    }
+
+    @media (min-width: 1280px) {
+        .solitude-article-content {
+            padding-left: 12rem;
+            padding-right: 12rem;
+        }
+    }
+
+    @media (min-width: 1536px) {
+        .solitude-article-content {
+            padding-left: 15rem;
+            padding-right: 15rem;
+        }
+    }
+}