Responsive styling changes

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}

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>

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' />

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='/' />

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

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()}