Skip to content
This repository was archived by the owner on May 18, 2025. It is now read-only.

Commit a780dda

Browse files
AlexDumoAlexDumo
committed
Add merch to website
1 parent 687cd48 commit a780dda

9 files changed

Lines changed: 183 additions & 122 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"prettier.configPath": "/Users/openmarchdev/Documents/GitHub/website/.prettierrc"
2+
"prettier.configPath": "/Users/openmarchdev/Documents/GitHub/website/.prettierrc",
3+
"cSpell.words": ["merch"]
34
}

‎public/merch/MerchLaunch-01.png‎

7.54 MB
Loading

‎public/merch/MerchLaunch-02.png‎

7.43 MB
Loading

‎public/merch/MerchLaunch-03.png‎

7.51 MB
Loading

‎public/merch/MerchLaunch-04.png‎

9.95 MB
Loading

‎public/merch/MerchLaunch-05.png‎

7.36 MB
Loading

‎src/components/Footer.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,12 @@ import ThemeSwitcher from "./ThemeSwitcher.astro";
9393
>
9494
About
9595
</a>
96+
<a
97+
href="https://store.openmarch.com"
98+
class="text-body duration-150 ease-out hover:text-accent"
99+
>
100+
Merch
101+
</a>
96102
<a
97103
href="/blog"
98104
class="text-body duration-150 ease-out hover:text-accent"

‎src/components/Nav.tsx‎

Lines changed: 129 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -4,125 +4,135 @@ import React, { useState } from "react";
44
import { LogoGitHub, LogoDiscord, LogoPatreon } from "./Logos.tsx";
55

