From c0f5ddd7a2667d2a1eac66d2c3c43f254e2d5210 Mon Sep 17 00:00:00 2001 From: Theo Date: Mon, 20 Jan 2025 16:10:35 +0800 Subject: [PATCH] feat: use em as the relative unit and add variables in "components-var". (#225) --- docs/.vitepress/configs/nav.ts | 6 +-- docs/.vitepress/configs/sidebar.ts | 26 ++++++------ docs/guide/announcement.md | 22 +++++----- docs/guide/docasidelogo.md | 12 +++--- docs/guide/docvideolink.md | 7 +++- docs/guide/homefooter.md | 56 ++++++++++++------------- docs/guide/linkcard.md | 64 ++++++++++++++--------------- docs/index.md | 26 ++++++------ src/components/Announcement.vue | 18 ++++----- src/components/DocAsideLogo.vue | 26 ++++++------ src/components/DocBox.vue | 42 +++++++++---------- src/components/DocBoxCube.vue | 50 +++++++++++------------ src/components/DocLinks.vue | 34 ++++++++-------- src/components/DocPill.vue | 21 +++++----- src/components/DocVideoLink.vue | 4 +- src/components/HomeFooter.vue | 26 ++++++------ src/components/ShareButton.vue | 12 +++--- src/theme/components-var.css | 65 +++++++++++++++++------------- src/theme/doc-blocks.css | 4 +- src/theme/home-links.css | 12 +++--- src/theme/picture.css | 6 +-- src/types/types.ts | 2 +- 22 files changed, 279 insertions(+), 262 deletions(-) diff --git a/docs/.vitepress/configs/nav.ts b/docs/.vitepress/configs/nav.ts index 77c7bb29..6d8cac9c 100644 --- a/docs/.vitepress/configs/nav.ts +++ b/docs/.vitepress/configs/nav.ts @@ -6,15 +6,15 @@ export const nav: DefaultTheme.NavItem[] = [ link: '/guide/getting-started' }, { - text: '配置', + text: '配置', link: '/guide/theme' }, { - text: '提交反馈', + text: '提交反馈', link: 'https://github.com/Theo-Messi/lumen/issues' }, { - text: '变更日志', + text: '变更日志', link: `https://github.com/Theo-Messi/lumen/releases` } ] diff --git a/docs/.vitepress/configs/sidebar.ts b/docs/.vitepress/configs/sidebar.ts index 64016f3a..cb9fa421 100644 --- a/docs/.vitepress/configs/sidebar.ts +++ b/docs/.vitepress/configs/sidebar.ts @@ -12,56 +12,56 @@ export function guide(): SidebarItem[] { // text: '快速开始', items: [ { - text: '快速开始', + text: '快速开始', link: 'getting-started' } ] }, { - text: '配置', + text: '配置', items: [ { - text: '导入主题', + text: '导入主题', link: 'theme' }, { - text: '首页公告栏', + text: '首页公告栏', link: 'announcement' }, { - text: '首页下划线', + text: '首页下划线', link: 'homeunderline' }, { - text: '页脚配置', + text: '页脚配置', link: 'homefooter' }, { - text: '侧边栏链接', + text: '侧边栏链接', link: 'docasidelogo' }, { - text: '视频组件', + text: '视频组件', link: 'docvideolink' }, { - text: '链接卡片', + text: '链接卡片', link: 'linkcard' }, { - text: '页面分享按钮', + text: '页面分享按钮', link: 'sharebutton' }, { - text: '图片描述', + text: '图片描述', link: 'image-description' }, { - text: 'Twikoo 评论', + text: 'Twikoo 评论', link: 'doctwikoo' }, { - text: '站点统计', + text: '站点统计', link: 'analytics' } ] diff --git a/docs/guide/announcement.md b/docs/guide/announcement.md index 14136608..1ca20d60 100644 --- a/docs/guide/announcement.md +++ b/docs/guide/announcement.md @@ -60,20 +60,20 @@ hero: prelink: copy: true // [!code ++] install: 'pnpm add @theojs/lumen' // [!code ++] - title: ' 快速开始' // [!code ++] + title: ' 快速开始' // [!code ++] content: 'pnpm add @theojs/lumen' // [!code ++] --- ``` ## 数据接口说明 -| 字段 | 类型 | 描述 | -| :--------: | :-------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `link` | `string` | 链接的 URL。 | -| `title` | `string` | 链接的标题。 | -| `content` | `string` | 链接的内容。 | -| `date` | `string` | 活动截止日期。 | -| `dateText` | `string` | 活动截止内容。默认为 `活动时间: 即日至;` | -| `dateIcon` | `string` | 活动截止图标。默认为`line-md:calendar`。支持 | -| `copy` | `boolean` | 复制开关，默认为 `false`，设置为 `true` 时，点击链接将复制 `install` 字段中的内容，**并且链接将无任何跳转行为** | -| `install` | `string` | 复制的内容，当 `copy` 为 `true` 时，点击链接将复制该内容到剪贴板。 | +| 字段 | 类型 | 描述 | +| :--------: | :-------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `link` | `string` | 链接的 URL。 | +| `title` | `string` | 链接的标题。 | +| `content` | `string` | 链接的内容。 | +| `date` | `string` | 活动截止日期。 | +| `dateText` | `string` | 活动截止内容。默认为 `活动时间: 即日至;` | +| `dateIcon` | `string` | 活动截止图标。默认为`line-md:calendar`。支持 | +| `copy` | `boolean` | 复制开关，默认为 `false`，设置为 `true` 时，点击链接将复制 `install` 字段中的内容，**并且链接将无任何跳转行为** | +| `install` | `string` | 复制的内容，当 `copy` 为 `true` 时，点击链接将复制该内容到剪贴板。 | diff --git a/docs/guide/docasidelogo.md b/docs/guide/docasidelogo.md index 8bd09e93..f3da322c 100644 --- a/docs/guide/docasidelogo.md +++ b/docs/guide/docasidelogo.md @@ -78,9 +78,9 @@ export default { | `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色，可为单一颜色字符串，也可以是包含 `light` 和 `dark` 属性的对象 | | `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | | `image` | `string` \| `{ light: string; dark: string }` | 图片地址或包含 `light` 和 `dark` 模式的对象 | -| `name` | `string` | 名称 | -| `activity` | `string` | 活动名称 | -| `hide1` | `string` | 隐藏信息1 | -| `info1` | `string` | 信息1 | -| `hide2` | `string` | 隐藏信息2 | -| `info2` | `string` | 信息2 | +| `name` | `string` | 名称 | +| `activity` | `string` | 活动名称 | +| `hide1` | `string` | 隐藏信息1 | +| `info1` | `string` | 信息1 | +| `hide2` | `string` | 隐藏信息2 | +| `info2` | `string` | 信息2 | diff --git a/docs/guide/docvideolink.md b/docs/guide/docvideolink.md index 7af1f76e..e30dde1e 100644 --- a/docs/guide/docvideolink.md +++ b/docs/guide/docvideolink.md @@ -4,7 +4,12 @@ title: 视频组件 支持多种主流视频平台，还允许用户通过自定义链接嵌入其他视频源。通过简单的配置，可以轻松将各种视频嵌入到您的页面中，提升用户的观看体验。 -- **支持多平台**：内置对 `YouTube`、`Bilibili`、`腾讯视频`、`优酷`、`西瓜视频`和 `Vimeo` 的支持，只需要提供平台标识符和视频 ID 即可。 +- **支持多平台**：内置对 + + + + + 的支持，只需要提供平台标识符和视频 ID 即可。 - **自定义视频链接**：除了主流视频平台外，Vid 还支持直接嵌入 MP4 或其他格式的视频链接。 - **响应式设计**：该组件自动适应不同屏幕尺寸，确保在桌面和移动设备上都能流畅播放。 - **简便易用**：通过简单的配置项，您可以快速将视频内容集成到页面中，无需复杂的代码。 diff --git a/docs/guide/homefooter.md b/docs/guide/homefooter.md index fd85cb21..8807fddd 100644 --- a/docs/guide/homefooter.md +++ b/docs/guide/homefooter.md @@ -71,51 +71,51 @@ export default { `FooterData` 是所有组件的顶层接口，包含了以下几个字段： -| 字段 | 类型 | 描述 | -| :------: | :------: | ------------------------------------------------------------- | -| `group` | `Array` | 链接分组数组，包含多个分组。 | -| `beian` | `Object` | 备案信息。 | -| `author` | `Object` | 作者信息。 | +| 字段 | 类型 | 描述 | +| :------: | :------: | -------------------------------------------------- | +| `group` | `Array` | 链接分组数组，包含多个分组。 | +| `beian` | `Object` | 备案信息。 | +| `author` | `Object` | 作者信息。 | ### `Group` 接口 `Group` 接口定义了一个链接分组，包括分组的图标、标题及其下的多个链接。 -| 字段 | 类型 | 描述 | -| :-----: | :------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `icon` | `string` | 分组图标名称，支持 | -| `color` | `string` | 图标样式。 | -| `title` | `string` | 分组的标题。 | -| `links` | `Array` | 该分组包含的链接数组，每个链接是一个 `Link` 对象。 | +| 字段 | 类型 | 描述 | +| :-----: | :------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `icon` | `string` | 分组图标名称，支持 | +| `color` | `string` | 图标样式。 | +| `title` | `string` | 分组的标题。 | +| `links` | `Array` | 该分组包含的链接数组，每个链接是一个 `Link` 对象。 | ### `Link` 接口 `Link` 接口用于描述具体的链接信息，包括链接的图标、样式、名称、地址及其打开方式。 -| 字段 | 类型 | 描述 | -| :-----: | :------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `icon` | `string` | 链接图标名称，支持 | -| `color` | `string` | 图标样式。 | -| `name` | `string` | 链接的名称。 | -| `link` | `string` | 链接的地址。 | +| 字段 | 类型 | 描述 | +| :-----: | :------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `icon` | `string` | 链接图标名称，支持 | +| `color` | `string` | 图标样式。 | +| `name` | `string` | 链接的名称。 | +| `link` | `string` | 链接的地址。 | ### `Beian` 接口 `Beian` 接口用于表示备案信息，包括 ICP 备案号、公安备案号以及是否显示备案图标。 -| 字段 | 类型 | 描述 | -| :----------: | :-------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `icp` | `string` | ICP 备案号。 | -| `icpIcon` | `string` | ICP 图标，默认为 `fluent:globe-shield-48-filled` : | -| `police` | `string` | 公安备案号。 | -| `policeIcon` | `string` | 公安备案图标，默认为 `fluent:shield-checkmark-48-filled` : | -| `showIcon` | `boolean` | 是否显示备案图标，默认 `false`。 | +| 字段 | 类型 | 描述 | +| :----------: | :-------: | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `icp` | `string` | ICP 备案号。 | +| `icpIcon` | `string` | ICP 图标，默认为 `fluent:globe-shield-48-filled` : | +| `police` | `string` | 公安备案号。 | +| `policeIcon` | `string` | 公安备案图标，默认为 `fluent:shield-checkmark-48-filled` : | +| `showIcon` | `boolean` | 是否显示备案图标，默认 `false`。 | ### `Author` 接口 `Author` 接口表示作者信息，包括作者姓名和链接。 -| 字段 | 类型 | 描述 | -| :----: | :------: | --------------------------------------------- | -| `name` | `string` | 作者的姓名。 | -| `link` | `string` | 作者的链接。 | +| 字段 | 类型 | 描述 | +| :----: | :------: | ---------------------------------- | +| `name` | `string` | 作者的姓名。 | +| `link` | `string` | 作者的链接。 | diff --git a/docs/guide/linkcard.md b/docs/guide/linkcard.md index 2a110b03..09883a2e 100644 --- a/docs/guide/linkcard.md +++ b/docs/guide/linkcard.md @@ -33,14 +33,14 @@ export default { ### 参数说明 -| 字段 | 类型 | 描述 | -| :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `name` | `string` | DocBox 名称。 | -| `link` | `string` | DocBox 链接。 | -| `tag` | `string` | DocBox 标签。 | -| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。 也可以是包含 `light` 和 `dark` 属性的对象 | -| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | -| `image` | `string` \| `{ light: string; dark: string }` | 图片地址或包含 `light` 和 `dark` 模式的对象。 | +| 字段 | 类型 | 描述 | +| :-----: | :-------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | `string` | DocBox 名称。 | +| `link` | `string` | DocBox 链接。 | +| `tag` | `string` | DocBox 标签。 | +| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。 也可以是包含 `light` 和 `dark` 属性的对象 | +| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | +| `image` | `string` \| `{ light: string; dark: string }` | 图片地址或包含 `light` 和 `dark` 模式的对象。 | ## Pill @@ -54,13 +54,13 @@ export default { ### 参数说明 -| 字段 | 类型 | 描述 | -| :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `name` | `string` | Pill 名称。 | -| `link` | `string` | Pill 链接。 | -| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。也可以是包含 `light` 和 `dark` 属性的对象 | -| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | -| `image` | `string` \| `{ light: string; dark: string }` | 图片地址或包含 `light` 和 `dark` 模式的对象。 | +| 字段 | 类型 | 描述 | +| :-----: | :-------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | `string` | Pill 名称。 | +| `link` | `string` | Pill 链接。 | +| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。也可以是包含 `light` 和 `dark` 属性的对象 | +| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | +| `image` | `string` \| `{ light: string; dark: string }` | 图片地址或包含 `light` 和 `dark` 模式的对象。 | ## Links @@ -74,14 +74,14 @@ export default { ### 参数说明 -| 字段 | 类型 | 描述 | -| :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `name` | `string` | DocLinks 名称。 | -| `desc` | `string` | DocLinks 描述信息。 | -| `link` | `string` | DocLinks 链接。 | -| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。也可以是包含 `light` 和 `dark` 属性的对象 | -| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | -| `image` | `string` \| `{ light: string; dark: string }` | 支持单一图片地址或包含 `light` 和 `dark` 两种模式的对象。 | +| 字段 | 类型 | 描述 | +| :-----: | :-------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | `string` | DocLinks 名称。 | +| `desc` | `string` | DocLinks 描述信息。 | +| `link` | `string` | DocLinks 链接。 | +| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。也可以是包含 `light` 和 `dark` 属性的对象 | +| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | +| `image` | `string` \| `{ light: string; dark: string }` | 支持单一图片地址或包含 `light` 和 `dark` 两种模式的对象。 | ## BoxCube @@ -95,12 +95,12 @@ export default { ## 参数说明 -| 字段 | 类型 | 描述 | -| :-----: | :-------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `name` | `string` | BoxCube 名称。 | -| `link` | `string` | BoxCube 链接。 | -| `desc` | `string` | BoxCube 描述。 | -| `tag` | `string` | BoxCube 标签。 | -| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。也可以是包含 `light` 和 `dark` 属性的对象 | -| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | -| `image` | `string` \| `{ light: string; dark: string }` | 支持单一图片地址或包含 `light` 和 `dark` 模式的对象。 | +| 字段 | 类型 | 描述 | +| :-----: | :-------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | `string` | BoxCube 名称。 | +| `link` | `string` | BoxCube 链接。 | +| `desc` | `string` | BoxCube 描述。 | +| `tag` | `string` | BoxCube 标签。 | +| `color` | `string` \| `{ light: string; dark: string }` | 图标的颜色。也可以是包含 `light` 和 `dark` 属性的对象 | +| `icon` | `string` \| `{ light: string; dark: string }` | 图标名称，支持可为单一图标名称或包含 `light` 和 `dark` 模式的对象 | +| `image` | `string` \| `{ light: string; dark: string }` | 支持单一图片地址或包含 `light` 和 `dark` 模式的对象。 | diff --git a/docs/index.md b/docs/index.md index 0fffa2cf..7a72dfcc 100644 --- a/docs/index.md +++ b/docs/index.md @@ -13,7 +13,7 @@ hero: alt: '@theojs/lumen' prelink: - # content: 'IPLC纯专线内网传输线路 最高2.5Gbps速率!' + # content: 'IPLC纯专线内网传输线路 最高2.5Gbps速率!' title: '🎉 FlyingBird 新春活动开启咯！' content: ' · 月/季/半年付 85折 优惠码 cny2585
@@ -27,7 +27,7 @@ hero: # prelink: # copy: true # install: 'pnpm add @theojs/lumen' - # title: ' 快速开始' + # title: ' 快速开始' # content: 'pnpm add @theojs/lumen' actions: @@ -52,57 +52,57 @@ hero: link: https://xx.theojs.cn features: - - title: '开箱即用的主题配色' + - title: '开箱即用的主题配色' details: 支持开箱即用的多种主题配色，并提供灵活的配置选项，轻松切换主题颜色方案，满足品牌或个人偏好的视觉需求。 link: '/guide/theme' rel: 'noopener' - - title: '首页公告栏' + - title: '首页公告栏' details: 在首页展示重要通知或动态信息，吸引用户关注，提升站点的互动性。 link: '/guide/announcement' rel: 'noopener' - - title: '首页下划线' + - title: '首页下划线' details: 实现页面元素的下划线动画，增加视觉层次感和动感效果。 link: '/guide/homeUnderline' rel: 'noopener' - - title: '页脚配置' + - title: '页脚配置' details: 灵活自定义页脚内容，展示版权信息、链接分组等，增强站点的专业感。 link: '/guide/homefooter' rel: 'noopener' - - title: '侧边栏链接' + - title: '侧边栏链接' details: 在侧边栏中展示常用链接，提升用户导航体验，快速访问相关内容。 link: '/guide/docasidelogo' rel: 'noopener' - - title: '视频组件' + - title: '视频组件' details: 支持嵌入视频内容，提供更加丰富的多媒体展示形式，增强用户互动体验。 link: '/guide/docvideolink' rel: 'noopener' - - title: '链接卡片' + - title: '链接卡片' details: 设计美观的链接卡片，直观展示外部资源或推荐内容，提升页面内容的吸引力。 link: '/guide/linkcard' rel: 'noopener' - - title: '页面分享按钮' + - title: '页面分享按钮' details: 为每个页面提供便捷的分享功能，方便用户分享内容，提高站点的曝光率。 link: '/guide/sharebutton' rel: 'noopener' - - title: 'Twikoo 评论系统' + - title: 'Twikoo 评论系统' details: 集成 Twikoo 评论系统，提升用户互动体验，增强站点的社交功能。 link: '/guide/doctwikoo' rel: 'noopener' - - title: '站点统计' + - title: '站点统计' details: 提供站点数据统计功能，方便监控和分析访问情况，帮助优化站点性能。 link: '/guide/analytics' rel: 'noopener' - - title: 'Iconify 图标集成' + - title: 'Iconify 图标集成' details: 轻松集成 Iconify 图标库，提供上千种矢量图标，支持多种平台，丰富站点的视觉表现和交互体验。 link: '/guide/theme#图标支持' rel: 'noopener' diff --git a/src/components/Announcement.vue b/src/components/Announcement.vue index c38392bd..8e6d189c 100644 --- a/src/components/Announcement.vue +++ b/src/components/Announcement.vue @@ -42,21 +42,21 @@ const prelink = usePrelink() display: inline-flex; flex-direction: column; transition: all 0.5s ease; - margin-bottom: 1rem; + margin-bottom: 1em; border: 1px solid var(--Announcement-border); - border-radius: 0.8rem; + border-radius: 0.8em; background-color: var(--Announcement-bg); - padding: 0.3rem 1.5rem; + padding: 0.3em 1.5em; } .prelink:hover { - transform: translateY(-1px); + transform: var(--Announcement-transform-hover); border-color: var(--Announcement-border-hover); background-color: var(--Announcement-bg-hover); } .prelink:active { - transform: scale(0.98); + transform: var(--Announcement-transform-active); } .prelink-content { @@ -66,20 +66,20 @@ const prelink = usePrelink() .title { font-weight: 600; - font-size: 0.8rem; + font-size: 0.8em; } .content { font-weight: 500; - font-size: 0.75rem; + font-size: 0.75em; } .time-info { display: flex; align-items: center; - gap: 0.25rem; + gap: 0.25em; font-weight: 500; - font-size: 0.75rem; + font-size: 0.75em; } .iconify { diff --git a/src/components/DocAsideLogo.vue b/src/components/DocAsideLogo.vue index 791ae9c5..87bca383 100644 --- a/src/components/DocAsideLogo.vue +++ b/src/components/DocAsideLogo.vue @@ -117,7 +117,7 @@ const props = defineProps<{ Aside_Data: AsideItem[] }>() h1 { font-weight: 900; - font-size: 0.875rem; + font-size: 0.875em; } .link { @@ -125,26 +125,25 @@ h1 { position: relative; justify-content: center; align-items: center; - gap: 1rem; + gap: 1em; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); - margin: 0.25rem 0; + margin: 0.25em 0; border: 1.5px solid var(--AsideLogo-border); - border-radius: 0.8rem; + border-radius: 0.8em; background-color: var(--AsideLogo-bg); - padding: 0.25rem 0; + padding: 0.25em 0; } .link:hover { - transform: translateY(-1px); - background-color: var(--AsideLogo-bg-hover); + transform: var(--AsideLogo-transform-hover); } .link:active { - transform: scale(0.9); + transform: var(--AsideLogo-transform-active); } .link:last-of-type { - margin-bottom: 1rem; + margin-bottom: 1em; } .link:hover .icon, @@ -163,6 +162,7 @@ h1 { .link:hover.has-name { border-color: var(--AsideLogo-name-border-hover); + background-color: var(--AsideLogo-name-bg-hover); } .link .icon { @@ -184,15 +184,15 @@ h1 { transition: opacity 0.5s; color: var(--AsideLogo-hide); font-weight: 600; - font-size: 0.75rem; - line-height: 0.625rem; + font-size: 0.75em; + line-height: 0.625em; } .link .info { color: var(--AsideLogo-info); font-weight: 600; - font-size: 0.75rem; - line-height: 1rem; + font-size: 0.75em; + line-height: 1em; } .link .name { diff --git a/src/components/DocBox.vue b/src/components/DocBox.vue index 49bf4fe6..856df278 100644 --- a/src/components/DocBox.vue +++ b/src/components/DocBox.vue @@ -95,33 +95,33 @@ const props = defineProps<{ items: BoxItem[] }>() .container { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: 0.5em; } .link { display: flex; position: relative; align-items: center; - gap: 1rem; + gap: 1em; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); - border: 1px solid var(--Box-bg-border); - border-radius: 0.8rem; + border: 1px solid var(--Box-border); + border-radius: 0.8em; background-color: var(--Box-bg); - padding: 0 1.6rem; - width: 14rem; - height: 3.5rem; + padding: 0 1.6em; + width: 14em; + height: 3.5em; text-decoration: none !important; } .link:hover { - transform: translateY(-1px); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - border-color: var(--Box-bg-border-hover); + transform: var(--Box-transform-hover); + box-shadow: var(--Box-boxshadow-hover); + border-color: var(--Box-border-hover); background-color: var(--Box-bg-hover); } .link:active { - transform: scale(0.9); + transform: var(--Box-transform-active); } .link::after { @@ -130,15 +130,15 @@ const props = defineProps<{ items: BoxItem[] }>() @media (max-width: 1024px) { .link { - flex: 1 1 calc(50% - 0.5rem); - max-width: calc(50% - 0.5rem); + flex: 1 1 calc(50% - 0.5em); + max-width: calc(50% - 0.5em); } } @media (max-width: 768px) { .link { - flex: 1 1 calc(50% - 0.5rem); - max-width: calc(50% - 0.5rem); + flex: 1 1 calc(50% - 0.5em); + max-width: calc(50% - 0.5em); } } @@ -149,13 +149,13 @@ const props = defineProps<{ items: BoxItem[] }>() right: 0; z-index: 1; margin: 0; - border-radius: 0 0.7rem 0 0.7rem; + border-radius: 0 0.7em 0 0.7em; background-color: var(--Box-tag-bg); - padding: 0.25rem 0.5rem; + padding: 0.25em 0.5em; pointer-events: none; color: var(--Box-tag); - font-weight: 600; - font-size: 0.625rem; + font-weight: 500; + font-size: 0.625em; line-height: 1; text-transform: uppercase; } @@ -174,8 +174,8 @@ const props = defineProps<{ items: BoxItem[] }>() overflow: hidden; color: var(--Box-name); font-weight: 500; - font-size: 0.875rem; - letter-spacing: 0.05rem; + font-size: 0.875em; + letter-spacing: 0.05em; text-overflow: ellipsis; white-space: nowrap; } diff --git a/src/components/DocBoxCube.vue b/src/components/DocBoxCube.vue index 25033c52..0d2442e1 100644 --- a/src/components/DocBoxCube.vue +++ b/src/components/DocBoxCube.vue @@ -104,7 +104,7 @@ const props = defineProps<{ items: BoxCubeItem[] }>() .container { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: 0.5em; } .link { @@ -114,25 +114,25 @@ const props = defineProps<{ items: BoxCubeItem[] }>() justify-content: center; align-items: center; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); - border: 1px solid var(--Boxcube-bg-border); - border-radius: 0.8rem; + border: 1px solid var(--Boxcube-border); + border-radius: 0.8em; background-color: var(--Boxcube-bg); - width: 7.5rem; - height: 7.5rem; + width: 7.5em; + height: 7.5em; overflow: hidden; -webkit-text-decoration: none !important; text-decoration: none !important; } .link:hover { - transform: translateY(-1px); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - border-color: var(--Boxcube-bg-border-hover); + transform: var(--Boxcube-transform-hover); + box-shadow: var(--Boxcube-boxshadow-hover); + border-color: var(--Boxcube-border-hover); background-color: var(--Boxcube-bg-hover); } .link:active { - transform: scale(0.9); + transform: var(--Boxcube-transform-active); } .link::after { @@ -141,15 +141,15 @@ const props = defineProps<{ items: BoxCubeItem[] }>() @media (max-width: 1024px) { .link { - flex: 1 1 calc(25% - 0.5rem); - max-width: calc(25% - 0.5rem); + flex: 1 1 calc(25% - 0.5em); + max-width: calc(25% - 0.5em); } } @media (max-width: 768px) { .link { - flex: 1 1 calc(33.33% - 0.5rem); - max-width: calc(33.33% - 0.5rem); + flex: 1 1 calc(33.33% - 0.5em); + max-width: calc(33.33% - 0.5em); } } @@ -165,7 +165,7 @@ const props = defineProps<{ items: BoxCubeItem[] }>() .name, .desc { - transform: translateY(0.5rem); + transform: translateY(0.5em); max-width: 80%; overflow: hidden; text-align: center; @@ -176,38 +176,38 @@ const props = defineProps<{ items: BoxCubeItem[] }>() .name { color: var(--Boxcube-name); font-weight: 500; - font-size: 0.875rem; - line-height: 1.25rem; - letter-spacing: 0.05rem; + font-size: 0.875em; + line-height: 1.25em; + letter-spacing: 0.05em; } .desc { display: inline-block; margin: 0; color: var(--Boxcube-desc); - font-size: 0.75rem; - line-height: 1rem; + font-size: 0.75em; + line-height: 1em; } .tag { display: flex; position: absolute; - top: 0.25rem; - right: -2.25rem; + top: 0.5em; + right: -3.75em; justify-content: center; align-items: center; transform: rotate(25deg); z-index: 1; margin: 0; - border-radius: 0.7rem; + border-radius: 0.7em; background-color: var(--Boxcube-tag-bg); - padding: 0.25rem 0.5rem; + padding: 0.25em 0.5em; width: 100%; overflow: hidden; pointer-events: none; color: var(--Boxcube-tag); - font-weight: 600; - font-size: 0.625rem; + font-weight: 500; + font-size: 0.625em; line-height: 1; text-transform: uppercase; } diff --git a/src/components/DocLinks.vue b/src/components/DocLinks.vue index ca4f2281..1eaf97a4 100644 --- a/src/components/DocLinks.vue +++ b/src/components/DocLinks.vue @@ -104,46 +104,48 @@ const props = defineProps<{ items: LinkItem[] }>() .container { display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.5em; } .link { display: flex; align-items: center; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); - border: 1px solid var(--Links-bg-border); - border-radius: 0.8rem; + border: 1px solid var(--Links-border); + border-radius: 0.8em; background-color: var(--Links-bg); - padding: 1rem; + padding: 1em; text-decoration: none !important; } .link:hover { - transform: translateY(-1px); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transform: var(--Links-transform-hover); + box-shadow: var(--Links-boxshadow-hover); border-color: var(--Links-border-hover); background-color: var(--Links-bg-hover); } .link:active { - transform: scale(0.9); + transform: var(--Links-transform-active); } .link::after { display: none !important; } -.icon, +.icon { + height: 2em; +} .iconify { flex-shrink: 0; /* 禁止图标在 flex 布局中因空间不足被压缩。 */ - height: 2rem; + color: var(--iconify-defaultcolor); - font-size: 2rem; + font-size: 2em; } .default-icon { flex-shrink: 0; /* 禁止图标在 flex 布局中因空间不足被压缩。 */ - margin: 0 0.25rem 0 0.2rem; + margin: 0 0.25em 0 0.2em; font-size: 1.5em; } @@ -151,7 +153,7 @@ const props = defineProps<{ items: LinkItem[] }>() display: flex; flex-direction: column; justify-content: flex-start; - margin-left: 1rem; + margin-left: 1em; overflow: hidden; } @@ -164,17 +166,17 @@ const props = defineProps<{ items: LinkItem[] }>() overflow: hidden; color: var(--Links-name); font-weight: 500; - font-size: 0.875rem; + font-size: 0.875em; line-height: 1.2; - letter-spacing: 0.05rem; + letter-spacing: 0.05em; text-overflow: ellipsis; white-space: nowrap; } .desc { - margin: 0.25rem 0 0 0; + margin: 0.25em 0 0 0; color: var(--Links-desc); - font-size: 0.75rem; + font-size: 0.75em; line-height: 1.5; } diff --git a/src/components/DocPill.vue b/src/components/DocPill.vue index 0af955b5..036b7b5b 100644 --- a/src/components/DocPill.vue +++ b/src/components/DocPill.vue @@ -90,28 +90,27 @@ const pill = defineProps() .link { display: inline-flex; align-items: center; - gap: 0.25rem; - transform: translateY(1px); + gap: 0.25em; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); margin: 0 0.125em; border: 1px solid var(--Pill-border); - border-radius: 0.5rem; + border-radius: 0.5em; background-color: var(--Pill-bg); - padding: 0.75rem 0.25rem; - height: 1rem; + padding: 0.75em 0.25em; + height: 1em; text-decoration: none !important; white-space: nowrap; } .link:hover { - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transform: var(--Pill-transform-hover); + box-shadow: var(--Pill-boxshadow-hover); border-color: var(--Pill-border-hover); background-color: var(--Pill-bg-hover); } .link:active { - transform: scale(0.9); + transform: var(--Pill-transform-active); } .link::after { @@ -130,8 +129,8 @@ const pill = defineProps() .name { color: var(--Pill-name); - font-weight: 500; - font-size: 0.875rem; - letter-spacing: 0.05rem; + font-weight: 450; + font-size: 0.875em; + letter-spacing: 0.05em; } diff --git a/src/components/DocVideoLink.vue b/src/components/DocVideoLink.vue index 1f0f75e6..f36ed24e 100644 --- a/src/components/DocVideoLink.vue +++ b/src/components/DocVideoLink.vue @@ -31,13 +31,13 @@ const Config = computed(() => getVideo(props)) display: flex; justify-content: center; align-items: center; - padding: 0.5rem; + padding: 0.5em; } .video-iframe { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border: none; - border-radius: 0.5rem; + border-radius: 0.5em; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; diff --git a/src/components/HomeFooter.vue b/src/components/HomeFooter.vue index ef804501..8732aa7c 100644 --- a/src/components/HomeFooter.vue +++ b/src/components/HomeFooter.vue @@ -164,22 +164,22 @@ const Year = dayjs().year() .list-container { display: flex; justify-content: space-evenly; - margin: 1.25rem auto; + margin: 1.25em auto; max-width: 75%; } .list-title { - margin-bottom: 0.5rem; + margin-bottom: 0.5em; font-weight: 600; - font-size: 0.75rem; - letter-spacing: 0.05rem; + font-size: 0.75em; + letter-spacing: 0.05em; } .list-links { opacity: 0.9; - font-size: 0.75rem; - line-height: 1.7rem; - letter-spacing: 0.025rem; + font-size: 0.75em; + line-height: 2.3; + letter-spacing: 0.025em; } .iconify { @@ -189,24 +189,24 @@ const Year = dayjs().year() } .footer-info { - margin-bottom: 0.875rem; + margin-bottom: 0.875em; text-align: center; } .footer-infotext { display: inline-block; margin: 0; - font-size: 0.75rem; + font-size: 0.75em; } .info-item { display: inline-block; - letter-spacing: 0.025rem; + letter-spacing: 0.025em; } .info-spacing, .info-spacing-copyright { - margin-left: 1rem; + margin-left: 1em; } .info-icon { @@ -227,12 +227,12 @@ const Year = dayjs().year() .list-container { display: grid; grid-template-columns: repeat(2, 1fr); - row-gap: 1.25rem; + row-gap: 1.25em; justify-items: center; } .info-spacing-copyright { - margin-left: -1rem; + margin-left: -1em; } } diff --git a/src/components/ShareButton.vue b/src/components/ShareButton.vue index 4f33a620..17b6bf2a 100644 --- a/src/components/ShareButton.vue +++ b/src/components/ShareButton.vue @@ -53,13 +53,13 @@ const shareLink = useShareLink()