fix: mobile layout

brunomartins84 · brunomartins84 · commit 21db8bebfa66 · 2025-12-05T00:47:35.000-03:00
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -55,6 +55,7 @@ function formatDate(dateStr) {
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Undershows">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <link rel="preload" as="image" href="https://undershows.nyc3.cdn.digitaloceanspaces.com/logo-undershows.webp" />
 
     <style>
       * {
@@ -85,12 +86,6 @@ function formatDate(dateStr) {
         display: block;
       }
 
-      h1 {
-        margin: 8px 0 20px;
-        font-size: 1.4rem;
-        letter-spacing: 0.08em;
-      }
-
       .states-grid {
         display: flex;
         flex-wrap: wrap;
@@ -164,15 +159,15 @@ function formatDate(dateStr) {
       }
 
       .shows {
-        margin-top: 24px;
+        margin-top: 16px;
         display: flex;
         flex-direction: column;
-        gap: 24px;
+        gap: 12px;
       }
 
       .show-card {
         text-align: center;
-        margin: 0 auto 32px;
+        margin: 0 auto 12px;
         max-width: 460px;
       }
 
@@ -236,8 +231,16 @@ function formatDate(dateStr) {
 
   <body>
     <main>
-      <img src="/logo-undershows.png" alt="Undershows" class="logo" />
-      <h1>ESTADOS / STATES</h1>
+      <picture>
+        <source srcset="https://undershows.nyc3.cdn.digitaloceanspaces.com/logo-undershows.webp" type="image/webp" />
+        <img
+          src="https://undershows.nyc3.cdn.digitaloceanspaces.com/logo-undershows.png"
+          alt="Undershows"
+          class="logo"
+          width="180"
+          height="180"
+        />
+      </picture>
 
       <div class="states-grid">
         {states.map((uf) => (
