From d9789df147a214f26f537b3a0f9090509a5a8c50 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Thu, 1 Feb 2024 18:06:57 -0500
Subject: [PATCH] make the lost mobile-friendly

---
 src/routes/+page.svelte    | 11 +++++++++++
 src/routes/GameList.svelte |  4 ++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 22e2d7f..0a94655 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -77,4 +77,15 @@
     td {
         font-size: var(--font-size-10);
     }
+
+    @media screen and (max-width: 730px) {
+        h1 {
+            font-size: var(--font-size-12);
+        }
+        p {
+            font-size: inherit;
+            margin-left: 1em;
+            margin-right: 1em;
+        }
+    }
 </style>
diff --git a/src/routes/GameList.svelte b/src/routes/GameList.svelte
index c2a4b4a..e5ee804 100644
--- a/src/routes/GameList.svelte
+++ b/src/routes/GameList.svelte
@@ -2,11 +2,11 @@
     {#each games as game}
         <div class="grid top-align">
             <a
-                class="s2"
+                class="s12 m2"
                 target="_blank"
                 href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
                 <img src={game.thumbnail} height="80" /></a>
-            <div class="grid s10">
+            <div class="grid s12 m10">
                 <div class="s8 left-align">
                     <strong>
                         <a