docs: upgrade homepage header style

2 years ago · 32875f8a72
parent ed1055ac57
commit 32875f8a72
6 changed files with 69 additions and 73 deletions
--- 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',
--- 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;
+  }
 }
--- 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 (
-    <div className="homepage-header hero hero--primary">
+    <div className="homepage-header">
      <Head>
        <link rel="prefetch" href="/img/hero-light.png" />
        <link rel="prefetch" href="/img/hero-dark.png" />
      </Head>

-      <div className="main">
-        <div className="header">
-          <h1 className="title">{siteConfig.title}</h1>
-          <p className="desc">{siteConfig.tagline}</p>
+      <div className="screenshot flex-1 xl:flex-none">
+        <img src={`/img/hero-${colorMode}.png`} alt="Preview of Tailchat" />
+      </div>
+
+      <div className="header">
+        <h1 className="title">Open Source, Open Platform</h1>
+        <p className="desc">Tailchat: {siteConfig.tagline}</p>

-          <div className="btns">
-            <Link
-              className="button button--info button--lg"
-              to="https://nightly.paw.msgbyte.com/"
-            >
-              <Translate>Nightly version</Translate>
-            </Link>
+        <div className="btns">
+          <Link
+            className="button button--primary button--lg"
+            to="https://nightly.paw.msgbyte.com/invite/8Jfm1dWb"
+          >
+            <Translate>Join our Group</Translate>
+          </Link>

-            <Link
-              className="button button--secondary button--lg"
-              href="/docs/intro"
-            >
-              <Translate>Learn More</Translate>
-            </Link>
-          </div>
+          <Link
+            className="button button--secondary button--lg"
+            href="/docs/intro"
+          >
+            <Translate>Learn More</Translate>
+          </Link>
        </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>
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@ -17,6 +17,8 @@
  --ifm-color-primary-light: #516d9a;
  --ifm-color-primary-lighter: #5572a1;
  --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);
 }

+html, body {
+  font-size: 16px;
+}
+
 html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
 }
--- a/website/static/img/hero-dark.png
+++ b/website/static/img/hero-dark.png
--- a/website/static/img/hero-light.png
+++ b/website/static/img/hero-light.png