Better support the mobile size

Author: cbhua

src/components/games/GameCard.astro

@@ -132,14 +132,22 @@ const { title, slug, summary, status, components, locale, cover } = Astro.props;
     line-height: 1.6;
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .game-card {
       flex-direction: column;
+      gap: var(--space-6);
     }
 
     .game-card__cover {
       flex: none;
       width: 100%;
+      aspect-ratio: 16 / 9;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .game-card {
+      padding: var(--space-6);
     }
   }
 </style>

src/components/layout/Footer.astro

@@ -74,4 +74,14 @@ const year = new Date().getFullYear();
     padding-top: var(--space-4);
     border-top: var(--guideline-width) solid var(--guideline-color);
   }
+
+  @media (max-width: 480px) {
+    .footer__inner {
+      grid-template-columns: 1fr;
+    }
+
+    .footer__right {
+      margin-top: var(--space-2);
+    }
+  }
 </style>

src/components/layout/Header.astro

@@ -123,8 +123,20 @@ const currentPath = Astro.url.pathname;
   }
 
   @media (max-width: 640px) {
+    .header__inner {
+      gap: var(--space-3);
+    }
+
+    .header__logo-img {
+      height: 1.2rem;
+    }
+
     .header__nav-list {
-      gap: var(--space-4);
+      gap: var(--space-3);
+    }
+
+    .header__locale {
+      display: none;
     }
   }
 </style>

src/pages/games/[slug].astro

@@ -139,12 +139,11 @@ const related = allResearch.filter((r) => r.data.game === slug && !r.data.draft)
   @media (max-width: 768px) {
     .game-header {
       grid-template-columns: 1fr;
+      gap: var(--space-6);
     }
 
     .game-header__cover {
-      width: 100%;
-      max-width: 240px;
-      padding-top: 0;
+      display: none;
     }
   }
 

src/pages/research/[slug].astro

@@ -87,4 +87,14 @@ const dateStr = post.data.publishDate.toLocaleDateString("en-US", {
     font-size: var(--text-xs);
     color: var(--c-gray-400);
   }
+
+  @media (max-width: 480px) {
+    .research-header {
+      padding: var(--space-8) 0 var(--space-6);
+    }
+
+    .research-header__title {
+      font-size: var(--text-2xl);
+    }
+  }
 </style>

src/styles/global.css

@@ -15,6 +15,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 body {
@@ -91,6 +92,12 @@ button {
   padding-inline: var(--space-6);
 }
 
+@media (max-width: 480px) {
+  .container {
+    padding-inline: var(--space-4);
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

src/styles/prose-game.css

@@ -8,6 +8,7 @@
   line-height: 1.8;
   color: var(--c-ink);
   max-width: 72ch;
+  overflow-wrap: break-word;
 }
 
 .prose-game h1,

src/styles/prose-research.css

@@ -8,6 +8,7 @@
   line-height: 1.8;
   color: var(--c-ink);
   max-width: 65ch;
+  overflow-wrap: break-word;
 }
 
 .prose-research h1,