chore: fix website layout in small viewport (#19)

ocavue · Jan 19, 2025 · 597681f · 597681f
1 parent 8a07385
commit 597681f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 42 deletions.
diff --git a/website/components/nav.astro b/website/components/nav.astro
@@ -16,5 +16,13 @@ import NavLink from './nav-link.astro'
     align-items: center;
     gap: 10px;
     margin-bottom: 80px;
+    overflow-x: hidden;
+    font-size: 1rem;
+  }
+
+  @media (max-width: 50rem) {
+    .nav {
+      flex-direction: column;
+    }
   }
 </style>
diff --git a/website/layouts/Layout.astro b/website/layouts/Layout.astro
@@ -65,6 +65,7 @@ import LogoBackgroundAstro from '../components/logo-background-astro.astro'
     color: var(--text-color);
     font-size: 20px;
     line-height: 1.6;
+    overflow-x: hidden;
   }
 
   h1 {

diff --git a/website/pages/custom.astro b/website/pages/custom.astro
@@ -8,15 +8,13 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
-  <main>
-    <div class="instructions">
-      <ThemeToggleButton  />
-    </div>
-    <Nav />
+  <div class="instructions">
+    <ThemeToggleButton />
+  </div>
+  <Nav />
 
-    <div style="display: flex; flex-direction: column; gap: 20px;">
-      <Code code={buttonCode} lang="astro" title="theme-toggle-button.astro" />
-      <Code code={headCode} lang="astro" title="head.astro" />
-    </div>
-  </main>
+  <div style="display: flex; flex-direction: column; gap: 20px;">
+    <Code code={buttonCode} lang="astro" title="theme-toggle-button.astro" />
+    <Code code={headCode} lang="astro" title="head.astro" />
+  </div>
 </Layout>
diff --git a/website/pages/index.astro b/website/pages/index.astro
@@ -8,15 +8,13 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
-  <main>
-    <div class="instructions">
-      <ThemeToggleButton  />
-    </div>
-    <Nav />
+  <div class="instructions">
+    <ThemeToggleButton />
+  </div>
+  <Nav />
 
-    <div style="display: flex; flex-direction: column; gap: 20px;">
-      <Code code={buttonCode} lang="astro" title="theme-toggle-button.astro" />
-      <Code code={headCode} lang="astro" title="head.astro" />
-    </div>
-  </main>
+  <div style="display: flex; flex-direction: column; gap: 20px;">
+    <Code code={buttonCode} lang="astro" title="theme-toggle-button.astro" />
+    <Code code={headCode} lang="astro" title="head.astro" />
+  </div>
 </Layout>
diff --git a/website/pages/react.astro b/website/pages/react.astro
@@ -9,16 +9,14 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
-  <main>
-    <div class="instructions">
-      <ThemeToggleButtonReact client:load />
-    </div>
-    <Nav />
+  <div class="instructions">
+    <ThemeToggleButtonReact client:load />
+  </div>
+  <Nav />
 
-    <div style="display: flex; flex-direction: column; gap: 20px;">
-      <Code code={buttonCode} lang="tsx" title="theme-toggle-button-react.tsx" />
-      <Code code={headCode} lang="astro" title="head.astro" />
-      <Code code={iconCssCode} lang="css" title="icon.css" />
-    </div>
-  </main>
+  <div style="display: flex; flex-direction: column; gap: 20px;">
+    <Code code={buttonCode} lang="tsx" title="theme-toggle-button-react.tsx" />
+    <Code code={headCode} lang="astro" title="head.astro" />
+    <Code code={iconCssCode} lang="css" title="icon.css" />
+  </div>
 </Layout>
diff --git a/website/pages/vue.astro b/website/pages/vue.astro
@@ -9,16 +9,14 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
-  <main>
-    <div class="instructions">
-      <ThemeToggleButtonVue client:load />
-    </div>
-    <Nav />
+  <div class="instructions">
+    <ThemeToggleButtonVue client:load />
+  </div>
+  <Nav />
 
-    <div style="display: flex; flex-direction: column; gap: 20px;">
-      <Code code={buttonCode} lang="vue" title="theme-toggle-button-vue.vue" />
-      <Code code={headCode} lang="astro" title="head.astro" />
-      <Code code={iconCssCode} lang="css" title="icon.css" />
-    </div>
-  </main>
+  <div style="display: flex; flex-direction: column; gap: 20px;">
+    <Code code={buttonCode} lang="vue" title="theme-toggle-button-vue.vue" />
+    <Code code={headCode} lang="astro" title="head.astro" />
+    <Code code={iconCssCode} lang="css" title="icon.css" />
+  </div>
 </Layout>