aiden
/
tailchat
mirror of https://github.com/msgbyte/tailchat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: upgrade homepage header style

Browse Source
pull/90/head
moonrailgun 2 years ago
parent ed1055ac57
commit 32875f8a72
6 changed files with 69 additions and 73 deletions
Show Stats Download Patch File Download Diff File

2
website/docusaurus.config.js
Unescape Escape View File

@ -108,7 +108,7 @@ const presetClassicOptions = {
/** @type {import('@docusaurus/types').DocusaurusConfig} */ /** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = { module.exports = {
title: 'Tailchat', title: 'Tailchat',
tagline: 'A pluginify opensource IM Application', tagline: 'A pluginify IM Application',
url: 'https://tailchat.msgbyte.com', // TODO: 待修改成文档主页 url: 'https://tailchat.msgbyte.com', // TODO: 待修改成文档主页
baseUrl: '/', baseUrl: '/',
onBrokenLinks: 'throw', onBrokenLinks: 'throw',

87
website/src/components/HomepageHeader.less
Unescape Escape View File

@ -1,71 +1,56 @@
.homepage-header { .homepage-header {
padding: 4rem 1rem 0; padding: 4rem 1rem 0;
text-align: center;
@media (min-width: 997px) { .header {
font-size: 3.75rem; flex: 1;
height: 540px; text-align: center;
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 { .title {
flex: 1; margin-bottom: 24px;
text-align: center; font-size: 2.25rem;
line-height: 1;
font-weight: 900;
@media (min-width: 997px) { @media (min-width: 997px) {
text-align: left; font-size: 3.75rem;
} }
.title { @media (min-width: 1300px) {
margin-bottom: 24px; font-size: 5rem;
font-size: 2.25rem;
line-height: 1;
font-weight: 700;
@media (min-width: 997px) {
font-size: 3.75rem;
}
} }
}
.desc { .desc {
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
color: rgb(153, 153, 153); color: rgb(153, 153, 153);
font-size: 0.875rem; font-size: 1rem;
line-height: 1.25rem; line-height: 1.5;
@media (min-width: 997px) { @media (min-width: 997px) {
font-size: 1rem; font-size: 1.5rem;
line-height: 1.5rem;
max-width: 32rem;
}
} }
}
.btns { .btns {
margin-bottom: 32px; margin-bottom: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; justify-content: center;
gap: 1rem;
@media (min-width: 997px) { @media (min-width: 997px) {
flex-direction: row; flex-direction: row;
}
} }
} }
.screenshot { .link {
flex: 1; font-size: 1rem;
} }
} }
.screenshot {
margin-bottom: 3rem;
}
} }

47
website/src/components/HomepageHeader.tsx
Unescape Escape View File

@ -11,35 +11,40 @@ export const HomepageHeader: React.FC = React.memo(() => {
const { colorMode } = useColorMode(); const { colorMode } = useColorMode();
return ( return (
<div className="homepage-header hero hero--primary"> <div className="homepage-header">
<Head> <Head>
<link rel="prefetch" href="/img/hero-light.png" /> <link rel="prefetch" href="/img/hero-light.png" />
<link rel="prefetch" href="/img/hero-dark.png" /> <link rel="prefetch" href="/img/hero-dark.png" />
</Head> </Head>
<div className="main"> <div className="screenshot flex-1 xl:flex-none">
<div className="header"> <img src={`/img/hero-${colorMode}.png`} alt="Preview of Tailchat" />
<h1 className="title">{siteConfig.title}</h1> </div>
<p className="desc">{siteConfig.tagline}</p>
<div className="header">
<h1 className="title">Open Source, Open Platform</h1>
<p className="desc">Tailchat: {siteConfig.tagline}</p>
<div className="btns"> <div className="btns">
<Link <Link
className="button button--info button--lg" className="button button--primary button--lg"
to="https://nightly.paw.msgbyte.com/" to="https://nightly.paw.msgbyte.com/invite/8Jfm1dWb"
> >
<Translate>Nightly version</Translate> <Translate>Join our Group</Translate>
</Link> </Link>
<Link <Link
className="button button--secondary button--lg" className="button button--secondary button--lg"
href="/docs/intro" href="/docs/intro"
> >
<Translate>Learn More</Translate> <Translate>Learn More</Translate>
</Link> </Link>
</div>
</div> </div>
<div className="screenshot flex-1 xl:flex-none">
<img src={`/img/hero-${colorMode}.png`} alt="Preview of Tailchat" /> <div className="link">
<Link to="https://nightly.paw.msgbyte.com/">
<Translate>Or direct visit Tailchat nightly version</Translate>
</Link>
</div> </div>
</div> </div>
</div> </div>

6
website/src/css/custom.css
Unescape Escape View File

@ -17,6 +17,8 @@
--ifm-color-primary-light: #516d9a; --ifm-color-primary-light: #516d9a;
--ifm-color-primary-lighter: #5572a1; --ifm-color-primary-lighter: #5572a1;
--ifm-color-primary-lightest: #6782af; --ifm-color-primary-lightest: #6782af;
--ifm-heading-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
} }
@ -27,6 +29,10 @@
padding: 0 var(--ifm-pre-padding); padding: 0 var(--ifm-pre-padding);
} }
html, body {
font-size: 16px;
}
html[data-theme='dark'] .docusaurus-highlight-code-line { html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }

BIN
website/static/img/hero-dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 51 KiB

BIN
website/static/img/hero-light.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Write Preview
Loading…
Cancel
Save