style: news page style

Author: NoeTerrier

app/src/assets/icons/lang.svg

@@ -1,6 +1,6 @@
 import Corner from "@/assets/corner.svg";
 import Burger from "@/assets/icons/burger_menu_icon.svg";
-import Lang from "@/assets/lang.svg";
+import Lang from "@/assets/icons/lang.svg";
 import { locale, translate } from "@/locales";
 import styles from "@/styles/NavigationBar.module.scss";
 import { Commission } from "@/types/aliases";

app/src/assets/lang.svg

@@ -6,12 +6,21 @@ import { News } from "@/types/aliases";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-export default function NewsCard({ news }: { news: News }) {
+export default function NewsCard({
+  news,
+  vertical = false,
+}: {
+  news: News;
+  vertical?: boolean;
+}) {
   const router = useRouter();
 
   const translation = getTranslation(news, router.locale);
   return (
-    <Link href={`/news/${news.slug}`} className={`${styles.newsCard}`}>
+    <Link
+      href={`/news/${news.slug}`}
+      className={`${styles.newsCard} ${vertical ? styles.vertical : ""}`}
+    >
       <DirectusImage
         img={translation.banner}
         name={translation.title || ""}
@@ -26,8 +35,8 @@ export default function NewsCard({ news }: { news: News }) {
           <p className={styles.date}>
             {news.date_created ? new Date(news.date_created).toUTCString() : ""}
           </p>
-          <Button className={styles.button} text="> " size="small" />
         </div>
+        <Button className={styles.button} text="> " size="small" />
       </div>
     </Link>
   );

app/src/components/NavigationBar.tsx

@@ -1,6 +1,7 @@
 import NewsCard from "@/components/NewsCard";
 import { directus, populateLayoutProps } from "@/directus";
 import { queryTranslations } from "@/locales";
+import styles from "@/styles/NewsPage.module.scss";
 import { News } from "@/types/aliases";
 import { readItems } from "@directus/sdk";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
@@ -9,10 +10,8 @@ export default function NewsComponent(
   props: InferGetServerSidePropsType<typeof getServerSideProps>
 ) {
   return (
-    <div className="pageList">
-      <div>
-        <h1>News</h1>
-      </div>
+    <div className={styles.pageList}>
+      <h1>News</h1>
       {props.news.map((n) => (
         <NewsCard key={(n as any).id} news={n} />
       ))}

app/src/components/NewsCard.tsx

@@ -1,6 +1,4 @@
 .publicFiles {
-  $color: rgb(130, 130, 255);
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16,12 +14,17 @@
   }
 
   > * {
-    border: 2px $color solid;
+    border: 2px var(--glass-color) solid;
     border-radius: 1rem;
     padding: 1rem;
 
     display: flex;
     align-items: center;
     gap: 0.5rem;
+
+    &:hover {
+      border: 2px var(--glass-color-hover) solid;
+      color: var(--glass-color-hover);
+    }
   }
 }

app/src/pages/news.tsx

@@ -4,7 +4,7 @@
   margin: 1rem;
 
   color: var(--text-color);
-  background-color: darkblue;
+  background-color: var(--glass-color);
 
   width: fit-content;
   height: fit-content;
@@ -15,7 +15,7 @@
   gap: 1rem;
 
   &:hover {
-    background-color: var(--glass-color);
+    background-color: var(--glass-color-hover);
   }
 
   backdrop-filter: blur(10px) saturate(180%);

app/src/styles/AssociationDescription.module.scss

@@ -60,8 +60,9 @@
     margin: 2%;
     gap: 2em;
     width: fit-content;
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: repeat(3, 50rem);
+    padding-right: 5rem;
   }
 }
 

app/src/styles/Button.module.scss

@@ -28,7 +28,7 @@
   .lang {
     width: 2em;
     height: auto;
-    stroke: white;
+    stroke-width: 0;
     cursor: pointer;
   }
 
@@ -45,6 +45,7 @@
     .menuItem {
       fill: inherit;
       user-select: none;
+      width: fit-content;
       cursor: pointer;
 
       &:hover {
@@ -82,21 +83,27 @@
       .content {
         @extend .glass;
 
-        display: none;
         position: absolute;
-        flex-direction: column;
-
-        padding-right: 2em;
+        right: 0;
+        display: none;
+        overflow: hidden;
         z-index: 1;
         border-radius: 5px;
+        white-space: nowrap;
 
         .menuItem {
-          margin: 0.5em 0em 0.5em 1em;
+          padding: 0.5rem 1rem 0.5rem 1rem;
+          width: 100%;
+
+          &:hover {
+            background-color: var(--glass-color-hover);
+          }
         }
       }
 
       &:hover .content {
         display: flex;
+        flex-direction: column;
       }
     }
 

app/src/styles/Homepage.module.scss

@@ -2,14 +2,9 @@
   background-color: var(--background-color);
   border-radius: 3rem;
 
-  min-width: 50rem;
-  min-height: 20rem;
-
-  $width: 40ch;
-  $height: 30ch;
-
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(max(25rem, 50%), 1fr));
+  grid-template-rows: repeat(auto-fill, minmax(20rem, 1fr));
 
   overflow: hidden;
 
@@ -18,6 +13,7 @@
   }
 
   .content {
+    position: relative;
     margin: 1em;
     display: flex;
     flex-direction: column;
@@ -37,19 +33,21 @@
         padding-right: 1rem;
         width: 80%;
       }
-
-      .button {
-        margin: 0;
-        width: 2rem;
-        height: 2rem;
-        font-size: 2rem;
-      }
+    }
+    .button {
+      position: absolute;
+      margin: 0;
+      bottom: 0.5em;
+      right: 0.5em;
+      width: 2rem;
+      height: 2rem;
+      font-size: 2rem;
     }
   }
 
-  @media (max-width: 800px) {
-    grid-template-rows: 1fr 1fr;
-    grid-template-columns: 1fr;
-    min-width: 25rem;
-  }
+  // @media (max-width: 800px) {
+  //   grid-template-rows: 1fr 1fr;
+  //   grid-template-columns: 1fr;
+  //   min-width: 25rem;
+  // }
 }

app/src/styles/NavigationBar.module.scss

@@ -0,0 +1,25 @@
+.pageList {
+  display: grid;
+
+  grid-template-columns: auto auto;
+
+  row-gap: 2rem;
+
+  column-gap: 2rem;
+
+  width: 80%;
+
+  > :first-child,
+  > :nth-child(2) {
+    grid-column: 1 / 3;
+  }
+
+  @media (max-width: 1000px) {
+    grid-template-columns: auto;
+
+    > :first-child,
+    > :nth-child(2) {
+      grid-column: 1;
+    }
+  }
+}

app/src/styles/NewsCard.module.scss

@@ -5,6 +5,14 @@
   .social {
     width: 40px;
     height: 40px;
+
+    filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(6050%)
+      hue-rotate(215deg) brightness(95%) contrast(95%);
+
+    &:hover {
+      filter: brightness(0) saturate(100%) invert(25%) sepia(71%) saturate(627%)
+        hue-rotate(198deg) brightness(98%) contrast(84%);
+    }
   }
 
   .light {