style: new proposition

clicepfl · Feb 25, 2024 · 129ff61 · 129ff61
1 parent a177e54
commit 129ff61
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 397 deletions.
diff --git a/app/public/background.svg b/app/public/background.svg
diff --git a/app/src/assets/corner.svg b/app/src/assets/corner.svg
diff --git a/app/src/assets/galleryPreview.png b/app/src/assets/galleryPreview.png
diff --git a/app/src/components/NavigationBar.tsx b/app/src/components/NavigationBar.tsx
@@ -1,22 +1,8 @@
-import GitHubIcon from "@/assets/icons/GitHub_icon.svg";
-import InstagramIcon from "@/assets/icons/Instagram_icon.svg";
-import TelegramIcon from "@/assets/icons/Telegram_icon.svg";
-import XIcon from "@/assets/icons/X_icon.svg";
-import BurgerIcon from "@/assets/icons/burger_menu_icon.svg";
-import FolderIcon from "@/assets/icons/folder.svg";
+import Corner from "@/assets/corner.svg";
 import styles from "@/styles/NavigationBar.module.scss";
 import Link from "next/link";
 import { useState } from "react";
 
-function Entry({ title, href }: { title: string; href: string }) {
-  return (
-    <Link href={href} className={styles.entry}>
-      <FolderIcon className={styles.folderIcon}></FolderIcon>
-      <p>{title}</p>
-    </Link>
-  );
-}
-
 /* TODO the socials should be dynamically loaded from Directus. 
   This would probably require to migrate to an App Router to use
   server-side components. */
