style: some minor adjustments to the homepage

Signed-off-by: Yue Yang <g1enyy0ung@gmail.com>

docusaurus.config.js

@@ -85,34 +85,34 @@ module.exports = {
           title: 'Community',
           items: [
             {
-              label: 'Twitter',
-              href: 'https://twitter.com/chaos_mesh',
+              label: 'Events',
+              href: 'https://community.cncf.io/chaos-mesh-community/',
             },
             {
               label: 'Slack (#project-chaos-mesh)',
               href: 'https://slack.cncf.io/',
             },
             {
-              label: 'Events',
-              href: 'https://community.cncf.io/chaos-mesh-community/',
+              label: 'Twitter',
+              href: 'https://twitter.com/chaos_mesh',
             },
           ],
         },
         {
           title: 'More',
           items: [
-            {
-              label: 'GitHub',
-              href: 'https://github.com/chaos-mesh/chaos-mesh',
-            },
             {
               label: 'Blog',
               to: 'blog',
             },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/chaos-mesh/chaos-mesh',
+            },
           ],
         },
         {
-          title: 'Others',
+          title: 'Thanks',
           items: [
             {
               html: '<a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" /></a>',

src/pages/index.js

@@ -43,6 +43,8 @@ function Home() {
           </div>
         </div>
 
+        <div className="hero-divider" />
+
         <div className="hero">
           <div className="container text--center">
             <h2 className="hero__subtitle">
@@ -52,6 +54,8 @@ function Home() {
           </div>
         </div>
 
+        <div className="hero-divider" />
+
         <div className="hero">
           <div className="container">
             <Feature
@@ -163,6 +167,8 @@ function Home() {
           </div>
         </div>
 
+        <div className="hero-divider" />
+
         <div className="hero">
           <div className="container text--center">
             <h2 className="hero__subtitle">
@@ -182,6 +188,8 @@ function Home() {
           </div>
         </div>
 
+        <div className="hero-divider" />
+
         <div className="hero">
           <div className="container text--center">
             <h2 className="hero__subtitle">

src/pages/index.module.css

@@ -71,7 +71,10 @@
 
 .whiteboard {
   margin-top: 3rem;
-  background: #fff;
+}
+
+[data-theme='dark'] .whiteboard {
+  background: #eee;
   border-radius: 8px;
 }
 
@@ -91,7 +94,7 @@
   }
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
+@media (min-width: 769px) and (max-width: 1023px) {
   .whiteboardCol {
     --ifm-col-width: calc(4 / 12 * 100%) !important;
 

src/styles/custom.css

@@ -7,6 +7,18 @@
 
 /* You can override the default Infima variables here. */
 :root {
+  --ifm-color-primary: #172d72;
+  --ifm-color-primary-dark: #152967;
+  --ifm-color-primary-darker: #142661;
+  --ifm-color-primary-darkest: #102050;
+  --ifm-color-primary-light: #19327d;
+  --ifm-color-primary-lighter: #1a3483;
+  --ifm-color-primary-lightest: #1e3b94;
+
+  --hero-border-color: rgba(0, 0, 0, 0.1);
+}
+
+:root[data-theme='dark'] {
   --ifm-color-primary: #10a6fa;
   --ifm-color-primary-dark: #0598ea;
   --ifm-color-primary-darker: #0590dd;
@@ -15,21 +27,17 @@
   --ifm-color-primary-lighter: #37b5fb;
   --ifm-color-primary-lightest: #5ec3fc;
 
-  --hero-border-color: rgba(0, 0, 0, 0.1);
-}
-
-:root[data-theme='dark'] {
   --hero-border-color: rgba(255, 255, 255, 0.1);
 }
 
-.hero {
+.hero-divider {
   border-bottom: 1px solid var(--hero-border-color);
 }
 
 @media screen and (max-width: 768px) {
   .hero {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+    padding-top: 2em;
+    padding-bottom: 2em;
   }
 }