FIX Main sizes

migmoroni · Jul 8, 2024 · ce3be24 · ce3be24
1 parent 8f63d7b
commit ce3be24
Showing 1 changed file with 72 additions and 15 deletions.
diff --git a/css/style.css b/css/style.css
@@ -30,7 +30,6 @@ h1 {
     flex-direction: column;
     align-items: center;
     width: 100%;
-    max-width: 80vw;
     flex: 1;
     padding-top: 20px;
     box-sizing: border-box;
@@ -379,6 +378,10 @@ button.item:active {
         padding-bottom: 1vh; /* Afasta a barra de rolagem do conteúdo */
     }
 
+    .main {
+        max-width: 90vw;
+    }
+
     .sidebar, .sidebarDonate{
         height: 76vh;
         width: 90vw;
@@ -418,6 +421,10 @@ button.item:active {
         margin-bottom: 12.5vh;
     }
 
+    .main {
+        max-width: 85vw;
+    }
+
     .sidebar, .sidebarDonate{
         height: 92vh;
         width: 48vw;
@@ -456,6 +463,10 @@ button.item:active {
         margin-bottom: 12.5vh;
     }
 
+    .main {
+        max-width: 80vw;
+    }
+
     .sidebar, .sidebarDonate{
         height: 92vh;
         width: 48vw;
@@ -494,6 +505,10 @@ button.item:active {
         margin-bottom: 12.5vh;
     }
 
+    .main {
+        max-width: 70vw;
+    }
+
     .sidebar, .sidebarDonate{
         height: 92vh;
         width: 40vw;
@@ -503,6 +518,8 @@ button.item:active {
         height: 8vh;
         flex-direction: row;
         justify-content: space-between;
+        border-radius: 0;
+        width: 100%;
     }
 
     .downloadButton {
@@ -535,10 +552,12 @@ button.item:active {
         width: 30vw;
     }
 
-    .menuBar{
+    .menuBar {
+        height: 8vh;
         flex-direction: row;
         justify-content: space-between;
-        height: 8vh;
+        border-radius: 0;
+        width: 100%;
     }
 
     .downloadButton {
@@ -569,10 +588,12 @@ button.item:active {
         width: 25vw;
     }
 
-    .menuBar{
+    .menuBar {
+        height: 8vh;
         flex-direction: row;
         justify-content: space-between;
-        height: 8vh;
+        border-radius: 0;
+        width: 100%;
     }
 
     .downloadButton {
@@ -581,6 +602,14 @@ button.item:active {
         transform: translateX(-50%);
         width: 15vh;
     }
+
+    .buttonBlue{
+        margin-left: 15vw;
+    }
+
+    .button{
+        margin-right: 15vw;
+    }
 }
 
 @media (min-aspect-ratio: 16/9) {
@@ -602,17 +631,27 @@ button.item:active {
         width: 20vw;
     }
 
-    .menuBar{
+    .menuBar {
+        height: 8vh;
         flex-direction: row;
         justify-content: space-between;
-        height: 8vh;
+        border-radius: 0;
+        width: 100%;
     }
 
     .downloadButton {
         left: 50%;
         transform: translateX(-50%);
         width: 15vh;
     }
+
+    .buttonBlue{
+        margin-left: 20vw;
+    }
+
+    .button{
+        margin-right: 20vw;
+    }
 }
 
 @media (min-aspect-ratio: 18/9) {
@@ -634,16 +673,26 @@ button.item:active {
         width: 18vw;
     }
 
-    .menuBar{
+    .menuBar {
+        height: 8vh;
         flex-direction: row;
         justify-content: space-between;
-        height: 8vh;
+        border-radius: 0;
+        width: 100%;
     }
 
     .downloadButton {
         left: 50%;
         transform: translateX(-50%);
     }
+
+    .buttonBlue{
+        margin-left: 25vw;
+    }
+
+    .button{
+        margin-right: 25vw;
+    }
 }
 
 @media (min-aspect-ratio: 22/9) {
@@ -667,8 +716,12 @@ button.item:active {
         width: 15vw;
     }
 
-    .menuBar{
+    .menuBar {
         height: 8vh;
+        flex-direction: row;
+        justify-content: space-between;
+        border-radius: 0;
+        width: 100%;
     }
 
     .downloadButton {
@@ -677,11 +730,11 @@ button.item:active {
     }
 
     .buttonBlue{
-        margin-left: 40vw;
+        margin-left: 30vw;
     }
 
     .button{
-        margin-right: 40vw;
+        margin-right: 30vw;
     }
 }
 
@@ -705,20 +758,24 @@ button.item:active {
         width: 12vw;
     }
 
-    .menuBar{
+    .menuBar {
         height: 8vh;
+        flex-direction: row;
+        justify-content: space-between;
+        border-radius: 0;
+        width: 100%;
     }
 
     .downloadButton {
         margin-bottom: 15px;
     }
 
     .buttonBlue{
-        margin-left: 25vw;
+        margin-left: 35vw;
     }
 
     .button{
-        margin-right: 25vw;
+        margin-right: 35vw;
     }
 }