Skip to content

Commit 129ff61

Browse files
NoeTerrierNoeTerrier
committed
style: new proposition
1 parent a177e54 commit 129ff61

File tree

7 files changed

+218
-397
lines changed

7 files changed

+218
-397
lines changed

‎app/public/background.svg

+54-291
Loading

‎app/src/assets/corner.svg

+51
Loading

‎app/src/assets/galleryPreview.png

1.08 MB
Loading

‎app/src/components/NavigationBar.tsx

+17-31
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,8 @@
1-
import GitHubIcon from "@/assets/icons/GitHub_icon.svg";
2-
import InstagramIcon from "@/assets/icons/Instagram_icon.svg";
3-
import TelegramIcon from "@/assets/icons/Telegram_icon.svg";
4-
import XIcon from "@/assets/icons/X_icon.svg";
5-
import BurgerIcon from "@/assets/icons/burger_menu_icon.svg";
6-
import FolderIcon from "@/assets/icons/folder.svg";
1+
import Corner from "@/assets/corner.svg";
72
import styles from "@/styles/NavigationBar.module.scss";
83
import Link from "next/link";
94
import { useState } from "react";
105

11-
function Entry({ title, href }: { title: string; href: string }) {
12-
return (
13-
<Link href={href} className={styles.entry}>
14-
<FolderIcon className={styles.folderIcon}></FolderIcon>
15-
<p>{title}</p>
16-
</Link>
17-
);
18-
}
19-
206
/* TODO the socials should be dynamically loaded from Directus.
217
This would probably require to migrate to an App Router to use
228
server-side components. */
@@ -28,11 +14,7 @@ export default function NavigationBar() {
2814

2915
return (
3016
<div className={styles.navigationBar}>
31-
<button className={styles.burgerButton} onClick={toggleMenu}>
32-
<BurgerIcon></BurgerIcon>
33-
</button>
34-
35-
<div className={styles.socials}>
17+
{/* <div className={styles.socials}>
3618
<Link href="https://telegram.com">
3719
<TelegramIcon className={styles.icon} alt="telegram" />
3820
</Link>
@@ -45,18 +27,22 @@ export default function NavigationBar() {
4527
<Link href="https://github.com">
4628
<GitHubIcon className={styles.icon} alt="github" />
4729
</Link>
48-
</div>
30+
</div> */}
31+
32+
<Link href="/" className={styles.corner}>
33+
<Corner />
34+
</Link>
4935

50-
<div
51-
className={
52-
styles.navigationMenu + " " + (!visible ? styles.hidden : "")
53-
}
54-
>
55-
<div className={styles.menuList} onClick={(e) => setVisible(false)}>
56-
<Entry title="L'Association" href="/" />
57-
<Entry title="Commissions" href="/commissions" />
58-
<Entry title="News" href="/news" />
59-
</div>
36+
<div className={styles.navigationMenu}>
37+
<Link className={styles.menuItem} href="/association">
38+
L'Association
39+
</Link>
40+
<Link className={styles.menuItem} href="/commissions">
41+
Commissions
42+
</Link>
43+
<Link className={styles.menuItem} href="/news">
44+
News
45+
</Link>
6046
</div>
6147
</div>
6248
);

‎app/src/pages/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PreviewImage from "@/assets/galleryPreview.png";
12
import Card from "@/components/Card";
23
import DirectusImage from "@/components/DirectusImage";
34
import NewsCard from "@/components/NewsCard";
@@ -28,7 +29,10 @@ export default function Home(
2829

2930
return (
3031
<>
31-
<DirectusImage img={translation.banner} className="CLICLogo" />
32+
<div className="div-logo">
33+
<DirectusImage img={translation.banner} className="CLICLogo" />
34+
<img src={PreviewImage.src} alt="preview" className="galleryPreview" />
35+
</div>
3236
<Slider>
3337
{props.news.map((n) => (
3438
<NewsCard key={(n as any).id} news={n} />

‎app/src/styles/NavigationBar.module.scss

+48-63
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
.navigationBar {
22
display: flex;
3-
flex-direction: column;
4-
align-items: center;
5-
background-color: #1a2248;
6-
height: 100vh;
7-
width: 5em;
3+
flex-direction: row;
4+
background-color: rgba(100, 100, 255, 0.75);
5+
width: 100%;
6+
height: 3em;
87
position: fixed;
9-
top: 0;
10-
left: 0;
8+
z-index: 100;
9+
10+
backdrop-filter: blur(10px) saturate(180%);
11+
12+
border: 1px solid rgba(255, 255, 255, 0.125);
13+
box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
14+
1115
color: white;
1216
font-family: "Courier New", Courier, monospace;
13-
14-
z-index: 50;
15-
* {
16-
z-index: inherit;
17-
}
17+
font-weight: bold;
18+
font-size: 15pt;
1819

1920
.burgerButton {
2021
margin-top: 1em;
@@ -28,76 +29,60 @@
2829
cursor: pointer;
2930

3031
&:hover {
31-
background-color: #3d4c8f;
32+
background-color: lightblue;
3233

3334
transition-duration: 250ms;
3435
transition-timing-function: ease-out;
3536
}
3637
}
3738

38-
.socials {
39-
display: flex;
40-
flex-direction: column;
41-
row-gap: 0.5em;
42-
margin-top: auto;
43-
margin-bottom: 2em;
39+
.corner {
40+
margin-top: 0;
41+
margin-left: 0;
42+
height: 4em;
43+
}
4444

45-
.icon {
46-
fill: white;
47-
width: 2em;
48-
height: 2em;
45+
.navigationMenu {
46+
display: flex;
47+
flex-direction: row;
48+
margin-right: 15%;
49+
margin-left: auto;
50+
height: 100%;
51+
justify-content: center;
52+
align-items: center;
53+
54+
.menuItem {
55+
fill: inherit;
56+
justify-content: center;
57+
margin-left: 2em;
4958

5059
&:hover {
51-
fill: grey;
60+
color: lightgrey;
5261

5362
transition-duration: 250ms;
5463
transition-timing-function: ease-out;
5564
}
5665
}
5766
}
58-
59-
.hidden {
60-
left: -15rem;
61-
}
62-
}
63-
64-
.navigationMenu {
65-
width: 15em;
66-
height: 100vh;
67-
position: absolute;
68-
left: 5em;
69-
top: 0;
70-
background-color: #1a2248;
71-
72-
z-index: 49;
73-
74-
transition-duration: 0.35s;
75-
transition-timing-function: ease-out;
76-
77-
.menuList {
78-
margin-top: 50px;
79-
}
8067
}
8168

82-
.entry {
69+
.socials {
8370
display: flex;
84-
justify-content: baseline;
85-
align-items: center;
86-
gap: 0.5em;
87-
margin: 0.5em 0 0.5em 0;
88-
fill: white;
89-
90-
.folderIcon {
91-
height: 1.5em;
92-
width: 1.5em;
93-
fill: inherit;
94-
}
71+
flex-direction: column;
72+
row-gap: 0.5em;
73+
margin-top: auto;
74+
margin-bottom: 2em;
75+
76+
.icon {
77+
fill: white;
78+
width: 2em;
79+
height: 2em;
9580

96-
&:hover {
97-
color: grey;
98-
fill: grey;
81+
&:hover {
82+
fill: lightblue;
9983

100-
transition-duration: 250ms;
101-
transition-timing-function: ease-out;
84+
transition-duration: 250ms;
85+
transition-timing-function: ease-out;
86+
}
10287
}
10388
}

‎app/src/styles/globals.scss

+43-11
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
body {
2-
background-color: gray;
2+
background-color: #1c70ddff;
33
margin: 0;
44

55
--background-color: #fafafa;
6+
7+
font-family: "Courier New", Courier, monospace;
68
}
79

810
a {
@@ -16,29 +18,59 @@ a {
1618
align-items: center;
1719
justify-content: center;
1820

21+
overflow: hidden;
22+
1923
gap: 4rem;
2024

2125
padding: 2rem;
22-
padding-left: 7rem;
2326

2427
min-height: 100vh;
2528

2629
background-position: left top;
2730
background-repeat: no-repeat;
28-
background-size: cover;
31+
background-size: contain;
32+
33+
@media (max-width: 800px) {
34+
background-size: 150%;
35+
}
2936
}
3037

31-
.CLICLogo {
38+
.div-logo {
3239
width: 100%;
33-
height: 15rem;
34-
fill: white;
35-
margin: auto;
36-
margin-top: 30vh;
40+
height: 90vh;
41+
42+
display: grid;
43+
grid-template-columns: 1fr 1fr;
3744

3845
@media (max-width: 800px) {
39-
width: 75%;
40-
margin-top: 15vh;
41-
margin-bottom: 2rem;
46+
grid-template-columns: 1fr;
47+
height: fit-content;
48+
}
49+
50+
.CLICLogo {
51+
grid-row: 1;
52+
grid-column: 1;
53+
54+
height: 15rem;
55+
margin-top: 40%;
56+
width: 100%;
57+
58+
@media (max-width: 800px) {
59+
width: 75%;
60+
margin: auto;
61+
margin-top: 15%;
62+
}
63+
}
64+
65+
.galleryPreview {
66+
grid-row: 1;
67+
grid-column: 2;
68+
width: 110%;
69+
margin-top: 5em;
70+
71+
@media (max-width: 800px) {
72+
display: none;
73+
}
4274
}
4375
}
4476

0 commit comments

Comments
 (0)