From aab447686c40cbd824051690ac1da9b2b57e3a92 Mon Sep 17 00:00:00 2001
From: Linze <101081884+happylinze@users.noreply.github.com>
Date: Mon, 3 Jun 2024 03:38:57 +0800
Subject: [PATCH] Update jekyll-theme-cayman.scss

---
 _sass/jekyll-theme-cayman.scss | 92 +++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 41 deletions(-)

diff --git a/_sass/jekyll-theme-cayman.scss b/_sass/jekyll-theme-cayman.scss
index ee7c82a..3b1c27a 100644
--- a/_sass/jekyll-theme-cayman.scss
+++ b/_sass/jekyll-theme-cayman.scss
@@ -21,6 +21,57 @@
   }
 }
 
+// Make sure to use your actual SASS file location
+.site {
+  margin: 0 auto;
+  max-width: 1000px;
+  padding: 2rem 1rem;
+  
+  @media screen and (max-width: 1440px) {
+      .wrapper {
+          padding: 1em;
+      }
+
+      nav {
+          font-size: 16px;
+      }
+  }
+  @media screen and (max-width: 768px) {
+      .wrapper {
+          padding: 1em;
+      }
+
+      nav {
+          font-size: 14px;
+      }
+  }
+
+  @media screen and (max-width: 480px) {
+    font-size: 14px;
+
+    .wrapper {
+        padding: 1em;
+    }
+
+    header, .site-footer, .page {
+        padding: 1em;
+    }
+
+    nav {
+        font-size: 12px;
+    }
+  }
+}
+nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    @media screen and (max-width: 1440px) {
+        flex-direction: column;
+    }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -63,47 +114,6 @@ a {
 .main-content {
     text-align: justify;
 }
-// Make sure to use your actual SASS file location
-.site {
-  margin: 0 auto;
-  max-width: 1000px;
-  padding: 2rem 1rem;
-
-  @media screen and (max-width: 768px) {
-      .wrapper {
-          padding: 1em;
-      }
-
-      nav {
-          font-size: 14px;
-      }
-  }
-
-  @media screen and (max-width: 480px) {
-    font-size: 14px;
-
-    .wrapper {
-        padding: 1em;
-    }
-
-    header, .site-footer, .page {
-        padding: 1em;
-    }
-
-    nav {
-        font-size: 12px;
-    }
-  }
-}
-nav {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    @media screen and (max-width: 480px) {
-        flex-direction: column;
-    }
-}
 
 .btn {
   display: inline-block;