feat: new layout

Author: brunomartins84

src/components/old/AppNavbar.astro

@@ -66,10 +66,9 @@ const isLink = (state: CollectionEntry<"state">) =>
   </div>  
 </div>
 
-<div class="compact-section" style="font-family: 'Inter', sans-serif; font-size: 1.5rem; text-align: center; margin-top: 2em;">
+<div class="compact-section email-section">
   <div class="email-line">
-    Cartazes de shows, só mandar por email:  
-    <a href="mailto:undershowsbr@gmail.com">undershowsbr@gmail.com</a><br>
+    Cartazes de shows, só mandar por email: undershowsbr@gmail.com<br>
   </div>
 </div>
 

src/components/old/GigList.astro

@@ -129,52 +129,4 @@ const gigsByMonth = R.pipe(
       </>
     ))}
   </>
-))}
-
-<style>
-  .gig-container {
-    width: 100%;
-    max-width: 100%;
-    padding: 0 12px;
-    box-sizing: border-box;
-  }
-
-  .gig-poster {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 0 auto;
-  }
-
-  .tickets-btn {
-    display: block;
-    width: 100%;
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 0.5rem;
-    box-sizing: border-box;
-    border-radius: 0 0 10px 10px;
-    text-decoration: none;
-    background-color: #66223d;
-    color: #fff;
-  }
-
-  .tickets-btn:hover .tickets-btn__text {
-    text-decoration: underline;
-  }
-
-  .tickets-btn__icon {
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-    margin-right: 0.5rem;
-  }
-
-  .tickets-btn__text {
-    display: inline-block;
-    padding-top: 0.2rem;
-    vertical-align: top;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 1.3rem;
-  }
-</style>
+))}

src/styles/old.css

