diff --git a/pages/index.mdx b/pages/index.mdx index 4a0ed540..7cdcec2b 100644 --- a/pages/index.mdx +++ b/pages/index.mdx @@ -14,206 +14,219 @@ import docsCardDark from '../public/console-dark.png'
-

An Alternative
Personal Space.

-

一个替代个人空间的新方式

-

- 5 分钟拥有自己的 Mix Space +

+ An Alternative
+ Personal Space. +

+

+ 一个替代个人空间的新方式

- - +

+ + 5 分钟拥有自己的 Mix Space + +

- + @media screen and (max-width: 1024px) { + :global(#docs-card) { + aspect-ratio: 135/86; + } + :global(#macros-card) { + aspect-ratio: 8/3; + } + :global(#macros-card h3) { + text-align: left; + } + :global(#a11y-card) { + background-image: url(/assets/high-contrast.png); + background-position: center 160px; + } + } + @media screen and (max-width: 768px) { + :global(#docs-card) { + min-height: 348px; + width: 100%; + aspect-ratio: auto; + } + :global(#docs-card img) { + object-position: -26px 0; + width: 250%; + max-width: initial; + } + } + @media screen and (max-width: 640px) { + :global(#macros-card) { + aspect-ratio: 2.5/2; + justify-content: flex-start; + align-items: stretch; + min-height: 350px; + } + :global(#macros-card h3) { + text-align: center; + } + :global(#macros-card p) { + max-width: 100%; + } + :global(#macros-card img) { + position: relative; + margin: 0.75em -1.75em 0; + max-width: calc(100% + 3.5em); + } + :global(.dark #macros-card img) { + mix-blend-mode: lighten; + } + } + `}
@@ -221,13 +234,21 @@ import docsCardDark from '../public/console-dark.png' Background Background (Dark) -

几分钟内创建
强大的现代博客网站。

+

+ 几分钟内创建
+ 强大的现代博客网站。 +

-

部署
一行完成.

-
- Mix Space 有多种部署方式,您可以选择最适合您的方式来部署您的 Mix Space。采用 Docker 部署,您可以在几分钟内部署您的博客,而不需要任何专业知识。使用预设脚本部署亦是如此。 +

+ 部署 + 一行完成. +

+
+ Mix Space 有多种部署方式,您可以选择最适合您的方式来部署您的 Mix + Space。采用 Docker + 部署,您可以在几分钟内部署您的博客,而不需要任何专业知识。使用预设脚本部署亦是如此。
@@ -246,34 +267,44 @@ import docsCardDark from '../public/console-dark.png'
- + 全平台
黑暗模式 + > + 全平台 + + 黑暗模式 +
-
-

Markdown + 自定义语法,
丰富您的内容。

-

Mix Space 支持自定义 Markdown 内语法,您可以使用自定义语法来丰富您的内容。

+
+

+ Markdown + 自定义语法, +
+ 丰富您的内容。 +

+

+ Mix Space 支持自定义 Markdown + 内语法,您可以使用自定义语法来丰富您的内容。 +

-
- Macros - Macros (Dark) +
+ Macros + Macros (Dark) - -

- 无限扩展、无限可能,
实现歌单解析,追番列表等功能。 + +

+ 无限扩展、无限可能, +
+ 实现歌单解析,追番列表等功能。

- +

数据统计面板

-

Mix Space 支持访客统计,
您可以在后台查看您的 网站访问量访问来源访问设备等信息。

+

+ Mix Space 支持访客统计, +
+ 您可以在后台查看您的 网站访问量访问来源, + 访问设备等信息。 +

记录生活点滴

-

Mix Space 不仅是博客,更是记录生活点滴的个人空间。您可以在 Mix Space 分享您的多彩缤纷的生活。

+

+ Mix Space 不仅是博客,更是记录生活点滴的个人空间。您可以在 Mix Space + 分享您的多彩缤纷的生活。 +

-

强大的友链系统,
促进你与老友的联系。

-

Mix Space 的友链系统强大且全面,在后台你可以检测你的老友是否还「健在」
有了 Mix Space,你的友链一切尽在掌握。

+

+ 强大的友链系统, + + 促进你与老友的联系。 +

+

+ Mix Space + 的友链系统强大且全面,在后台你可以检测你的老友是否还「健在」 +
有了 Mix Space,你的友链一切尽在掌握。 +

- +

更多特性...

-

文件管理 / WebSocket / 友链支持 / 计划任务 / 数据迁移... 更多新特性等待您的探索。

-

拥有你自己的 Mix Space →

+

+ 文件管理 / WebSocket / 友链支持 / 计划任务 / 数据迁移...{' '} + + 更多新特性等待您的探索。 + +

+

+ + 拥有你自己的 Mix Space → + +

+
diff --git a/public/style.css b/public/style.css index 118bd0ce..625ce166 100644 --- a/public/style.css +++ b/public/style.css @@ -7,25 +7,15 @@ body { } body { - background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #fff 300px), fixed 0 0 /20px 20px radial-gradient(#d1d1d1 1px, transparent 0), fixed 10px 10px /20px 20px radial-gradient(#d1d1d1 1px, transparent 0); + background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #fff 300px), + fixed 0 0 /20px 20px radial-gradient(#d1d1d1 1px, transparent 0), + fixed 10px 10px /20px 20px radial-gradient(#d1d1d1 1px, transparent 0); } .dark body { - background: linear-gradient(180deg, transparent 0, #111 300px), fixed 0 0 /20px 20px radial-gradient(#313131 1px, transparent 0), fixed 10px 10px /20px 20px radial-gradient(#313131 1px, transparent 0); -} - -.home-content p { - margin-top: 1.5em; - line-height: 1.75em; -} - -.home-content a { - --tw-ring-color: hsl(var(--nextra-primary-hue) 100% 50%/0.3); - --tw-text-opacity: 1; - text-underline-position: under; - text-decoration-line: underline; - text-decoration-thickness: from-font; - color: hsl(var(--nextra-primary-hue) 100% 50% / var(--tw-text-opacity)); + background: linear-gradient(180deg, transparent 0, #111 300px), + fixed 0 0 /20px 20px radial-gradient(#313131 1px, transparent 0), + fixed 10px 10px /20px 20px radial-gradient(#313131 1px, transparent 0); } figcaption { @@ -47,10 +37,6 @@ code.text-\[\.9em\] { } @media screen and (max-width: 720px) { - .home-content p { - font-size: 0.9rem; - } - .home-content .hide-small { display: none; } @@ -66,17 +52,17 @@ del * { color: #555555 !important; } -li>ul, -li>ol { +li > ul, +li > ol { margin-top: 0 !important; } -li>ul>li::marker, -li>ol>li::marker { +li > ul > li::marker, +li > ol > li::marker { color: #bbbbbb; } -.dark linearGradient[id^="linearGradient"] stop { +.dark linearGradient[id^='linearGradient'] stop { --tw-text-opacity: 1; stop-color: rgba(241, 245, 249, var(--tw-text-opacity)); } @@ -84,4 +70,4 @@ li>ol>li::marker { .dark #\39 b53a386-521a-4bce-b172-6530fb4038b7 { --tw-text-opacity: 1; fill: rgba(241, 245, 249, var(--tw-text-opacity)); -} \ No newline at end of file +}