Merge pull request #154 from ChtiJS/fix/layout

fix(layout): fixing css errors and adding height for social
ChtiJS · Dec 12, 2023 · 52ef9b9 · 52ef9b9
2 parents ec3b36b + 1236d71
commit 52ef9b9
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 41 deletions.
diff --git a/src/components/footer.module.scss b/src/components/footer.module.scss
@@ -0,0 +1,34 @@
+@import "../layouts/variables.scss"; 
+
+.footer {
+    display: block;
+    width: 100%;
+    background-color: var(--dark);
+  }
+  .p {
+    color: var(--light);
+    margin: 0 auto;
+    text-align: center;
+    line-height: var(--vRythm);
+  }
+  .a,
+  .a:visited,
+  .a:hover {
+    color: var(--light);
+  }
+  @media screen and (max-width: $CSS_BREAKPOINT_END_S) {
+    .footer {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 4;
+      grid-row-end: 5;
+    }
+  }
+  @media screen and (min-width: $CSS_BREAKPOINT_START_M) {
+    .footer {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 4;
+      grid-row-end: 5;
+    }
+  }
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,57 +1,22 @@
 import Link from 'next/link';
 import Social from './social';
 import {
-  CSS_BREAKPOINT_END_S,
-  CSS_BREAKPOINT_START_M,
   ORGANISATION_NAME,
 } from '../utils/constants';
+import styles from './footer.module.scss';
 
 const Footer = () => {
   return (
     <>
-      <footer>
-        <p>
+      <footer className={styles.footer}>
+        <p className={styles.p}>
           © {ORGANISATION_NAME} - Tous droits réservés -{' '}
           <Link href="/mentions-legales" legacyBehavior>
-            <a>Mentions légales</a>
+            <a className={styles.a}>Mentions légales</a>
           </Link>
           <Social></Social>
         </p>
       </footer>
-      <style jsx>{`
-        footer {
-          display: block;
-          width: 100%;
-          background-color: var(--dark);
-        }
-        p {
-          color: var(--light);
-          margin: 0 auto;
-          text-align: center;
-          line-height: calc(var(--vRythm) * 2);
-        }
-        a,
-        a:visited,
-        a:hover {
-          color: var(--light);
-        }
-        @media screen and (max-width: ${CSS_BREAKPOINT_END_S}) {
-          footer {
-            grid-column-start: 1;
-            grid-column-end: 3;
-            grid-row-start: 4;
-            grid-row-end: 5;
-          }
-        }
-        @media screen and (min-width: ${CSS_BREAKPOINT_START_M}) {
-          footer {
-            grid-column-start: 1;
-            grid-column-end: 3;
-            grid-row-start: 4;
-            grid-row-end: 5;
-          }
-        }
-      `}</style>
     </>
   );
 };

diff --git a/src/layouts/main.module.scss b/src/layouts/main.module.scss
@@ -5,7 +5,7 @@
   display: grid;
   grid-template-columns: var(--block) 1fr;
   grid-template-rows:
-    calc(var(--vRythm) * 8) auto
+    calc(var(--vRythm) * 6) auto
     auto minmax(calc(var(--vRythm) * 2), auto);
   background: var(--tertiary);
 }

diff --git a/src/layouts/main.tsx b/src/layouts/main.tsx
@@ -25,7 +25,7 @@ const Layout = ({ children, title, description = '', image = '' }: Props) => {
       />
       <Menu />
       <Header />
-      <div className={styles.content}>{children}</div>
+      <div className={styles.contents}>{children}</div>
       <Footer />
     </div>
   );