From 9ce5a90cb82c5cf8f0be3c1ba23d71a2df911c48 Mon Sep 17 00:00:00 2001
From: lesenelir <hi@lesenelir.me>
Date: Sat, 18 Nov 2023 19:42:25 +0800
Subject: [PATCH] fix: adapt to common mobile layout css

---
 app/globals.css            | 11 +++++++++--
 app/quick-start/Header.tsx |  6 +++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 8a323cc..ed703d8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -150,7 +150,7 @@ h2 {
 }
 
 .header-cont {
-  padding: 0 15px 0 15px;
+  padding: 0 8px 0 8px;
   display: flex;
   justify-content: space-between;
   height: 60px;
@@ -172,6 +172,13 @@ h2 {
   margin: 5px;
 }
 
+/* support Samsung Galaxy S8+ */
+@media screen and (max-width: 380px) {
+  .header-btn {
+    font-size: 14px;
+  }
+}
+
 a {
   text-decoration: none;
   height: max-content;
@@ -199,7 +206,7 @@ a {
 .link-cont {
   display: flex;
   align-items: center;
-  gap: 25px;
+  gap: 20px;
 }
 
 .home-btn {
diff --git a/app/quick-start/Header.tsx b/app/quick-start/Header.tsx
index c81ed42..07dfc51 100644
--- a/app/quick-start/Header.tsx
+++ b/app/quick-start/Header.tsx
@@ -2,9 +2,9 @@
 
 import React from "react";
 import Hamburger from "./Hamburger";
-import { AiFillGithub } from "react-icons/ai"
+import { AiFillGithub } from "react-icons/ai";
 import { atom, useAtom } from "jotai";
-import { BsSun, BsFillMoonStarsFill } from "react-icons/bs"
+import { BsSun, BsFillMoonStarsFill } from "react-icons/bs";
 
 const theme = atom('light');
 export const themeAtom = atom(get => get(theme), (get, set) => {
@@ -48,4 +48,4 @@ function Header() {
   );
 }
 
-export default Header;
\ No newline at end of file
+export default Header;