feat: 修改样式

west2-online · Sep 4, 2024 · 49161bc · 49161bc
1 parent 9c6d5c6
commit 49161bc
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 35 deletions.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -6,28 +6,36 @@
 
 
 :root {
-  --ifm-color-primary: #0d96ff;
-  --ifm-color-primary-dark: #47afff;
-  --ifm-color-primary-darker: #5ab7ff;
-  --ifm-color-primary-darkest: #80c8ff;
-  --ifm-color-primary-light: #a6d9ff;
-  --ifm-color-primary-lighter: #b9e1ff;
-  --ifm-color-primary-lightest: #f3faff;
+  --ifm-color-primary: #995900;
+  --ifm-color-primary-dark: #8a5000;
+  --ifm-color-primary-darker: #824c00;
+  --ifm-color-primary-darkest: #6b3e00;
+  --ifm-color-primary-light: #a86200;
+  --ifm-color-primary-lighter: #b06600;
+  --ifm-color-primary-lightest: #995900;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-footer-padding-vertical: 1.6rem;
+
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-color-primary: #fdcc82;
+  --ifm-color-primary-dark: #fcbd5c;
+  --ifm-color-primary-darker: #fcb549;
+  --ifm-color-primary-darkest: #fcad37;
+  --ifm-color-primary-light: #fedba8;
+  --ifm-color-primary-lighter: #fee3bb;
+  --ifm-color-primary-lightest: #fffaf3;
+  --ifm-color-secondary: #995900;
+  --ifm-color-secondary-dark: #8a5000;
+  --ifm-color-secondary-darker: #824c00;
+  --ifm-color-secondary-darkest: #6b3e00;
+  --ifm-color-secondary-light: #a86200;
+  --ifm-color-secondary-lighter: #b06600;
+  --ifm-color-secondary-lightest: #995900;
+  /* --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); */
 }
 
 
@@ -43,3 +51,6 @@
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
 }
 
+/* .menu__list-item a {
+  font-size: 16px !important;
+} */
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -61,11 +61,12 @@
   flex-wrap: wrap;
   align-items: center;
   margin-top: 24px;
+
 }
 
-.indexCtas a,
+/* .indexCtas a, */
 .indexCtas a:hover {
-  color: black;
+  color: white !important;
 }
 
 .indexCtas a:last-of-type {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,28 +1,35 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
-import Lottie from 'react-lottie'
-import logoData from '../../static/lottie/logo.json'
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Heading from "@theme/Heading";
+import Lottie from "react-lottie";
+import logoData from "../../static/lottie/logo.json";
 
-import styles from './index.module.css';
+import styles from "./index.module.css";
 
 function HomepageHeader() {
   return (
     <div className={styles.hero} data-theme="dark">
       <div className={styles.heroInner}>
         <Heading as="h1" className={styles.heroProjectTagline}>
-          <div className={clsx(styles.heroLogo, 'w-[200px]', 'aspect-square', 'bg-white')}>
+          <div
+            className={clsx(
+              styles.heroLogo,
+              "w-[200px]",
+              "aspect-square",
+              "bg-white"
+            )}
+          >
             <Lottie
               options={{
                 loop: false,
                 autoplay: true,
                 animationData: logoData,
                 rendererSettings: {
-                  preserveAspectRatio: 'xMidYMid slice'
-                }
+                  preserveAspectRatio: "xMidYMid slice",
+                },
               }}
               height={200}
               width={200}
@@ -32,18 +39,18 @@ function HomepageHeader() {
             className={styles.heroTitleTextHtml}
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: 'The <b>Organization</b> for fzuers'
+              __html: "The <b>Organization</b> for FZUers",
             }}
           />
         </Heading>
-        <Heading as="h2" className='text-white'>
+        <Heading as="h2" className="text-white">
           西二在线成立于 1998 年，是福州大学最大的学生组织
         </Heading>
         <div className={styles.indexCtas}>
-          <Link className="button button--primary" to="/docs/intro">
+          <Link className="button button--primary text-black" to="/docs/intro">
             关于我们
           </Link>
-          <Link className="button button--info" to="/docs/recruitment">
+          <Link className="button button--secondary" to="/docs/recruitment">
             加入我们
           </Link>
         </div>
@@ -53,11 +60,12 @@ function HomepageHeader() {
 }
 
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="west2-online's organization introduction index page">
+      description="west2-online's organization introduction index page"
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />