Skip to content

Commit 1b29426

Browse files
Studio384Studio384
committed
Convert footer to Tailwind, various minor updates
1 parent 50b3f2c commit 1b29426

4 files changed

Lines changed: 95 additions & 136 deletions

File tree

‎docs/src/design/layout/LayoutElements/Footer.tsx‎

Lines changed: 80 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,90 @@
11
import { NavLink } from 'react-router';
22

3-
import { Box, Container, Grid, Link, List, ListItem, ListItemButton, ListItemContent, ListItemDecorator, Sheet, Stack, Typography } from '@mui/joy';
3+
import Amicon, { aiBluesky, aiGithub, aiHeart, aiStudio384, aiTwitter } from '@studio384/amicons';
44

5-
import Amicon, { aiGithub, aiHeart, aiStudio384, aiTwitter } from '@studio384/amicons';
5+
import pkg from '../../../../../amicons/package.json';
66

77
export default function Footer() {
88
return (
9-
<Sheet
10-
variant="soft"
11-
color="primary"
12-
sx={{
13-
py: 5,
14-
borderTop: '1px solid var(--joy-palette-primary-300)'
15-
}}
16-
>
17-
<Container>
18-
<Grid container spacing={3}>
19-
<Grid
20-
xs={12}
21-
sm={5}
22-
md={6}
23-
lg={8}
24-
sx={{
25-
display: 'flex',
26-
flexDirection: { sx: 'row', sm: 'column' },
27-
justifyContent: 'space-between'
28-
}}
29-
>
30-
<Box>
31-
<Stack direction="row" alignItems="center">
32-
<img src="favicon.png" style={{ width: 36, height: 36, marginRight: 8 }} />
33-
<Typography level="h1" fontSize="xl3">
34-
Amicons
35-
</Typography>
36-
</Stack>
37-
<Typography sx={{ mt: 1 }}>
38-
Amicons is a set of SVG icons made with <Amicon icon={aiHeart} /> in Belgium.
39-
</Typography>
40-
</Box>
41-
</Grid>
42-
<Grid container xs={12} sm={7} md={6} lg={4}>
43-
<Grid xs={6}>
44-
<Typography level="title-lg" sx={{ ml: 1, mb: 1 }}>
45-
Support
46-
</Typography>
47-
<List
48-
sx={{
49-
gap: 0.25,
50-
'--ListItem-paddingY': 0,
51-
'--ListItem-radius': 'var(--joy-radius-md)',
52-
'--ListItem-paddingLeft': '.5rem',
53-
'--ListItem-paddingRight': '.5rem',
54-
'--ListItemDecorator-size': '1.5rem'
55-
}}
9+
<div className="container m-auto my-4 max-w-7xl px-4">
10+
<div className="rounded-lg border border-indigo-200 bg-indigo-100 p-8 text-black">
11+
<div className="mb-8 grid grid-cols-2 grid-rows-[auto_auto] gap-4 lg:grid-cols-[3fr_1fr_1fr] lg:grid-rows-1">
12+
<div className="col-span-full mb-4 lg:col-span-1 lg:mb-0">
13+
<NavLink
14+
to="/"
15+
className="flex flex-row items-center gap-2 rounded-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-indigo-600"
16+
>
17+
<img src="favicon.png" className="size-10" />
18+
<span className="hiddem font-display text-3xl lg:block">
19+
Amicons <span className="text-sm font-light opacity-50">v{pkg.version}</span>
20+
</span>
21+
</NavLink>
22+
<p className="mt-2">
23+
Amicons is a set of SVG icons made with <Amicon icon={aiHeart} /> in Belgium.
24+
</p>
25+
</div>
26+
<div className="-ms-4 lg:ms-0">
27+
<h2 className="font-display mb-4 ps-2.5 text-lg font-medium">Support</h2>
28+
29+
<div className="flex flex-col gap-0.5">
30+
<NavLink
31+
to="/docs/installation"
32+
className="flex h-8 items-center gap-2 rounded-sm px-2.5 text-sm hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
33+
>
34+
Documentation
35+
</NavLink>
36+
<NavLink
37+
to="/changelog"
38+
className="flex h-8 items-center gap-2 rounded-sm px-2.5 text-sm hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
39+
>
40+
Changelog
41+
</NavLink>
42+
<a
43+
href="https://github.com/Studio384/amicons/issues/new/choose"
44+
className="flex h-8 items-center gap-2 rounded-sm px-2.5 text-sm hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
45+
>
46+
Report a bug
47+
</a>
48+
</div>
49+
</div>
50+
<div>
51+
<h2 className="font-display mb-4 ps-2.5 text-lg font-medium">Community</h2>
52+
53+
<div className="flex flex-col gap-0.5">
54+
<a
55+
href="https://github.com/studio384/amicons"
56+
className="flex h-8 items-center gap-2 rounded-sm px-2.5 text-sm hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
57+
>
58+
<Amicon icon={aiGithub} /> GitHub
59+
</a>
60+
<a
61+
href="https://bsky.app/profile/studio384.be"
62+
className="flex h-8 items-center gap-2 rounded-sm px-2.5 text-sm hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
63+
>
64+
<Amicon icon={aiBluesky} /> Bluesky
65+
</a>
66+
<a
67+
href="https://studio384.be"
68+
className="flex h-8 items-center gap-2 rounded-sm px-2.5 text-sm hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
5669
>
57-
<ListItem>
58-
<ListItemButton color="primary" variant="soft" component={NavLink} to="/docs">
59-
<ListItemContent>
60-
<Typography>Documentation</Typography>
61-
</ListItemContent>
62-
</ListItemButton>
63-
</ListItem>
64-
<ListItem>
65-
<ListItemButton color="primary" variant="soft" component={NavLink} to="/changelog">
66-
<ListItemContent>
67-
<Typography>Changelog</Typography>
68-
</ListItemContent>
69-
</ListItemButton>
70-
</ListItem>
71-
<ListItem>
72-
<ListItemButton color="primary" variant="soft" component="a" href="https://github.com/Studio384/amicons/issues/new/choose">
73-
<ListItemContent>
74-
<Typography>Report a bug</Typography>
75-
</ListItemContent>
76-
</ListItemButton>
77-
</ListItem>
78-
</List>
79-
</Grid>
80-
<Grid xs={6}>
81-
<Typography level="title-lg" sx={{ ml: 1, mb: 1 }}>
82-
Community
83-
</Typography>
84-
<List
85-
sx={{
86-
gap: 0.25,
87-
'--ListItem-paddingY': 0,
88-
'--ListItem-radius': 'var(--joy-radius-md)',
89-
'--ListItem-paddingLeft': '.5rem',
90-
'--ListItem-paddingRight': '.5rem',
91-
'--ListItemDecorator-size': '1.5rem'
92-
}}
70+
<Amicon icon={aiStudio384} /> Studio 384
71+
</a>
72+
<a
73+
href="https://twitter.com/studio384"
74+
className="flex h-8 items-center gap-2 rounded-sm px-2.5 text-sm hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
9375
>
94-
<ListItem>
95-
<ListItemButton color="primary" variant="soft" component="a" href="https://github.com/studio384/amicons">
96-
<ListItemDecorator>
97-
<Amicon icon={aiGithub} />
98-
</ListItemDecorator>
99-
<ListItemContent>
100-
<Typography>GitHub</Typography>
101-
</ListItemContent>
102-
</ListItemButton>
103-
</ListItem>
104-
<ListItem>
105-
<ListItemButton color="primary" variant="soft" component="a" href="https://twitter.com/studio384">
106-
<ListItemDecorator>
107-
<Amicon icon={aiTwitter} />
108-
</ListItemDecorator>
109-
<ListItemContent>
110-
<Typography>Twitter</Typography>
111-
</ListItemContent>
112-
</ListItemButton>
113-
</ListItem>
114-
<ListItem>
115-
<ListItemButton color="primary" variant="soft" component="a" href="https://studio384.be">
116-
<ListItemDecorator>
117-
<Amicon icon={aiStudio384} />
118-
</ListItemDecorator>
119-
<ListItemContent>
120-
<Typography>Studio 384</Typography>
121-
</ListItemContent>
122-
</ListItemButton>
123-
</ListItem>
124-
</List>
125-
</Grid>
126-
</Grid>
127-
<Grid xs={12} sx={{ pt: { xs: 3, md: 5 } }}>
128-
<Stack direction="row" gap={1} justifyContent="space-between" alignItems="center">
129-
<Typography fontSize="sm">
130-
&copy; 2021-2026 &middot;{' '}
131-
<Link href="https://studio384.be" color="primary" sx={{ fontFamily: 'Century Gothic, Segoe UI Variable Display, Segoe UI', fontWeight: 'lg' }}>
132-
Studio 384
133-
</Link>
134-
</Typography>
135-
</Stack>
136-
</Grid>
137-
</Grid>
138-
</Container>
139-
</Sheet>
76+
<Amicon icon={aiTwitter} /> Twitter
77+
</a>
78+
</div>
79+
</div>
80+
</div>
81+
<p className="text-sm">
82+
&copy; 2021-2026 &middot;{' '}
83+
<a href="https://studio384.be" className="font-dev font-semibold">
84+
Studio 384
85+
</a>
86+
</p>
87+
</div>
88+
</div>
14089
);
14190
}

