style: style of pages

clicepfl · Mar 17, 2024 · 4ab25e9 · 4ab25e9
1 parent 25be0ea
commit 4ab25e9
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 24 deletions.
diff --git a/app/src/components/AssociationDescription.tsx b/app/src/components/AssociationDescription.tsx
@@ -21,7 +21,7 @@ export default function AssociationDescription({
 
   return (
     <div className="page">
-      <div>
+      <div className="center">
         <Markdown className="text">{translation.description}</Markdown>
         <SocialsList socials={socialLinks}></SocialsList>
         <div className={styles.publicFiles}>

diff --git a/app/src/pages/commissions.tsx b/app/src/pages/commissions.tsx
@@ -1,6 +1,7 @@
 import Card from "@/components/Card";
 import { directus, populateLayoutProps } from "@/directus";
 import { locale, translate } from "@/locales";
+import styles from "@/styles/CommissionsPage.module.scss";
 import { Commission } from "@/types/aliases";
 import { readItems } from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
@@ -11,18 +12,18 @@ export default function Commissions(
 ) {
   const router = useRouter();
   return (
-    <div className="pageList">
-      <div>
-        <h1>
-          {translate("commission", locale(router), {
-            capitalize: true,
-            plural: true,
-          })}
-        </h1>
+    <div className={styles.commissionsList}>
+      <h1>
+        {translate("commission", locale(router), {
+          capitalize: true,
+          plural: true,
+        })}
+      </h1>
+      <div className={styles.list}>
+        {props.news.map((c) => (
+          <Card key={(c as any).id} commission={c} size="large" background />
+        ))}
       </div>
-      {props.news.map((c) => (
-        <Card key={(c as any).id} commission={c} size="large" background />
-      ))}
     </div>
   );
 }

diff --git a/app/src/pages/commissions/[slug].tsx b/app/src/pages/commissions/[slug].tsx
@@ -22,14 +22,16 @@ export default function Page(
 
   return (
     <div className="page">
-      <div>
-        <DirectusImage className="banner" img={translation.banner} />
-        <h1 className="large">{props.commission.name}</h1>
-        <h4>{translation.small_description}</h4>
+      <div className="center">
+        <div>
+          <DirectusImage className="banner" img={translation.banner} />
+          <h1 className="large">{props.commission.name}</h1>
+          <h4>{translation.small_description}</h4>
 
-        <Markdown className="text">{translation.description}</Markdown>
+          <Markdown className="text">{translation.description}</Markdown>
 
-        <SocialsList socials={props.socialLinks} />
+          <SocialsList socials={props.socialLinks} />
+        </div>
       </div>
       <MembersList membership={props.members} />
     </div>

diff --git a/app/src/styles/Card.module.scss b/app/src/styles/Card.module.scss
@@ -16,8 +16,8 @@
   gap: 1rem;
 
   &.large {
-    width: 60ch;
-    height: 20ch;
+    width: 30rem;
+    height: 10rem;
     border-radius: 4rem;
 
     .description {

diff --git a/app/src/styles/CommissionsPage.module.scss b/app/src/styles/CommissionsPage.module.scss
@@ -0,0 +1,27 @@
+@use "./utilities/variables";
+
+.commissionsList {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1em;
+
+  align-items: center;
+
+  width: 80%;
+  padding-bottom: 2rem;
+
+  @media (max-width: 800px) {
+    width: 100%;
+  }
+
+  .list {
+    max-width: 70rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
+
+    gap: 1rem;
+
+    align-items: center;
+    justify-items: center;
+  }
+}
diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
@@ -87,13 +87,10 @@ a {
     margin: 2rem 0;
   }
 
-  > div {
-    display: flex;
-    flex-direction: column;
+  .center {
     align-items: center;
 
     width: min(70ch, 80%);
-    max-width: unset;
 
     .author {
       margin: 0;