diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index ce17b601..e8376918 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -108,7 +108,7 @@ const presetClassicOptions = { /** @type {import('@docusaurus/types').DocusaurusConfig} */ module.exports = { title: 'Tailchat', - tagline: 'A pluginify opensource IM Application', + tagline: 'A pluginify IM Application', url: 'https://tailchat.msgbyte.com', // TODO: 待修改成文档主页 baseUrl: '/', onBrokenLinks: 'throw', diff --git a/website/src/components/HomepageHeader.less b/website/src/components/HomepageHeader.less index dd7d4415..0f9eea4c 100644 --- a/website/src/components/HomepageHeader.less +++ b/website/src/components/HomepageHeader.less @@ -1,71 +1,56 @@ .homepage-header { padding: 4rem 1rem 0; + text-align: center; - @media (min-width: 997px) { - font-size: 3.75rem; - height: 540px; - padding-top: 0; - padding-bottom: 0; - } - - .main { - margin: auto; - display: flex; - flex-direction: column; - align-items: center; - max-width: 80rem; - - @media (min-width: 997px) { - flex-direction: row; - } + .header { + flex: 1; + text-align: center; - .header { - flex: 1; - text-align: center; + .title { + margin-bottom: 24px; + font-size: 2.25rem; + line-height: 1; + font-weight: 900; @media (min-width: 997px) { - text-align: left; + font-size: 3.75rem; } - .title { - margin-bottom: 24px; - font-size: 2.25rem; - line-height: 1; - font-weight: 700; - - @media (min-width: 997px) { - font-size: 3.75rem; - } + @media (min-width: 1300px) { + font-size: 5rem; } + } - .desc { - font-size: 1rem; - line-height: 1.5rem; - color: rgb(153, 153, 153); - font-size: 0.875rem; - line-height: 1.25rem; + .desc { + font-size: 1rem; + line-height: 1.5rem; + color: rgb(153, 153, 153); + font-size: 1rem; + line-height: 1.5; - @media (min-width: 997px) { - font-size: 1rem; - line-height: 1.5rem; - max-width: 32rem; - } + @media (min-width: 997px) { + font-size: 1.5rem; } + } - .btns { - margin-bottom: 32px; - display: flex; - flex-direction: column; - gap: 1rem; + .btns { + margin-bottom: 1rem; + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; - @media (min-width: 997px) { - flex-direction: row; - } + @media (min-width: 997px) { + flex-direction: row; } } - .screenshot { - flex: 1; + .link { + font-size: 1rem; } } + + .screenshot { + margin-bottom: 3rem; + } } diff --git a/website/src/components/HomepageHeader.tsx b/website/src/components/HomepageHeader.tsx index 6d9f9904..94612e92 100644 --- a/website/src/components/HomepageHeader.tsx +++ b/website/src/components/HomepageHeader.tsx @@ -11,35 +11,40 @@ export const HomepageHeader: React.FC = React.memo(() => { const { colorMode } = useColorMode(); return ( -
{siteConfig.tagline}
+Tailchat: {siteConfig.tagline}
-