Skip to content

Commit c1807fd

Browse files
lorenzopalaialorenzopalaia
committed
fix: stick footer to bottom of the page
1 parent 3e9d2f5 commit c1807fd

File tree

2 files changed

+101
-92
lines changed

2 files changed

+101
-92
lines changed

‎src/layout/PageLayout/Footer.tsx

+93-91
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,125 @@
11
import React from "react";
22
import Link from "next/link";
3-
import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core";
3+
import { Anchor, Box, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core";
44
import dayjs from "dayjs";
55
import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa";
66
import { FaXTwitter } from "react-icons/fa6";
77
import { JSONCrackLogo } from "../JsonCrackLogo";
88

99
export const Footer = () => {
1010
return (
11-
<Container mt={60} px={60} pb="xl" bg="black" fluid>
12-
<Divider color="gray.3" mb="xl" mx={-60} />
13-
<Flex justify="space-between">
14-
<Stack gap={4} visibleFrom="sm">
15-
<JSONCrackLogo />
16-
<Anchor href="mailto:[email protected]" fz="xs" c="dimmed">
17-
[email protected]
18-
</Anchor>
19-
</Stack>
20-
<Flex gap={60} visibleFrom="sm">
21-
<Stack gap="xs">
22-
<Text fz="sm" c="white">
23-
Product
24-
</Text>
25-
<Anchor
26-
fz="sm"
27-
c="gray.5"
28-
href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
29-
rel="noopener"
30-
>
31-
VS Code
32-
</Anchor>
33-
<Anchor
34-
href="https://github.com/AykutSarac/jsoncrack.com"
35-
fz="sm"
36-
c="gray.5"
37-
target="_blank"
38-
rel="noopener"
39-
>
40-
Open Source
41-
</Anchor>
42-
<Anchor
43-
href="https://todiagram.com?utm_source=jsoncrack&utm_medium=footer"
44-
fz="sm"
45-
c="gray.5"
46-
rel="noopener"
47-
>
48-
ToDiagram
49-
</Anchor>
50-
</Stack>
51-
<Stack gap="xs">
52-
<Text fz="sm" c="white">
53-
Resources
54-
</Text>
55-
<Anchor component={Link} prefetch={false} fz="sm" c="gray.5" href="/#faq">
56-
FAQ
57-
</Anchor>
58-
<Anchor component={Link} prefetch={false} fz="sm" c="gray.5" href="/docs">
59-
Docs
11+
<Box w="100%" mt={60} bg="black">
12+
<Divider color="gray.3" mb="xl" />
13+
<Container px={{ base: 16, sm: 60 }} pb="xl">
14+
<Flex justify="space-between">
15+
<Stack gap={4} visibleFrom="sm">
16+
<JSONCrackLogo />
17+
<Anchor href="mailto:[email protected]" fz="xs" c="dimmed">
18+
[email protected]
6019
</Anchor>
6120
</Stack>
62-
<Stack gap="xs">
63-
<Text fz="sm" c="white">
64-
Social
65-
</Text>
66-
<Flex gap="xs">
21+
<Flex gap={60} visibleFrom="sm">
22+
<Stack gap="xs">
23+
<Text fz="sm" c="white">
24+
Product
25+
</Text>
6726
<Anchor
68-
aria-label="LinkedIn"
69-
href="https://www.linkedin.com/company/jsoncrack"
7027
fz="sm"
28+
c="gray.5"
29+
href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
7130
rel="noopener"
7231
>
73-
<ThemeIcon variant="transparent" color="gray.5">
74-
<FaLinkedin size={20} />
75-
</ThemeIcon>
76-
</Anchor>
77-
<Anchor aria-label="X" fz="sm" href="https://x.com/jsoncrack" rel="noopener">
78-
<ThemeIcon variant="transparent" color="gray.5">
79-
<FaXTwitter size={20} />
80-
</ThemeIcon>
32+
VS Code
8133
</Anchor>
8234
<Anchor
83-
aria-label="GitHub"
8435
href="https://github.com/AykutSarac/jsoncrack.com"
8536
fz="sm"
37+
c="gray.5"
38+
target="_blank"
8639
rel="noopener"
8740
>
88-
<ThemeIcon variant="transparent" color="gray.5">
89-
<FaGithub size={20} />
90-
</ThemeIcon>
41+
Open Source
9142
</Anchor>
9243
<Anchor
93-
aria-label="Discord"
44+
href="https://todiagram.com?utm_source=jsoncrack&utm_medium=footer"
9445
fz="sm"
95-
href="https://discord.com/invite/yVyTtCRueq"
46+
c="gray.5"
9647
rel="noopener"
9748
>
98-
<ThemeIcon variant="transparent" color="gray.5">
99-
<FaDiscord size={20} />
100-
</ThemeIcon>
49+
ToDiagram
10150
</Anchor>
102-
</Flex>
103-
</Stack>
51+
</Stack>
52+
<Stack gap="xs">
53+
<Text fz="sm" c="white">
54+
Resources
55+
</Text>
56+
<Anchor component={Link} prefetch={false} fz="sm" c="gray.5" href="/#faq">
57+
FAQ
58+
</Anchor>
59+
<Anchor component={Link} prefetch={false} fz="sm" c="gray.5" href="/docs">
60+
Docs
61+
</Anchor>
62+
</Stack>
63+
<Stack gap="xs">
64+
<Text fz="sm" c="white">
65+
Social
66+
</Text>
67+
<Flex gap="xs">
68+
<Anchor
69+
aria-label="LinkedIn"
70+
href="https://www.linkedin.com/company/jsoncrack"
71+
fz="sm"
72+
rel="noopener"
73+
>
74+
<ThemeIcon variant="transparent" color="gray.5">
75+
<FaLinkedin size={20} />
76+
</ThemeIcon>
77+
</Anchor>
78+
<Anchor aria-label="X" fz="sm" href="https://x.com/jsoncrack" rel="noopener">
79+
<ThemeIcon variant="transparent" color="gray.5">
80+
<FaXTwitter size={20} />
81+
</ThemeIcon>
82+
</Anchor>
83+
<Anchor
84+
aria-label="GitHub"
85+
href="https://github.com/AykutSarac/jsoncrack.com"
86+
fz="sm"
87+
rel="noopener"
88+
>
89+
<ThemeIcon variant="transparent" color="gray.5">
90+
<FaGithub size={20} />
91+
</ThemeIcon>
92+
</Anchor>
93+
<Anchor
94+
aria-label="Discord"
95+
fz="sm"
96+
href="https://discord.com/invite/yVyTtCRueq"
97+
rel="noopener"
98+
>
99+
<ThemeIcon variant="transparent" color="gray.5">
100+
<FaDiscord size={20} />
101+
</ThemeIcon>
102+
</Anchor>
103+
</Flex>
104+
</Stack>
105+
</Flex>
104106
</Flex>
105-
</Flex>
106-
<Flex gap="xl">
107-
<Text fz="sm" c="dimmed">
108-
© {dayjs().get("year")} JSON Crack
109-
</Text>
110-
<Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/terms">
111-
<Text fz="sm" c="dimmed">
112-
Terms
113-
</Text>
114-
</Anchor>
115-
<Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/privacy">
107+
<Flex gap="xl" mt="xl">
116108
<Text fz="sm" c="dimmed">
117-
Privacy
109+
© {dayjs().get("year")} JSON Crack
118110
</Text>
119-
</Anchor>
120-
</Flex>
121-
</Container>
111+
<Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/terms">
112+
<Text fz="sm" c="dimmed">
113+
Terms
114+
</Text>
115+
</Anchor>
116+
<Anchor component={Link} prefetch={false} fz="sm" c="dimmed" href="/legal/privacy">
117+
<Text fz="sm" c="dimmed">
118+
Privacy
119+
</Text>
120+
</Anchor>
121+
</Flex>
122+
</Container>
123+
</Box>
122124
);
123125
};

‎src/layout/PageLayout/index.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,21 @@ const inter = Inter({
1212
const StyledLayoutWrapper = styled.div`
1313
background: #fff;
1414
font-family: ${inter.style.fontFamily};
15+
display: flex;
16+
flex-direction: column;
17+
min-height: 100vh;
18+
`;
19+
20+
const ContentWrapper = styled.div`
21+
flex: 1;
1522
`;
1623

1724
const PageLayout = ({ children }: React.PropsWithChildren) => {
1825
return (
1926
<ThemeProvider theme={lightTheme}>
2027
<StyledLayoutWrapper>
2128
<Navbar />
22-
{children}
29+
<ContentWrapper>{children}</ContentWrapper>
2330
<Footer />
2431
</StyledLayoutWrapper>
2532
</ThemeProvider>

0 commit comments

Comments
 (0)