refactor: move style of main in a separate file

Author: NoeTerrier

app/src/components/PartnersList.tsx

@@ -19,7 +19,9 @@ export default function PartnersList({ partners }: { partners: Partner[] }) {
 
   return (
     <div className={styles.partnersList}>
-      <h1>Partenaires</h1>
+      <h1 className="light" z>
+        Partenaires
+      </h1>
       <div className={styles.list}>{list}</div>
     </div>
   );

app/src/pages/index.tsx

@@ -11,6 +11,7 @@ import {
   queryTranslations,
   translate,
 } from "@/locales";
+import styles from "@/styles/Homepage.module.scss";
 import {
   Association,
   AssociationMembership,
@@ -31,14 +32,18 @@ export default function Home(
 
   return (
     <>
-      <div className="divLogo">
-        <DirectusImage img={translation.banner} className="mainLogo" />
-        <img src={PreviewImage.src} alt="preview" className="galleryPreview" />
+      <div className={styles.divLogo}>
+        <DirectusImage img={translation.banner} className={styles.mainLogo} />
+        <img
+          src={PreviewImage.src}
+          alt="preview"
+          className={styles.galleryPreview}
+        />
       </div>
 
-      <div className="news">
+      <div className={styles.news}>
         <h1 className="light">News</h1>
-        <div className="news-list">
+        <div className={styles.newsList}>
           {props.news.map((n) => (
             <NewsCard key={(n as any).id} news={n} />
           ))}
@@ -52,7 +57,7 @@ export default function Home(
         social_links={props.social_links}
       />
 
-      <div className="cardList">
+      <div className={styles.cardList}>
         <h1>{translate("committee", locale(router), { capitalize: true })}</h1>
         <div>
           {props.committee.map((m) => (

app/src/styles/Homepage.module.scss

@@ -0,0 +1,86 @@
+@import "glass";
+
+.divLogo {
+  width: 100%;
+  height: 80vh;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  @media (max-width: 1200px) {
+    height: 50vh;
+  }
+
+  @media (max-width: 800px) {
+    grid-template-columns: 1fr;
+    height: fit-content;
+  }
+
+  .mainLogo {
+    grid-row: 1;
+    grid-column: 1;
+
+    height: 15rem;
+    margin-top: 40%;
+    width: 100%;
+
+    @media (max-width: 1200px) {
+      width: 75%;
+      margin: auto;
+      margin-top: 30%;
+    }
+
+    @media (max-width: 800px) {
+      width: 50%;
+      margin: auto;
+      margin-top: 15%;
+    }
+  }
+
+  .galleryPreview {
+    grid-row: 1;
+    grid-column: 2;
+    width: 110%;
+
+    @media (max-width: 800px) {
+      display: none;
+    }
+  }
+}
+
+.news {
+  @extend .glass;
+
+  width: 100%;
+  overflow: scroll;
+
+  padding: 2em;
+
+  .newsList {
+    margin: 2%;
+    gap: 2em;
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.cardList {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1em;
+  margin-top: 5rem;
+
+  border-radius: 3rem;
+  background-color: var(--background-color);
+  width: 80%;
+
+  > div {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    align-items: center;
+    justify-items: center;
+    padding: 2rem;
+  }
+}

app/src/styles/PartnersList.module.scss

@@ -1,6 +1,6 @@
 .partnersList {
   width: 100%;
-  background-color: white;
+  background-color: #0d1d2a;
   display: flex;
   flex-direction: column;
   align-items: center;

app/src/styles/globals.scss

@@ -28,8 +28,6 @@ a {
 
   overflow: hidden;
 
-  gap: 4rem;
-
   padding-top: 3rem;
   padding-bottom: 6rem;
   min-height: 100vh;
@@ -43,71 +41,6 @@ a {
   }
 }
 
-.divLogo {
-  width: 100%;
-  height: 80vh;
-
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-
-  @media (max-width: 1200px) {
-    height: 50vh;
-  }
-
-  @media (max-width: 800px) {
-    grid-template-columns: 1fr;
-    height: fit-content;
-  }
-
-  .mainLogo {
-    grid-row: 1;
-    grid-column: 1;
-
-    height: 15rem;
-    margin-top: 40%;
-    width: 100%;
-
-    @media (max-width: 1200px) {
-      width: 75%;
-      margin: auto;
-      margin-top: 30%;
-    }
-
-    @media (max-width: 800px) {
-      width: 50%;
-      margin: auto;
-      margin-top: 15%;
-    }
-  }
-
-  .galleryPreview {
-    grid-row: 1;
-    grid-column: 2;
-    width: 110%;
-
-    @media (max-width: 800px) {
-      display: none;
-    }
-  }
-}
-
-.news {
-  @extend .glass;
-
-  width: 100%;
-  overflow: scroll;
-
-  padding: 2em;
-
-  .news-list {
-    margin: 2%;
-    gap: 2em;
-    width: fit-content;
-    display: flex;
-    flex-direction: row;
-  }
-}
-
 .text {
   h1 {
     text-align: center;
@@ -212,24 +145,3 @@ h1 {
     justify-content: center;
   }
 }
-
-.cardList {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1em;
-
-  > div {
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    align-items: center;
-    justify-items: center;
-    padding: 2rem;
-  }
-
-  border-radius: 3rem;
-
-  background-color: var(--background-color);
-
-  width: 80%;
-}