66
export default function Nav() {
7-
const [isOpen, setIsOpen] = useState<boolean>(false);
7+
const [isOpen, setIsOpen] = useState<boolean>(false);
88

9-
return (
10-
<nav className="sticky top-0 z-[99] flex h-[4rem] w-full flex-col">
11-
<nav className="flex w-full items-center justify-between border-b border-stroke bg-modal px-64 py-16 shadow-modal backdrop-blur-md max-[750px]:px-24">
12-
<a href="/">
13-
<LogoTextMark />
14-
</a>
15-
<div className="flex items-center gap-16 max-[675px]:hidden">
16-
<a
17-
href="/"
18-
className="text-body text-text duration-150 ease-out hover:text-accent"
19-
>
20-
Home
21-
</a>
22-
<a
23-
href="/guides"
24-
className="text-body text-text duration-150 ease-out hover:text-accent"
25-
>
26-
Guides
27-
</a>
28-
<a
29-
href="/blog"
30-
className="text-body text-text duration-150 ease-out hover:text-accent"
31-
>
32-
Blog
33-
</a>
34-
<a
35-
href="/about"
36-
className="text-body text-text duration-150 ease-out hover:text-accent"
37-
>
38-
About
39-
</a>
40-
<a href="https://github.com/OpenMarch/OpenMarch">
41-
<Button
42-
variant="secondary"
43-
size="compact"
44-
className="items-center gap-6"
45-
>
46-
<LogoGitHub />
47-
Star
48-
</Button>
49-
</a>
50-
<a href="https://discord.gg/eTsQ98uZzq">
51-
<Button
52-
variant="secondary"
53-
size="compact"
54-
className="items-center gap-6"
55-
>
56-
<LogoDiscord />
57-
Discord
58-
</Button>
59-
</a>
60-
<a href="https://www.patreon.com/openmarch">
61-
<Button
62-
variant="secondary"
63-
size="compact"
64-
className="items-center gap-6"
65-
>
66-
<LogoPatreon />
67-
Donate
68-
</Button>
69-
</a>
70-
<a href="/download">
71-
<Button variant="primary" size="compact">
72-
Download
73-
</Button>
74-
</a>
75-
</div>
76-
<button
77-
onClick={() => setIsOpen(!isOpen)}
78-
className="h-fit min-[675px]:hidden"
79-
>
80-
{isOpen ? (
81-
<i className="ph ph-x text-[1.5rem]"></i>
82-
) : (
83-
<i className="ph ph-list text-[1.5rem]"></i>
84-
)}
85-
</button>
86-
</nav>
87-
<div
88-
id="mobile"
89-
className={`${isOpen ? "flex" : "hidden"} z-[99] m-12 animate-scale-in flex-col items-center gap-32 rounded-6 border border-stroke bg-modal p-32 backdrop-blur-32`}
9+
return (
10+
<nav className="sticky top-0 z-[99] flex h-[4rem] w-full flex-col">
11+
<nav className="flex w-full items-center justify-between border-b border-stroke bg-modal px-64 py-16 shadow-modal backdrop-blur-md max-[750px]:px-24">
12+
<a href="/">
13+
<LogoTextMark />
14+
</a>
15+
<div className="flex items-center gap-16 max-[675px]:hidden">
16+
<a
17+
href="/"
18+
className="text-body text-text duration-150 ease-out hover:text-accent"
19+
>
20+
Home
21+
</a>
22+
<a
23+
href="/guides"
24+
className="text-body text-text duration-150 ease-out hover:text-accent"
25+
>
26+
Guides
27+
</a>
28+
<a
29+
href="/blog"
30+
className="text-body text-text duration-150 ease-out hover:text-accent"
31+
>
32+
Blog
33+
</a>
34+
<a
35+
href="/about"
36+
className="text-body text-text duration-150 ease-out hover:text-accent"
37+
>
38+
About
39+
</a>
40+
<a href="https://github.com/OpenMarch/OpenMarch">
41+
<Button
42+
variant="secondary"
43+
size="compact"
44+
className="items-center gap-6"
9045
>
91-
<a href="/" className="text-h4 text-text">
92-
Home
93-
</a>
94-
<a href="/guides" className="text-h4 text-text">
95-
Guides
96-
</a>
97-
<a href="/blog" className="text-h4 text-text">
98-
Blog
99-
</a>
100-
<a
101-
href="https://github.com/OpenMarch/OpenMarch"
102-
className="flex items-center gap-8 text-h4 text-text"
103-
>
104-
<LogoGitHub />
105-
Star
106-
</a>
107-
<a
108-
href="https://discord.gg/eTsQ98uZzq"
109-
className="flex items-center gap-8 text-h4 text-text"
110-
>
111-
<LogoDiscord />
112-
Discord
113-
</a>
114-
<a
115-
href="https://www.patreon.com/openmarch"
116-
className="flex items-center gap-8 text-h4 text-text"
117-
>
118-
<LogoPatreon />
119-
Donate
120-
</a>
121-
<a href="/download" className="text-h4 text-text">
122-
Download
123-
</a>
124-
</div>
125-
</nav>
126-
);
46+
<LogoGitHub />
47+
Star
48+
</Button>
49+
</a>
50+
<a href="https://discord.gg/eTsQ98uZzq">
51+
<Button
52+
variant="secondary"
53+
size="compact"
54+
className="items-center gap-6"
55+
>
56+
<LogoDiscord />
57+
Discord
58+
</Button>
59+
</a>
60+
<a href="https://www.patreon.com/openmarch">
61+
<Button
62+
variant="secondary"
63+
size="compact"
64+
className="items-center gap-6"
65+
>
66+
<LogoPatreon />
67+
Donate
68+
</Button>
69+
</a>
70+
<a href="https://store.openmarch.com">
71+
<Button variant="secondary" size="compact">
72+
Merch
73+
</Button>
74+
</a>
75+
<a href="/download">
76+
<Button variant="primary" size="compact">
77+
Download
78+
</Button>
79+
</a>
80+
</div>
81+
<button
82+
onClick={() => setIsOpen(!isOpen)}
83+
className="h-fit min-[675px]:hidden"
84+
>
85+
{isOpen ? (
86+
<i className="ph ph-x text-[1.5rem]"></i>
87+
) : (
88+
<i className="ph ph-list text-[1.5rem]"></i>
89+
)}
90+
</button>
91+
</nav>
92+
<div
93+
id="mobile"
94+
className={`${isOpen ? "flex" : "hidden"} z-[99] m-12 animate-scale-in flex-col items-center gap-32 rounded-6 border border-stroke bg-modal p-32 backdrop-blur-32`}
95+
>
96+
<a href="/" className="text-h4 text-text">
97+
Home
98+
</a>
99+
<a href="/guides" className="text-h4 text-text">
100+
Guides
101+
</a>
102+
<a href="/blog" className="text-h4 text-text">
103+
Blog
104+
</a>
105+
<a href="/about" className="text-h4 text-text">
106+
About
107+
</a>
108+
<a
109+
href="https://github.com/OpenMarch/OpenMarch"
110+
className="flex items-center gap-8 text-h4 text-text"
111+
>
112+
<LogoGitHub />
113+
Star
114+
</a>
115+
<a
116+
href="https://discord.gg/eTsQ98uZzq"
117+
className="flex items-center gap-8 text-h4 text-text"
118+
>
119+
<LogoDiscord />
120+
Discord
121+
</a>
122+
<a
123+
href="https://www.patreon.com/openmarch"
124+
className="flex items-center gap-8 text-h4 text-text"
125+
>
126+
<LogoPatreon />
127+
Donate
128+
</a>
129+
<a href="https://store.openmarch.com" className="text-h4 text-text">
130+
Merch
131+
</a>
132+
<a href="/download" className="text-h4 text-text">
133+
Download
134+
</a>
135+
</div>
136+
</nav>
137+
);
127138
}
128-

