feat: ehance news section

clicepfl · Feb 25, 2024 · a59d36e · a59d36e
1 parent 7d52784
commit a59d36e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
@@ -2,7 +2,6 @@ import PreviewImage from "@/assets/galleryPreview.png";
 import Card from "@/components/Card";
 import DirectusImage from "@/components/DirectusImage";
 import NewsCard from "@/components/NewsCard";
-import Slider from "@/components/Slider";
 import { directus, populateLayoutProps } from "@/directus";
 import {
   getTranslation,
@@ -33,11 +32,16 @@ export default function Home(
         <DirectusImage img={translation.banner} className="mainLogo" />
         <img src={PreviewImage.src} alt="preview" className="galleryPreview" />
       </div>
-      <Slider>
-        {props.news.map((n) => (
-          <NewsCard key={(n as any).id} news={n} />
-        ))}
-      </Slider>
+
+      <div className="news">
+        <h1 className="title">News</h1>
+        <div className="news-list">
+          {props.news.map((n) => (
+            <NewsCard key={(n as any).id} news={n} />
+          ))}
+        </div>
+      </div>
+
       <Markdown className="text">{translation.description}</Markdown>
       <div className="cardList">
         <h1 className="title">

diff --git a/app/src/styles/NavigationBar.module.scss b/app/src/styles/NavigationBar.module.scss
@@ -1,18 +1,17 @@
 .navigationBar {
   display: flex;
   flex-direction: row;
-  background-color: rgba(100, 100, 255, 0.75);
   width: 100%;
   height: 3em;
   position: fixed;
   z-index: 100;
 
+  background-color: rgba(100, 100, 255, 0.75);
   backdrop-filter: blur(10px) saturate(180%);
-
   border: 1px solid rgba(255, 255, 255, 0.125);
   box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
 
-  color: white;
+  color: var(--text-color);
   font-family: "Courier New", Courier, monospace;
   font-weight: bold;
   font-size: 15pt;

diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
@@ -3,6 +3,8 @@ body {
   margin: 0;
 
   --background-color: #fafafa;
+  --text-color: #fafafa;
+  --dark-text-color: darkblue;
 
   font-family: "Courier New", Courier, monospace;
 }
@@ -22,8 +24,6 @@ a {
 
   gap: 4rem;
 
-  padding: 2rem;
-
   min-height: 100vh;
 
   background-position: left top;
@@ -74,6 +74,26 @@ a {
   }
 }
 
+.news {
+  width: 100%;
+  overflow: scroll;
+
+  padding: 2em;
+
+  background-color: rgba(100, 100, 255, 0.75);
+  backdrop-filter: blur(10px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.125);
+  box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
+
+  .news-list {
+    margin: 2%;
+    gap: 2em;
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+  }
+}
+
 .text {
   min-width: 20ch;
   max-width: 60ch;
@@ -170,6 +190,7 @@ a {
 
 .title {
   text-align: center;
+  color: var(--dark-text-color);
 
   &::after {
     position: relative;
@@ -178,7 +199,7 @@ a {
     top: -0.45rem;
     left: 0.5rem;
 
-    background-color: darkcyan;
+    background-color: var(--dark-text-color);
     content: "";
     display: inline-block;
   }