styles futer format v 1.2.1

ita-social-projects · Nov 1, 2024 · d8e5230 · d8e5230
1 parent 120d0f0
commit d8e5230
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 50 deletions.
diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css
@@ -1,6 +1,5 @@
 .App {
   /*for footer correct work*/
-  /* width: var(--main-block-size); TODO */
   display: flex;
   min-height: 100vh;
   flex-direction: column;

diff --git a/FrontEnd/src/components/Footer/Footer.module.css b/FrontEnd/src/components/Footer/Footer.module.css
@@ -3,32 +3,32 @@
     width: 100vw;
     background: var(--footer-backround);
     background-size: cover;
-    justify-content: space-around;
+    justify-content: center;
 }
 
 .footer-content {
     display: flex;
     flex-direction: column;
-    padding: 20px;
-    min-width: 343px;
-    max-width: 572px;
-    gap: 24px;
+    justify-content: space-around;
+    padding: 32px 24px;
+    width: 327px;
+    height: 679px;
+    gap: 32px;
 }
 
 @media only screen and (min-width: 768px) {
     .footer-content {
-        display: flex;
-        flex-direction: column;
-        min-width: 580px;
-        max-width: 720px;
+        width: 720px;
+        height: 500px;
     }
 }
 
 @media only screen and (min-width: 1512px) {
     .footer-content {
         display: flex;
         flex-direction: row;
-        max-width: 1512px;
-        gap: 70px;
+        width: 1304px;
+        height: 205px;
+        padding: 32px 104px;
     }
 }
diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterAddress.module.css
@@ -1,11 +1,10 @@
 .footer-address__block {
     display: flex;
     flex-direction: column;
-    gap: 24px;
+    gap: 35px;
 }
 
 .footer-logo {
-    padding-top: 10px;
     width: 208px;
     height: 30px;
 }
@@ -24,7 +23,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    padding-top: 20px;
+    padding-top: 7px;
     gap: 10px;
 }
 
@@ -62,12 +61,10 @@
 @media only screen and (min-width: 768px) {
     .footer-address__block {
         flex-direction: column;
-        gap: 10px;
-        max-width: 560px;
     }
 
     .footer-address__contacts {
-        padding-left: 32px;
+        padding-left: 35px;
     }
 
     .footer-address__text{
@@ -76,12 +73,6 @@
 }
 
 @media only screen and (min-width: 1512px) {
-    .footer-address__block {
-        flex-direction: column;
-        gap: 35px;
-        max-width: 260px;
-    }
-
     .footer-address__text {
         flex-direction: column;
     }

diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterNavigation.module.css
@@ -1,5 +1,6 @@
 .navigation-content {
     display: flex;
+    padding-top: 7px;
 }
 
 .navigation-content__company,
@@ -48,10 +49,7 @@
 
 @media only screen and (min-width: 768px) {
     .navigation-content__section {
-        padding-left: 220px;
-    }
-    .navigation-content {
-       padding-top: 25px;
+        padding-left: 250px;
     }
 }
 
@@ -65,13 +63,11 @@
 
     .navigation-content__company,
     .navigation-content__section {
-        display: flex;
-        flex-direction: column;
         gap: 0;
     }
 
     .navigation-content__section {
-        padding: 35px 0 5px;
+        padding: 35px 0 0;
     }
 
     .navigation-content-section__text-block,

diff --git a/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css b/FrontEnd/src/components/Footer/FooterComponents/FooterPolicy.module.css
@@ -14,7 +14,6 @@
 .policy-content__main {
     display: flex;
     flex-direction: column;
-    gap: 24px;
 }
 
 .policy-content-links {
@@ -26,6 +25,7 @@
 
 .policy-content__copyright {
     color: var(--footer-font-color);
+    padding-top: 24px;
 }
 
 .policy-content-links__text,
@@ -43,47 +43,38 @@
 }
 
 @media only screen and (min-width: 768px) {
-    .policy-content-links {
-        padding-top: 10px;
-        gap: 12px;
+    .policy-content__main {
         flex-direction: row;
+        justify-content: space-between;
     }
 
-    .policy-content__main {
+    .policy-content-links {
         flex-direction: row;
-        align-content: space-around;
     }
 
     .policy-content__copyright {
-        padding-left: 20px;
-        padding-top: 10px;
-        align-items: start;
+        align-items: flex-end;
     }
 }
 
 @media only screen and (min-width: 1512px) {
+    .policy-divider {
+        background: none;
+    }
+
     .policy-content__main {
         flex-direction: column;
         align-items: flex-start;
-        padding-top: 45px;
-    }
-
-    .policy-divider {
-        background: none;
     }
 
     .policy-content-links {
         flex-direction: column;
-        gap: 12px;
+        gap: 14px;
     }
 
     .policy-content-links__text {
         color: var(--footer-policy-links-font-color);
         font-weight: 400;
         line-height: 20px;
     }
-
-    .policy-content__copyright {
-        padding: 31px 0 5px;
-    }
 }