‎src/pages/index.astro‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,50 @@ type Blog = CollectionEntry<"blog">;
174174
>
175175
</div>
176176
</div>
177+
178+
<section id="merch">
179+
<a
180+
class="grid grid-cols-4"
181+
href="https://store.openmarch.com"
182+
target="_blank"
183+
>
184+
<Image
185+
src={"/merch/MerchLaunch-02.png"}
186+
alt={"merch photo"}
187+
class="h-full w-full rotate-[-.1rad] rounded-6 border-2 border-accent object-cover"
188+
width={200}
189+
height={400}
190+
/>
191+
<Image
192+
src={"/merch/MerchLaunch-01.png"}
193+
alt={"merch photo"}
194+
class="col-span-2 row-span-2 h-full w-full rounded-6 border-2 border-accent object-cover"
195+
width={200}
196+
height={400}
197+
/>
198+
<Image
199+
src={"/merch/MerchLaunch-03.png"}
200+
alt={"merch photo"}
201+
class="h-full w-full rotate-[.13rad] rounded-6 border-2 border-accent object-cover"
202+
width={200}
203+
height={400}
204+
/>
205+
<Image
206+
src={"/merch/MerchLaunch-04.png"}
207+
alt={"merch photo"}
208+
class="h-full w-full rotate-[.13rad] rounded-6 border-2 border-accent object-cover"
209+
width={200}
210+
height={400}
211+
/>
212+
<Image
213+
src={"/merch/MerchLaunch-05.png"}
214+
alt={"merch photo"}
215+
class="h-full w-full rotate-[-.13rad] rounded-6 border-2 border-accent object-cover"
216+
width={200}
217+
height={400}
218+
/>
219+
</a>
220+
</section>
177221
<section id="blogs" class="flex flex-col gap-16">
178222
<div class="flex justify-between">
179223
<h1 class="text-h1">Blog</h1><a href="/blog"
@@ -188,7 +232,7 @@ type Blog = CollectionEntry<"blog">;
188232
.sort(
189233
(a, b) =>
190234
new Date(b.data.date).getTime() -
191-
new Date(a.data.date).getTime(),
235+
new Date(a.data.date).getTime()
192236
)
193237
.slice(0, 3)
194238
.map((blog: Blog) => (
@@ -218,7 +262,7 @@ type Blog = CollectionEntry<"blog">;
218262
month: "long",
219263
day: "numeric",
220264
timeZone: "UTC",
221-
},
265+
}
222266
)}
223267
</p>
224268
</div>

0 commit comments

Comments
 (0)