My personal site.
theclashfruit.me
chore: some design changes
+179
-182
+7
-5
app/(main)/layout.tsx
+7
-5
app/(main)/layout.tsx
···
16
16
<>
17
17
<Header />
18
18
19
-
<Container as="main" className={styles.main}>
19
+
<aside className={styles.sideBar}>
20
20
<NavBar />
21
+
</aside>
21
22
22
-
<ViewTransition>
23
-
<div>{children}</div>
24
-
</ViewTransition>
25
-
</Container>
23
+
<ViewTransition>
24
+
<main>
25
+
{children}
26
+
</main>
27
+
</ViewTransition>
26
28
27
29
<Footer />
28
30
</>
+2
-1
app/(main)/links/page.tsx
+2
-1
app/(main)/links/page.tsx
+5
-7
components/Header.tsx
+5
-7
components/Header.tsx
···
7
7
export default function Header() {
8
8
return (
9
9
<header className={styles.header}>
10
-
<Container>
11
-
<div className={styles.navHeader}>
12
-
<Leaf size={32} />
13
-
</div>
14
-
15
-
<h1>TheClashFruit</h1>
16
-
</Container>
10
+
<div className={styles.nav}>
11
+
<Leaf size={32} />
12
+
</div>
13
+
14
+
<h1>TheClashFruit</h1>
17
15
</header>
18
16
);
19
17
}
+23
-23
styles/components/Header.module.scss
+23
-23
styles/components/Header.module.scss
···
1
1
.header {
2
-
> div {
3
-
display: flex;
2
+
padding: 16px calc(50vw - 50%);
4
3
5
-
align-items: center;
4
+
margin: 0 calc(50% - 50vw) 0;
5
+
margin-top: -16px;
6
6
7
-
gap: 16px;
7
+
display: flex;
8
8
9
-
padding: 16px;
9
+
align-items: center;
10
10
11
-
> .navHeader {
12
-
width: 215px;
11
+
gap: 16px;
13
12
14
-
display: flex;
13
+
h1 {
14
+
margin: 0;
15
15
16
-
align-items: center;
17
-
justify-content: end;
16
+
font-size: 180%;
17
+
font-weight: 600;
18
+
}
18
19
19
-
> svg {
20
-
color: var(--primary);
21
-
}
22
-
23
-
@media (max-width: 769px) {
24
-
width: fit-content;
25
-
}
26
-
}
20
+
.nav {
21
+
display: flex;
22
+
23
+
align-items: center;
24
+
justify-content: end;
25
+
26
+
width: 215px;
27
27
28
-
> h1 {
29
-
margin: 0;
28
+
position: absolute;
29
+
left: calc(50% - 40ch - 215px);
30
+
}
30
31
31
-
font-size: 180%;
32
-
font-weight: 600;
33
-
}
32
+
svg {
33
+
color: var(--primary);
34
34
}
35
35
}
+15
-7
styles/globals.scss
+15
-7
styles/globals.scss
···
16
16
color: var(--onSurface);
17
17
18
18
min-height: 100svh;
19
+
max-width: 80ch;
19
20
20
-
display: flex;
21
-
flex-direction: column;
21
+
margin: 0 auto;
22
+
padding: 16px;
22
23
23
24
> main {
24
-
flex: 1;
25
-
26
-
ul, ol {
25
+
margin-bottom: 16px;
26
+
27
+
min-height: calc(100dvh - 75px - 50px - (2 * 16px));
28
+
29
+
@media (max-width: 769px) {
30
+
min-height: calc(100dvh - 75px - 106px - 60px - (2 * 16px));
31
+
}
32
+
33
+
ul,
34
+
ol {
27
35
margin-bottom: 8px;
28
-
36
+
29
37
&:last-child {
30
38
margin-bottom: 0;
31
39
}
···
46
54
}
47
55
48
56
// View Transition
49
-
// TODO: Add some fancy anim
57
+
// TODO: Add some fancy anim
+8
-16
styles/layout/Main.module.scss
+8
-16
styles/layout/Main.module.scss
···
1
-
.main {
2
-
display: flex;
3
-
4
-
align-items: flex-start;
1
+
.sideBar {
2
+
position: absolute;
5
3
6
-
gap: 16px;
4
+
left: calc(50% - ((80ch) / 2) - (215px));
5
+
6
+
width: 215px;
7
+
}
7
8
9
+
.main {
8
10
padding: 0 16px;
9
-
10
-
> div {
11
-
flex: 1;
12
-
13
-
max-width: calc(100% - (16px + 215px));
14
-
15
-
@media (max-width: 769px) {
16
-
max-width: 100%;
17
-
}
18
-
}
19
11
}
20
12
21
13
.error {
22
14
h2 {
23
15
font-weight: 600;
24
16
}
25
-
}
17
+
}
+2
styles/pages/Links.module.scss
+2
styles/pages/Links.module.scss