@@ -1,3 +1,4 @@
+/* Estilos globais */
 img {
   display: block;
   margin: 0 auto;
@@ -7,46 +8,46 @@ img {
 
 .logo {
   display: block;
-  margin-top: 2rem !important;
+  margin-top: 0;
   margin-left: auto;
   margin-right: auto;
   height: auto;
-  max-width: 200px;
+  max-width: 120px;
 }
 
+/* Layout principal */
 html, body {
   width: 100%;
   max-width: 100%;
   min-width: 0;
   min-height: 100vh;
   overflow-x: hidden;
   margin: 0;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding: 0 0.5rem;
   box-sizing: border-box;
-  background-image: radial-gradient(ellipse at center, pink, gray);
+  background-image: radial-gradient(ellipse at center, #f05291, gray);
   background-repeat: no-repeat;
   background-size: cover;
 }
 
+/* Grid de estados */
 .grid-states {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
   gap: 6px;
   justify-items: center;
   max-width: 900px;
-  margin: 0 auto;
+  margin: 0 auto 1rem;
   padding-top: 4px;
-  padding-bottom: 0;
-  margin-bottom: 1rem;
 }
 
+/* Botões de estado */
 .class1 {
   display: inline-block;
   padding: 10px 14px;
   font-size: 18px;
-  background-color: red;
-  color: white;
+  background-color: #f05291;
+  color: black;
   border-radius: 6px;
   text-align: center;
   text-decoration: none;
@@ -60,15 +61,16 @@ html, body {
 
 .class1.active {
   font-weight: bold;
-  border: 2px solid white;
+  border: 3px solid black;
 }
 
+/* Links padrão e secundário */
 a.class1:link,
 a.class1:visited,
 a.class1:hover,
 a.class1:active {
-  background-color: red;
-  color: white;
+  background-color: #f05291;
+  color: black;
   text-decoration: none;
 }
 
@@ -87,24 +89,32 @@ a.class2:active {
   text-decoration: underline;
 }
 
+/* Área de shows e seção compacta */
 .gig-container,
 .compact-section {
   max-width: 900px;
   width: 100%;
-  margin: 0 auto;
-  margin-bottom: 20px;
+  margin: 0 auto 20px;
   text-align: center;
   padding: 0 1rem;
   box-sizing: border-box;
 }
 
+/* Cartazes dos shows */
+.gig-container img {
+  border: 4px solid #f05291;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+/* Mensagem quando não há shows */
 .no-gigs-message {
   text-align: center;
   font-family: 'Inter', sans-serif;
   font-size: clamp(1rem, 2.5vw, 1.3rem);
   line-height: 1.6;
   padding: 0 1rem;
-  margin: 1rem auto 0 auto;
+  margin: 1rem auto 0;
   max-width: 900px;
   width: 100%;
   box-sizing: border-box;
@@ -114,28 +124,40 @@ a.class2:active {
   justify-content: center;
 }
 
+/* Botão de ingressos */
 .tickets-btn {
   display: block;
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
   padding: 0.5rem;
   box-sizing: border-box;
+  border: 3px solid #f05291;
   border-radius: 0 0 10px 10px;
   text-decoration: none;
-  background-color: #66223d;
+  background-color: #000;
   color: #fff;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.tickets-btn:hover {
+  background-color: #222;
+  border-color: #d44881;
 }
 
 .tickets-btn:hover .tickets-btn__text {
   text-decoration: underline;
 }
 
+/* Ícone e texto do botão de ingressos */
 .tickets-btn__icon {
   display: inline-block;
   width: 30px;
   height: 30px;
   margin-right: 0.5rem;
+  background-color: transparent;
+  border: none;
+  filter: brightness(0) invert(1);
 }
 
 .tickets-btn__text {
@@ -146,65 +168,79 @@ a.class2:active {
   font-size: 1.3rem;
 }
 
+/* Texto adicional geral */
 .compact-section {
   text-align: center;
   line-height: 1.6;
   font-size: 23px;
   color: #000;
   padding: 8px;
-  margin-top: 0 !important;
+  margin-top: 0;
 }
 
+/* Linha do separador tipo \"tesoura\" */
 .scissor-line {
   font-weight: bold;
   word-break: break-word;
   overflow-wrap: break-word;
   font-family: monospace;
 }
 
+/* Linha de email e estilo de links */
+.email-section {
+  font-family: 'Inter', sans-serif;
+  font-size: 1.2rem;
+  text-align: center;
+  margin-top: 1rem;
+}
+
 .email-line {
-  margin: 4px 0;
+  margin: 0.5rem 0;
   font-weight: bold;
 }
 
 .email-line a {
-  color: #002aff;
+  color: inherit;
   text-decoration: none;
 }
 
+/* Títulos e textos gerais */
 .estados-titulo {
   font-family: sans-serif;
-  text-align: center;
   font-size: 24px;
   font-weight: bold;
-  margin-top: 16px;
-  margin-bottom: 0;
+  text-align: center;
+  margin: 16px 0 0;
 }
 
+/* Ajustes de margem entre mês, dia e cidade */
 .gig-month {
   font-family: sans-serif;
   font-size: 24px;
   text-align: center;
   font-weight: bold;
+  margin-bottom: 0; /* cola no dia */
 }
 
 .gig-day {
   font-family: sans-serif;
   font-size: 20px;
   text-align: center;
+  margin-top: 0; /* cola no mês */
+  margin-bottom: 1rem; /* espaço para a cidade */
 }
 
 .gig-city {
   font-family: sans-serif;
-
   font-size: 20px;
   text-align: center;
+  margin-bottom: 0; /* cola no cartaz */
 }
 
+/* Responsividade (até 600px) */
 @media (max-width: 600px) {
   html, body {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding: 2rem 0.5rem 0 0.5rem;
   }
 
   .class1 {
@@ -221,42 +257,36 @@ a.class2:active {
   .compact-section {
     font-size: 16px;
     padding: 0 0.5rem;
-    margin-top: 0 !important;
+    margin-top: 0;
   }
 
   .email-line {
     font-size: 15px;
   }
 
-  .estados-titulo {
-    font-size: 16px;
-    font-weight: bold;
-  }
-
+  .estados-titulo,
   .gig-month {
     font-size: 16px;
     font-weight: bold;
   }
 
-  .gig-day {
-    font-size: 16px;
-  }
-
+  .gig-day,
   .gig-city {
     font-size: 16px;
   }
 
   .tickets-btn__text {
-    font-size: 0.9rem !important;
+    font-size: 0.9rem;
   }
 
   .tickets-btn__icon {
-    width: 20px !important;
-    height: 20px !important;
+    width: 20px;
+    height: 20px;
   }
 
   .logo {
-    max-width: 120px !important;
+    max-width: 120px;
+    margin-top: 0;
   }
 
   .no-gigs-message {
@@ -265,6 +295,7 @@ a.class2:active {
   }
 }
 
+/* Espaçamento padrão entre parágrafos */
 p {
   margin: 0 0 8px 0;
 }