standarize paddings and improve menu paddings

enredacoop · Nov 13, 2023 · 4999f79 · 4999f79
1 parent c8dc6d1
commit 4999f79
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 20 deletions.
diff --git a/src/css/base.css b/src/css/base.css
@@ -19,6 +19,7 @@
   --default-font-size: 1.11111vw; /* 16px on 1440px width */
 
   --layout-padding-x: 5.19rem; /* 83px */
+  --layout-padding-top: 6.25rem;
   --menu-height: 6.25rem;
   --menu-height-pinned: 5rem;
   --menu-padding-x: 2.5rem;
@@ -54,6 +55,7 @@
   :root {
     --default-font-size: 2.15vw; /* 16px on 1024px width */
     --layout-padding-x: 2.625rem; /* 42px */
+    --layout-padding-top: 2.625rem;
 
     --menu-height: 5rem;
     --menu-height-pinned: 5rem;
@@ -74,6 +76,7 @@
   :root {
     --default-font-size: 4.4vw; /* 16px on 640px width */
     --layout-padding-x: 1.25rem; /* 20px */
+    --layout-padding-top: 2rem;
 
     --font-display-title2: 900 1.5rem / normal var(--display-font);
     --font-text-xxl-2: 500 1rem / 1.5rem var(--body-font);
@@ -308,6 +311,7 @@ header ~ .menu menu {
   display: none;
   position: fixed;
   align-items: start;
+  justify-content: center;
   flex-direction: column;
   gap: 2.25rem;
   top: var(--menu-height);
@@ -319,7 +323,7 @@ header ~ .menu menu {
   transform: translateX(100%);
   transition: transform 0.3s ease-in-out;
   font: var(--font-text-service);
-  padding-top: 10vh;
+  padding-bottom: 12vh;
 }
 header.is-pinned ~ .menu menu {
   top: var(--menu-height-pinned);
@@ -522,7 +526,7 @@ footer .subfooter p a {
   }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 640px) {
   header ~ .menu menu {
     gap: 1.75rem;
   }

diff --git a/src/css/cooperativa.css b/src/css/cooperativa.css
@@ -1,7 +1,8 @@
 .cooperativa section {
   width: 100%;
   margin: auto;
-  padding: 4.38rem;
+  padding: var(--layout-padding-x);
+  padding-top: var(--layout-padding-top);
   max-width: 1920px;
 }
 .cooperativa section.head {
@@ -35,9 +36,6 @@
   height: auto;
 }
 @media screen and (max-width: 1023px) {
-  .cooperativa section.head {
-    padding: 4.38rem;
-  }
   .cooperativa section.head h2 {
     font-size: 2.25rem;
   }
@@ -51,9 +49,6 @@
   }
 }
 @media screen and (max-width: 640px) {
-  .cooperativa section {
-    padding: 3rem 1.4rem;
-  }
   .cooperativa section.head {
     padding: 3rem 1.4rem;
   }

diff --git a/src/css/proyectos.css b/src/css/proyectos.css
@@ -1,19 +1,10 @@
 .proyectos section {
   width: 100%;
   margin: auto;
-  padding: 4.38rem;
+  padding: var(--layout-padding-x);
+  padding-top: var(--layout-padding-top);
   max-width: 1920px;
 }
-@media screen and (max-width: 1023px) {
-  .proyectos section {
-    padding: 2.62rem;
-  }
-}
-@media screen and (max-width: 640px) {
-  .proyectos section {
-    padding: 1.25rem;
-  }
-}
 .proyectos section.head {
   padding-bottom: 0;
 }