refactor: improve responsiveness

logto-io · Oct 28, 2024 · 165292c · 165292c
1 parent 2244436
commit 165292c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/src/components/Topbar.astro b/src/components/Topbar.astro
@@ -11,12 +11,12 @@ import ByLogto from "./ByLogto.astro";
 </div>
 <style>
   .topbar {
-    max-width: 1280px;
+    max-width: var(--content-max-width);
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 40px;
+    padding: 12px var(--content-padding);
     height: 70px;
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -14,7 +14,7 @@ const { title } = Astro.props;
       name="description"
       content="Auth Wiki is a comprehensive collection of articles, tutorials, and resources about authentication and authorization. Learn about OAuth 2.0, OpenID Connect, SAML, and more."
     />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link
       rel="icon"
@@ -40,6 +40,13 @@ const { title } = Astro.props;
 <style is:global>
   :root {
     --text-color: #fff;
+    --content-max-width: 1280px;
+    --content-padding: 40px;
+  }
+  @media (max-width: 810px) {
+    :root {
+      --content-padding: 24px;
+    }
   }
   * {
     box-sizing: border-box;

diff --git a/src/pages/[slug].astro b/src/pages/[slug].astro
@@ -71,8 +71,8 @@ if (!Content) {
 <style>
   article {
     margin: 0 auto;
-    padding: 0 40px;
-    max-width: 1280px;
+    padding: 0 var(--content-padding);
+    max-width: var(--content-max-width);
     position: relative;
   }
   .background-grid {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -57,12 +57,13 @@ const sections = articles
   </main>
 
   <style>
+    html,
     body {
       overflow-x: hidden;
     }
     header {
       position: relative;
-      padding: 40px;
+      padding: var(--content-padding);
     }
     header p {
       max-width: 760px;
@@ -71,12 +72,12 @@ const sections = articles
       margin: 0;
     }
     main {
-      max-width: 1280px;
+      max-width: var(--content-max-width);
       margin: 0 auto;
     }
     h1 {
       margin-block-start: 200px;
-      margin-block-end: 40px;
+      margin-block-end: var(--content-padding);
       font-size: 92px;
       line-height: 100px;
     }
@@ -98,7 +99,7 @@ const sections = articles
     div.content {
       position: relative;
       height: min-content;
-      padding: 0 40px;
+      padding: 0 var(--content-padding);
     }
     div.cards {
       margin: 0 auto;
@@ -109,5 +110,15 @@ const sections = articles
       justify-content: center;
       width: 100%;
     }
+    @media (max-width: 810px) {
+      h1 {
+        margin-block-start: 100px;
+        font-size: 72px;
+        line-height: 80px;
+      }
+      div.cards {
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      }
+    }
   </style>
 </Layout>