Support Light and Dark mode

Author: Magicherry

src/components/Home/Home2.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Container, Row, Col, Modal, Button } from "react-bootstrap";
+import { Container, Row, Col, Modal } from "react-bootstrap";
 import Tilt from "react-parallax-tilt";
 import { AiFillGithub, AiOutlineDownload } from "react-icons/ai";
 import { SiBilibili } from "react-icons/si";
@@ -86,8 +86,7 @@ function Home2() {
                                     href={cvFile}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    className="floating-nav-ghost-btn"
-                                    style={{ maxWidth: '200px' }}
+                                    className="download-cv-button"
                                 >
                                     <AiOutlineDownload />
                                     <span>Download CV</span>

src/components/Resume/ResumeNew.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { Container, Row, Button, Spinner, ProgressBar } from "react-bootstrap";
+import { Container, Row, Spinner, ProgressBar } from "react-bootstrap";
 import { AiOutlineDownload } from "react-icons/ai";
 import { Document, Page, pdfjs } from "react-pdf";
 import pdf from "../../Assets/cv/Yuting_Zhou_CV.pdf";
@@ -43,8 +43,7 @@ const DownloadButton = () => (
             href={pdf}
             target="_blank"
             rel="noopener noreferrer"
-            className="floating-nav-ghost-btn"
-            style={{ maxWidth: '200px' }}
+            className="download-cv-button"
         >
             <AiOutlineDownload />
             <span>Download CV</span>

src/css/style.css

@@ -3356,11 +3356,12 @@ body.homepage .home-about-section {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid var(--border-medium) !important;
-    padding: 11px 34px !important;
+    padding: 12px 36px !important;
     border-radius: var(--button-radius-pill) !important;
     font-size: 1.15rem !important;
     font-weight: 600 !important;
     letter-spacing: 0.5px !important;
+    text-decoration: none !important;
     transition: var(--button-transition) !important;
     box-shadow: var(--shadow-drop-md) !important;
 }
@@ -3370,6 +3371,8 @@ body.homepage .home-about-section {
     box-shadow: var(--shadow-drop-lg) !important;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
+    text-decoration: none !important;
+    color: var(--button-pill-text) !important;
 }
 
 .download-cv-button:active {
@@ -3378,7 +3381,7 @@ body.homepage .home-about-section {
 }
 
 .download-cv-button svg {
-    font-size: 1.5em !important; /* Adjust icon size */
+    font-size: 1.4em !important; /* Adjust icon size */
     margin-right: 8px;
 }
 
@@ -3390,7 +3393,7 @@ body.homepage .home-about-section {
     }
 
     .download-cv-button svg {
-        font-size: 1.4em !important;
+        font-size: 1.3em !important;
     }
 }