refactor: refactor style of pages

app/src/components/AssociationDescription.tsx

@@ -1,7 +1,7 @@
 import DirectusImage from "./DirectusImage";
 import SocialsList from "./SocialsList";
 import { getTranslation, locale } from "@/locales";
-import styles from "@/styles/AssociationDescription.module.scss";
+import styles from "@/styles/Page.module.scss";
 import { Association, PublicFiles, SocialLink } from "@/types/aliases";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -20,8 +20,8 @@ export default function AssociationDescription({
   const translation = getTranslation(association, locale(router));
 
   return (
-    <div className="page">
-      <div className="center">
+    <div className={styles.main}>
+      <div className={styles.center}>
         <Markdown className="text">{translation.description}</Markdown>
         <div className={styles.publicFiles}>
           {publicFiles.map((f) => (

app/src/pages/association.tsx

@@ -3,6 +3,7 @@ import DirectusImage from "@/components/DirectusImage";
 import MembersList from "@/components/MembersList";
 import { directus, populateLayoutProps } from "@/directus";
 import { getTranslation, locale, queryTranslations } from "@/locales";
+import styles from "@/styles/Page.module.scss";
 import {
   Association,
   AssociationMembership,
@@ -20,7 +21,7 @@ export default function AssociationPage(
   const router = useRouter();
   const translation = getTranslation(props.association, locale(router));
   return (
-    <div className="page">
+    <div className={styles.main}>
       <div className="center">
         <DirectusImage className="logo" img={translation.banner} />
         <AssociationDescription

app/src/pages/commissions/[slug].tsx

@@ -3,6 +3,7 @@ import MembersList from "@/components/MembersList";
 import SocialsList from "@/components/SocialsList";
 import { directus, populateLayoutProps } from "@/directus";
 import { getTranslation, locale, queryTranslations } from "@/locales";
+import styles from "@/styles/Page.module.scss";
 import {
   AssociationMembership,
   Commission,
@@ -21,17 +22,17 @@ export default function Page(
   const translation = getTranslation(props.commission, locale(router));
 
   return (
-    <div className="page">
-      <div className="center">
+    <div className={styles.main}>
+      <div className={styles.center}>
         <DirectusImage
-          className="banner"
+          className={styles.banner}
           img={translation.banner}
           cover={true}
         />
         <h3>{props.commission.name}</h3>
         <h4>{translation.small_description}</h4>
 
-        <Markdown className="text">{translation.description}</Markdown>
+        <Markdown className={styles.text}>{translation.description}</Markdown>
 
         <SocialsList socials={props.socialLinks} />
       </div>

app/src/pages/news/[slug].tsx

@@ -1,4 +1,4 @@
-import Card from "@/components/Card";
+import CommissionCard from "@/components/CommissionCard";
 import DirectusImage from "@/components/DirectusImage";
 import { directus, populateLayoutProps } from "@/directus";
 import {
@@ -8,6 +8,7 @@ import {
   queryTranslations,
   translate,
 } from "@/locales";
+import styles from "@/styles/Page.module.scss";
 import { Commission, News } from "@/types/aliases";
 import { readItems } from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
@@ -19,24 +20,28 @@ export default function Page(
 ) {
   const commissions: Commission[] = props.news.commissions;
   const router = useRouter();
-  const translation = getTranslation(props.news, router.locale);
+  const translation = getTranslation(props.news, locale(router));
 
   return (
-    <div className="page">
-      <div className="center">
-        <h1 className="large">{translation.title}</h1>
+    <div className={styles.main}>
+      <div className={styles.center}>
+        <h1>{translation.title}</h1>
         <h4>{translation.description}</h4>
         {props.news.date_created ? (
-          <p className="author">
+          <p className={styles.author}>
             {`${formatDate(props.news.date_created, router.locale, {
               capitalize: true,
             })}`}
           </p>
         ) : (
           <></>
         )}
-        <DirectusImage className="banner" img={translation.banner} />
-        <Markdown className="text">{translation.content}</Markdown>
+        <DirectusImage
+          className={styles.banner}
+          img={translation.banner}
+          cover={true}
+        />
+        <Markdown className={styles.text}>{translation.content}</Markdown>
         {commissions.length > 0 ? (
           <>
             <h1>
@@ -45,7 +50,7 @@ export default function Page(
               })}
             </h1>
             {commissions.map((c) => (
-              <Card key={(c as any).id} commission={c} size="large" />
+              <CommissionCard key={c.id} commission={c} />
             ))}
           </>
         ) : (

app/src/styles/ListPage.module.scss

@@ -7,7 +7,7 @@
 
   display: flex;
   flex-direction: column;
-  row-gap: 1em;
+  row-gap: 2rem;
 
   align-items: center;
   width: 80%;
@@ -19,10 +19,11 @@
   h1 {
     @extend .glass;
     color: variables.$title-color;
-    border-radius: 3rem;
+    border-radius: 1rem;
     width: fit-content;
     padding-left: 2rem;
     padding-right: 2rem;
+    box-shadow: none;
   }
 
   @media (max-width: 800px) {

app/src/styles/Page.module.scss

@@ -0,0 +1,115 @@
+@use "utilities/variables";
+
+.publicFiles {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+
+    // Generated with https://angel-rs.github.io/css-color-filter-generator/
+    filter: brightness(0) saturate(100%) invert(56%) sepia(49%) saturate(4097%)
+      hue-rotate(214deg) brightness(103%) contrast(101%);
+  }
+
+  > * {
+    border: 2px variables.$glass-color solid;
+    border-radius: 1rem;
+    padding: 1rem;
+
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &:hover {
+      border: 2px variables.$glass-color-hover solid;
+      color: variables.$glass-color-hover;
+    }
+  }
+}
+
+.main {
+  @extend .text;
+  h4 {
+    text-align: left;
+  }
+
+  h2 {
+    margin-top: 3rem;
+    text-transform: uppercase;
+  }
+
+  background-color: variables.$white-background-color;
+  min-width: 100vw;
+
+  padding-top: 3rem;
+  padding-bottom: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  row-gap: 2rem;
+
+  .banner {
+    position: absolute;
+    width: 100%;
+    height: 20rem;
+
+    border-radius: 3rem;
+    overflow: hidden;
+
+    margin: 0;
+  }
+
+  .logo {
+    height: 15rem;
+    width: 25rem;
+  }
+
+  .center {
+    align-items: center;
+
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+
+    width: min(70ch, 80%);
+
+    img {
+      width: 100%;
+    }
+
+    .author {
+      margin: 0;
+      font-weight: 200;
+    }
+  }
+}
+
+.text {
+  h1 {
+    text-align: center;
+
+    // h4 (subtitle) must be centered and slightly enlarged
+    + h4 {
+      text-align: center;
+      font-size: large;
+    }
+  }
+
+  h4 {
+    font-weight: lighter;
+    margin-top: 0.2rem;
+  }
+
+  a {
+    color: variables.$text-link-color;
+  }
+
+  p {
+    text-align: justify;
+  }
+}

app/src/styles/globals.scss

@@ -33,90 +33,6 @@ a {
   }
 }
 
-.text {
-  h1 {
-    text-align: center;
-
-    // h4 (subtitle) must be centered and slightly enlarged
-    + h4 {
-      text-align: center;
-      font-size: large;
-    }
-  }
-
-  h4 {
-    font-weight: lighter;
-    margin-top: 0.2rem;
-  }
-
-  a {
-    color: variables.$text-link-color;
-  }
-
-  p {
-    text-align: justify;
-  }
-}
-
-.page {
-  @extend .text;
-  h4 {
-    text-align: left;
-  }
-
-  h2 {
-    margin-top: 3rem;
-    text-transform: uppercase;
-  }
-
-  background-color: variables.$white-background-color;
-  min-width: 100vw;
-
-  padding-top: 3rem;
-  padding-bottom: 4rem;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  row-gap: 2rem;
-
-  .banner {
-    position: absolute;
-    width: 100%;
-    height: 20rem;
-
-    border-radius: 3rem;
-    overflow: hidden;
-
-    margin: 0;
-  }
-
-  .logo {
-    height: 15rem;
-    width: 25rem;
-  }
-
-  .center {
-    align-items: center;
-
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-
-    width: min(70ch, 80%);
-
-    img {
-      width: 100%;
-    }
-
-    .author {
-      margin: 0;
-      font-weight: 200;
-    }
-  }
-}
-
 h1 {
   letter-spacing: 0.1em;