From 3e19a693ca03f5379b7b414c4188f718cecad24d Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Fri, 21 Feb 2025 13:27:08 -0600
Subject: [PATCH] Responsive styling changes

---
 src/components/Header.astro          | 2 +-
 src/components/Sidebar.astro         | 2 +-
 src/components/header/LoginNav.astro | 2 +-
 src/layouts/base.astro               | 1 +
 src/pages/album/[id].astro           | 4 ++--
 src/pages/index.astro                | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index c567285..47d69a3 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -32,7 +32,7 @@ const { session } = Astro.locals
       <a href='/'>
         <Image
           src={Astro.currentLocale === 'es' ? logoEs : logo}
-          class='h-full py-0.5 w-auto'
+          class='h-full md:py-0.5 w-auto mx-auto md:mx-0'
           alt='logo'
           height={150}
           width={265}
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index dec096c..99f0074 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -18,7 +18,7 @@ const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
 ---
 
-<div class='w-3/12 max-w-[300px] bg-dark flex flex-col'>
+<div class='md:w-3/12 md:max-w-[300px] bg-dark flex flex-col'>
   <a href='#' class={listClass}>{m.lastAddedSidebar()}</a>
   <a href='#' class={listClass}>{m.getLucky()}</a>
   <a href='#' class={listClass}>{m.randomPull()}</a>
diff --git a/src/components/header/LoginNav.astro b/src/components/header/LoginNav.astro
index 63ac024..50893a2 100644
--- a/src/components/header/LoginNav.astro
+++ b/src/components/header/LoginNav.astro
@@ -6,7 +6,7 @@ import LogoutBtn from './LogoutButton'
 const session = Astro.locals.session
 ---
 
-<div class='ms-auto'>
+<div class='ms-auto hidden md:block'>
   {
     session ? (
       <LogoutBtn client:only='react' />
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 071f3d9..5dc280d 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -20,6 +20,7 @@ import 'styles/global.css'
       href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'
       rel='stylesheet'
     />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
 
     <meta name='theme-color' content='#ffffff' />
     <meta property='og:url' content='/' />
diff --git a/src/pages/album/[id].astro b/src/pages/album/[id].astro
index 1bfc114..26b7e8d 100644
--- a/src/pages/album/[id].astro
+++ b/src/pages/album/[id].astro
@@ -47,8 +47,8 @@ const { currentLocale } = Astro
 </style>
 
 <BaseLayout>
-  <div class='flex flex-col flex-1 max-w-[2000px] px-10 py-3'>
-    <div class='flex gap-x-3'>
+  <div class='flex flex-col flex-1 max-w-[2000px] px-4 md:px-10 py-3'>
+    <div class='flex flex-col md:flex-row gap-x-3'>
       <div class='flex-1'>
         <div class='size-full relative cursor-pointer'>
           <Image
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7d00b9a..f1c0f11 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -19,7 +19,7 @@ const lastAlbums = await prismaClient.albums.findMany({
 ---
 
 <BaseLayout>
-  <div class='flex flex-1 max-w-[2000px]'>
+  <div class='flex flex-col md:flex-row flex-1 max-w-[2000px]'>
     <div class='flex-1 px-2'>
       <h1 class='uppercase font-medium tracking-wide text-5xl drop-shadow-2xl mt-5 mb-2 text-center'>
         {m.recentReleases()}