‎docs/src/design/layout/LayoutElements/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
33
export default function Header({ children }: PropsWithChildren) {
44
return (
55
<div className="border-b border-indigo-200 bg-indigo-100 pt-23 pb-4">
6-
<div className="m-auto w-7xl px-4">{children}</div>
6+
<div className="container m-auto max-w-7xl px-4">{children}</div>
77
</div>
88
);
99
}

‎docs/src/design/layout/LayoutElements/Navbar.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { NavLink, useLocation } from 'react-router';
22

33
import { NavigationMenu } from '@base-ui/react';
4-
import Amicon, { aiGithub, aiStudio384 } from '@studio384/amicons';
4+
import Amicon, { aiBluesky, aiGithub, aiStudio384 } from '@studio384/amicons';
55
import clsx from 'clsx';
66

77
import pkg from '../../../../../amicons/package.json';
@@ -11,16 +11,16 @@ export default function Navbar() {
1111

1212
return (
1313
<>
14-
<div className="sticky top-0 z-50 container m-auto w-7xl px-4 py-4">
15-
<NavigationMenu.Root className="grid h-15 grid-cols-3 items-center justify-between rounded-lg border border-indigo-400/90 bg-indigo-400/90 px-3.5 backdrop-blur-sm backdrop-saturate-200">
14+
<div className="sticky top-0 z-50 container m-auto max-w-7xl px-4 py-4">
15+
<NavigationMenu.Root className="grid h-15 grid-cols-[repeat(3,auto)] items-center justify-between rounded-lg border border-indigo-400/90 bg-indigo-400/90 px-3.5 backdrop-blur-sm backdrop-saturate-200 md:grid-cols-3">
1616
<NavigationMenu.List className="flex justify-start gap-1">
1717
<NavigationMenu.Item>
1818
<NavLink
1919
to="/"
2020
className="flex flex-row items-center gap-2 rounded-sm font-medium text-white focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-indigo-600"
2121
>
2222
<img src="favicon.png" className="size-6" />
23-
<span className="hiddem font-display text-xl lg:block">
23+
<span className="font-display hidden text-xl md:block">
2424
Amicons <span className="text-sm font-light opacity-50">v{pkg.version}</span>
2525
</span>
2626
</NavLink>
@@ -79,6 +79,15 @@ export default function Navbar() {
7979
<Amicon icon={aiStudio384} /> <span className="sr-only">Studio 384</span>
8080
</a>
8181
</NavigationMenu.Item>
82+
<NavigationMenu.Item>
83+
<a
84+
href="https://bsky.app/profile/studio384.be"
85+
target="_blank"
86+
className="flex size-8 items-center justify-center rounded-sm text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500"
87+
>
88+
<Amicon icon={aiBluesky} /> <span className="sr-only">Studio384.be on Bluesky</span>
89+
</a>
90+
</NavigationMenu.Item>
8291
<NavigationMenu.Item>
8392
<a
8493
href="https://github.com/studio384/amicons"

‎docs/src/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77

88
@theme {
99
--font-display: 'Lexend', sans-serif;
10+
--font-dev: 'Century Gothic', 'Segoe UI Variable Display', var(--font-sans);
1011
}

0 commit comments

Comments
 (0)