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'
- 几分钟内创建
强大的现代博客网站。
+
+ 几分钟内创建
+ 强大的现代博客网站。
+
-
部署
一行完成.
-
- 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
+ 内语法,您可以使用自定义语法来丰富您的内容。
+
-
-
-
+
+
+
-
-
- 无限扩展、无限可能,
实现歌单解析,追番列表等功能。
+
+
+ 无限扩展、无限可能,
+
+ 实现歌单解析,追番列表等功能。
-
+
数据统计面板
- 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
+}