Ajustes nas dimensoes

MatheusTKoch · Mar 2, 2025 · 8c24834 · 8c24834
1 parent 1b22e63
commit 8c24834
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 9 deletions.
diff --git a/docs/assets/index-BPZM9qjY.css b/docs/assets/index-BPZM9qjY.css
diff --git a/docs/assets/index-D3jLp7kR.css b/docs/assets/index-D3jLp7kR.css
diff --git a/docs/assets/index-CvkpetrI.js → docs/assets/index-vq7N6J94.js b/docs/assets/index-CvkpetrI.js → docs/assets/index-vq7N6J94.js
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather App</title>
-    <script type="module" crossorigin src="/weather_app/assets/index-CvkpetrI.js"></script>
-    <link rel="stylesheet" crossorigin href="/weather_app/assets/index-BPZM9qjY.css">
+    <script type="module" crossorigin src="/weather_app/assets/index-vq7N6J94.js"></script>
+    <link rel="stylesheet" crossorigin href="/weather_app/assets/index-D3jLp7kR.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -30,7 +30,7 @@ function handleCidade(param) {
   align-items: center;
   min-height: calc(100vh - 160px);
   width: 100%;
-  padding: 2rem; 
+  padding: 2rem;
 }
 
 .content-wrapper {
@@ -40,8 +40,23 @@ function handleCidade(param) {
   justify-content: center;
   gap: 2rem;
   width: 100%;
-  max-width: 500px;
+  max-width: 600px;
   margin: 0 auto;
+  transform: translateX(25%); 
+}
+
+@media (min-width: 1440px) {
+  .content-wrapper {
+    max-width: 700px;
+    transform: translateX(15%);
+  }
+}
+
+@media (min-width: 1920px) {
+  .content-wrapper {
+    max-width: 800px;
+    transform: translateX(10%);
+  }
 }
 
 @media (max-width: 768px) {
@@ -54,6 +69,7 @@ function handleCidade(param) {
   .content-wrapper {
     gap: 1.5rem;
     max-width: 450px;
+    transform: translateX(20%);
   }
 }
 
@@ -67,6 +83,7 @@ function handleCidade(param) {
   .content-wrapper {
     gap: 1rem;
     max-width: 350px;
+    transform: translateX(15%);
   }
 }
 </style>
diff --git a/src/components/Pesquisa.vue b/src/components/Pesquisa.vue
@@ -53,7 +53,7 @@ function pesquisaCidade() {
   width: 100%;
   max-width: 450px; 
   margin: 0 auto;
-  transform: translateX(50%);
+  transform: translateX(18%);
 }
 
 .input {
@@ -147,4 +147,16 @@ function pesquisaCidade() {
     height: 20px;
   }
 }
+
+@media (min-width: 1440px) {
+  .search-container {
+    max-width: 550px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .search-container {
+    max-width: 650px;
+  }
+}
 </style>
diff --git a/src/components/Resultados.vue b/src/components/Resultados.vue
@@ -94,7 +94,27 @@ watch(() => route.params.cidade, (novaCidade) => {
   backdrop-filter: blur(8px);
   background-color: rgba(255, 255, 255, 0.15);
   transition: all 0.3s ease;
-  transform: translateX(50%);
+  transform: translateX(18%);
+}
+
+@media (min-width: 1440px) {
+  .card {
+    max-width: 550px;
+  }
+  
+  .content {
+    min-height: 200px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .card {
+    max-width: 650px;
+  }
+  
+  .content {
+    min-height: 220px;
+  }
 }
 
 .content {