style: news page style

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

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/app/src/pages/commissions/[slug].tsx b/app/src/pages/commissions/[slug].tsx
@@ -24,7 +24,11 @@ export default function Page(
     <div className="page">
       <div className="center">
         <div>
-          <DirectusImage className="banner" img={translation.banner} />
+          <DirectusImage
+            className="banner"
+            img={translation.banner}
+            cover={true}
+          />
           <h1 className="large">{props.commission.name}</h1>
           <h4>{translation.small_description}</h4>
 

diff --git a/app/src/pages/news.tsx b/app/src/pages/news.tsx
@@ -11,7 +11,7 @@ export default function NewsComponent(
 ) {
   return (
     <div className={styles.pageList}>
-      <h1>News</h1>
+      <h1 className="light">News</h1>
       {props.news.map((n) => (
         <NewsCard key={(n as any).id} news={n} />
       ))}

diff --git a/app/src/styles/NewsCard.module.scss b/app/src/styles/NewsCard.module.scss
@@ -10,6 +10,8 @@
 
   overflow: hidden;
 
+  box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
+
   .picture {
     width: 100%;
   }

diff --git a/app/src/styles/NewsPage.module.scss b/app/src/styles/NewsPage.module.scss
@@ -1,14 +1,19 @@
+@use "./utilities/glass";
+
 .pageList {
+  @extend .glass;
+
   display: grid;
 
   grid-template-columns: auto auto;
-
-  row-gap: 2rem;
-
-  column-gap: 2rem;
+  gap: 2rem;
 
   width: 80%;
 
+  margin-top: 6rem;
+  padding: 2rem;
+  border-radius: 3rem;
+
   > :first-child,
   > :nth-child(2) {
     grid-column: 1 / 3;

diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
@@ -73,6 +73,8 @@ a {
   background-color: variables.$white-background-color;
   min-width: 100vw;
 
+  padding-top: 3rem;
+
   padding-bottom: 4rem;
 
   display: flex;
@@ -84,6 +86,9 @@ a {
     width: 100%;
     height: 20rem;
 
+    border-radius: 3rem;
+    overflow: hidden;
+
     margin: 2rem 0;
   }
 
@@ -103,7 +108,6 @@ h1 {
   letter-spacing: 0.1em;
 
   margin: 0;
-  margin-top: 2rem;
 
   text-align: center;