@@ -28,11 +14,7 @@ export default function NavigationBar() {
 
   return (
     <div className={styles.navigationBar}>
-      <button className={styles.burgerButton} onClick={toggleMenu}>
-        <BurgerIcon></BurgerIcon>
-      </button>
-
-      <div className={styles.socials}>
+      {/* <div className={styles.socials}>
         <Link href="https://telegram.com">
           <TelegramIcon className={styles.icon} alt="telegram" />
         </Link>
@@ -45,18 +27,22 @@ export default function NavigationBar() {
         <Link href="https://github.com">
           <GitHubIcon className={styles.icon} alt="github" />
         </Link>
-      </div>
+      </div> */}
+
+      <Link href="/" className={styles.corner}>
+        <Corner />
+      </Link>
 
-      <div
-        className={
-          styles.navigationMenu + " " + (!visible ? styles.hidden : "")
-        }
-      >
-        <div className={styles.menuList} onClick={(e) => setVisible(false)}>
-          <Entry title="L'Association" href="/" />
-          <Entry title="Commissions" href="/commissions" />
-          <Entry title="News" href="/news" />
-        </div>
+      <div className={styles.navigationMenu}>
+        <Link className={styles.menuItem} href="/association">
+          L'Association
+        </Link>
+        <Link className={styles.menuItem} href="/commissions">
+          Commissions
+        </Link>
+        <Link className={styles.menuItem} href="/news">
+          News
+        </Link>
       </div>
     </div>
   );

diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import PreviewImage from "@/assets/galleryPreview.png";
 import Card from "@/components/Card";
 import DirectusImage from "@/components/DirectusImage";
 import NewsCard from "@/components/NewsCard";
@@ -28,7 +29,10 @@ export default function Home(
 
   return (
     <>
-      <DirectusImage img={translation.banner} className="CLICLogo" />
+      <div className="div-logo">
+        <DirectusImage img={translation.banner} className="CLICLogo" />
+        <img src={PreviewImage.src} alt="preview" className="galleryPreview" />
+      </div>
       <Slider>
         {props.news.map((n) => (
           <NewsCard key={(n as any).id} news={n} />

diff --git a/app/src/styles/NavigationBar.module.scss b/app/src/styles/NavigationBar.module.scss
@@ -1,20 +1,21 @@
 .navigationBar {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #1a2248;
-  height: 100vh;
-  width: 5em;
+  flex-direction: row;
+  background-color: rgba(100, 100, 255, 0.75);
+  width: 100%;
+  height: 3em;
   position: fixed;
-  top: 0;
-  left: 0;
+  z-index: 100;
+
+  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;
   font-family: "Courier New", Courier, monospace;
-
-  z-index: 50;
-  * {
-    z-index: inherit;
-  }
+  font-weight: bold;
+  font-size: 15pt;
 
   .burgerButton {
     margin-top: 1em;
@@ -28,76 +29,60 @@
     cursor: pointer;
 
     &:hover {
-      background-color: #3d4c8f;
+      background-color: lightblue;
 
       transition-duration: 250ms;
       transition-timing-function: ease-out;
     }
   }
 
-  .socials {
-    display: flex;
-    flex-direction: column;
-    row-gap: 0.5em;
-    margin-top: auto;
-    margin-bottom: 2em;
+  .corner {
+    margin-top: 0;
+    margin-left: 0;
+    height: 4em;
+  }
 
-    .icon {
-      fill: white;
-      width: 2em;
-      height: 2em;
+  .navigationMenu {
+    display: flex;
+    flex-direction: row;
+    margin-right: 15%;
+    margin-left: auto;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+
+    .menuItem {
+      fill: inherit;
+      justify-content: center;
+      margin-left: 2em;
 
       &:hover {
-        fill: grey;
+        color: lightgrey;
 
         transition-duration: 250ms;
         transition-timing-function: ease-out;
       }
     }
   }
-
-  .hidden {
-    left: -15rem;
-  }
-}
-
-.navigationMenu {
-  width: 15em;
-  height: 100vh;
-  position: absolute;
-  left: 5em;
-  top: 0;
-  background-color: #1a2248;
-
-  z-index: 49;
-
-  transition-duration: 0.35s;
-  transition-timing-function: ease-out;
-
-  .menuList {
-    margin-top: 50px;
-  }
 }
 
-.entry {
+.socials {
   display: flex;
-  justify-content: baseline;
-  align-items: center;
-  gap: 0.5em;
-  margin: 0.5em 0 0.5em 0;
-  fill: white;
-
-  .folderIcon {
-    height: 1.5em;
-    width: 1.5em;
-    fill: inherit;
-  }
+  flex-direction: column;
+  row-gap: 0.5em;
+  margin-top: auto;
+  margin-bottom: 2em;
+
+  .icon {
+    fill: white;
+    width: 2em;
+    height: 2em;
 
-  &:hover {
-    color: grey;
-    fill: grey;
+    &:hover {
+      fill: lightblue;
 
-    transition-duration: 250ms;
-    transition-timing-function: ease-out;
+      transition-duration: 250ms;
+      transition-timing-function: ease-out;
+    }
   }
 }
diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
@@ -1,8 +1,10 @@
 body {
-  background-color: gray;
+  background-color: #1c70ddff;
   margin: 0;
 
   --background-color: #fafafa;
+
+  font-family: "Courier New", Courier, monospace;
 }
 
 a {
@@ -16,29 +18,59 @@ a {
   align-items: center;
   justify-content: center;
 
+  overflow: hidden;
+
   gap: 4rem;
 
   padding: 2rem;
-  padding-left: 7rem;
 
   min-height: 100vh;
 
   background-position: left top;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: contain;
+
+  @media (max-width: 800px) {
+    background-size: 150%;
+  }
 }
 
-.CLICLogo {
+.div-logo {
   width: 100%;
-  height: 15rem;
-  fill: white;
-  margin: auto;
-  margin-top: 30vh;
+  height: 90vh;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 
   @media (max-width: 800px) {
-    width: 75%;
-    margin-top: 15vh;
-    margin-bottom: 2rem;
+    grid-template-columns: 1fr;
+    height: fit-content;
+  }
+
+  .CLICLogo {
+    grid-row: 1;
+    grid-column: 1;
+
+    height: 15rem;
+    margin-top: 40%;
+    width: 100%;
+
+    @media (max-width: 800px) {
+      width: 75%;
+      margin: auto;
+      margin-top: 15%;
+    }
+  }
+
+  .galleryPreview {
+    grid-row: 1;
+    grid-column: 2;
+    width: 110%;
+    margin-top: 5em;
+
+    @media (max-width: 800px) {
+      display: none;
+    }
   }
 }