feat: refine styles

Author: S-N-O-R-L-A-X

src/components/Header/Header.tsx

@@ -15,7 +15,7 @@ export default function Header() {
         Welcome to my site. I'm SNORLAX.
       </p>
       <FlexBox>
-        <MoneyButton style={{ "margin": "1rem" }} onClick={clickHandler}> Sponsor me </MoneyButton>
+        <MoneyButton className="sponsor" onClick={clickHandler}> Sponsor me </MoneyButton>
         <Octocat />
       </FlexBox>
       <SponsorDialog open={isDialogOpen} closeHandler={() => { setIsDialogOpen(false) }} />

src/components/Header/index.css

@@ -1,9 +1,6 @@
 .github-corner {
   border-bottom: 0;
-  position: fixed;
-  right: 0;
   text-decoration: none;
-  top: 0;
   z-index: 1;
 }
 
@@ -46,8 +43,12 @@
   width: var(--header-height);
 }
 
+.sponsor {
+  margin: 1rem
+}
+
 .marquee {
-  width: 60%;
+  /* width: 55%; */
   font-family: "华文彩云";
   font-size: 3rem;
   margin: 0;
@@ -59,14 +60,14 @@
 
 @keyframes marquee {
   0% {
-    transform: translate(50%, 0);
+    transform: translate(33%, 0);
   }
 
   50% {
     transform: translate(0%, 0);
   }
 
   100% {
-    transform: translate(50%, 0);
+    transform: translate(33%, 0);
   }
 }

src/index.css

@@ -41,9 +41,7 @@ h1 {
 }
 
 button {
-  border-radius: 8px;
   border: 1px solid transparent;
-  padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
@@ -52,15 +50,6 @@ button {
   transition: border-color 0.25s;
 }
 
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/views/Layout/index.css

@@ -4,6 +4,8 @@
   height: var(--header-height);
   right: 0;
   top: 0;
+  display: flex;
+  justify-content: space-between;
 }
 
 .content {