Fix: games and apps page looking weird on mobile

titaniumnetwork-dev · Jul 30, 2024 · b5d277d · b5d277d
1 parent 2a83736
commit b5d277d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/pages/apps.astro b/src/pages/apps.astro
@@ -18,7 +18,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
                 <input oninput="searchApps(this.value)" class="flex flex-grow h-[42px] text-[14px] border-none text-[--text-color] bg-inherit outline-none" placeholder="Search apps" id="app-input"></input> 
             </div>
         </div>
-        <div class="mt-[10px] mb-[30px] w-full grid justify-between gap-[20px] grid-cols-[repeat(auto-fill,166px)]">
+        <div class="mt-[10px] mb-[30px] w-full grid justify-center md:justify-between gap-[20px] grid-cols-[repeat(2,60%)] md:grid-cols-[repeat(auto-fill,166px)]">
             <div data-name="google" onclick="openApp('https://google.com')" class="transition-all hover:scale-105 h-[166px] w-[166px] rounded-[5px] border-transparent bg-cover cursor-pointer">
                 <Image loading="eager" class="rounded-[5px]" src={images["/src/assets/apps/google.jpg"]()} alt="Google Logo" />
             </div>

diff --git a/src/pages/gs/index.astro b/src/pages/gs/index.astro
@@ -23,7 +23,7 @@ if (!GAMES_LINK) {
                 <input oninput="searchGames(this.value)" class="flex flex-grow h-[42px] text-[14px] border-none text-[--text-color] bg-inherit outline-none" placeholder="Search games" id="app-input"></input> 
             </div>
         </div>
-        <div class="mt-[10px] pb-[60px] w-full grid justify-between gap-[20px] grid-cols-[repeat(auto-fill,166px)]">
+        <div class="mt-[10px] pb-[60px] w-full grid justify-center md:justify-between gap-[20px] grid-cols-[repeat(2,60%)] md:grid-cols-[repeat(auto-fill,166px)]">
             {games.default.map((game) => (
                 <a href={`/gs/${btoa(game.name)}?py=${game.proxy}&url=${btoa(game.url)}&bf=${btoa(game.baseFile)}`} data-name={game.name} class="transition-all hover:scale-105 h-[166px] w-[166px] rounded-[5px] border-transparent bg-cover cursor-pointer">
                     <Image loading="lazy" class="object-cover w-[166px] h-[166px] rounded-[5px]" src={images[game.img]()} alt={`${game.name}'s logo`} />