Skip to content

Commit 2af6d38

Browse files
ilg-ulilg-ul
committed
website: re-generate commons
1 parent 9542aec commit 2af6d38

File tree

12 files changed

+407
-54
lines changed

12 files changed

+407
-54
lines changed

‎website/src/components/HomepageTools/index.tsx‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,17 @@ import Link from '@docusaurus/Link';
1717

1818
import tools from '@site/tools';
1919

20-
function Tool({ longName, shortName }) {
20+
function Tool({ longName, shortName, isWindows, isMacOS, isLinux }) {
2121
return (
2222
<>
2323
<div className="padding-vert--sm">
2424
<div>
25-
<b><Link to={'https://xpack-dev-tools.github.io/' + shortName + '-xpack/'}>{shortName}</Link></b> - <b>xPack {longName}</b>
25+
<b><Link to={'https://xpack-dev-tools.github.io/' + shortName + '-xpack/'}><span className="sub-web-home-link">{shortName}</span></Link></b> - <b>xPack {longName}</b>
26+
<span className="margin-left-platforms">
27+
{isWindows ? (<span className="platform-windows"></span>) : (<></>)}
28+
{isMacOS ? (<span className="platform-apple"></span>) : (<></>)}
29+
{isLinux ? (<span className="platform-linux"></span>) : (<></>)}
30+
</span>
2631
</div>
2732
<div className="padding-top--xs">
2833
<Link to={'https://github.com/xpack-dev-tools/' + shortName + '-xpack/releases/'}><img alt="GitHub Release" src={'https://img.shields.io/github/v/release/xpack-dev-tools/' + shortName + '-xpack?color=blue'} /></Link>
@@ -35,11 +40,16 @@ function Tool({ longName, shortName }) {
3540
)
3641
}
3742

38-
function ToolWork({ longName, shortName }) {
43+
function ToolWork({ longName, shortName, isWindows, isMacOS, isLinux }) {
3944
return (
4045
<>
4146
<div>
42-
<b><Link to={'https://xpack-dev-tools.github.io/' + shortName + '-xpack/'}>{shortName}</Link></b> - <b>xPack {longName}</b>
47+
<b><Link to={'https://xpack-dev-tools.github.io/' + shortName + '-xpack/'}><span className="sub-web-home-link">{shortName}</span></Link></b> - <b>xPack {longName}</b>
48+
<span className="margin-left-platforms">
49+
{isWindows ? (<span className="platform-windows"></span>) : (<></>)}
50+
{isMacOS ? (<span className="platform-apple"></span>) : (<></>)}
51+
{isLinux ? (<span className="platform-linux"></span>) : (<></>)}
52+
</span>
4353
</div>
4454
</>
4555
)
@@ -77,8 +87,14 @@ function ToolsRight() {
7787
<hr className="hero__hr2" />
7888
<div className="text--center padding-horiz--md padding-vert--md">
7989
<Heading as="h2">Other</Heading>
80-
<div><b><Link to={'https://github.com/xpack-dev-tools/xbb-helper-xpack'}>xbb-helper</Link></b> - <b>xPack Build Helper</b></div>
81-
<div><b><Link to={'https://xpack-dev-tools.github./xpack-build-box/'}>xpack-build-box</Link></b> - <b>xPack Build Box (XBB)</b></div>
90+
<div><b><Link to={'https://github.com/xpack-dev-tools/xbb-helper-xpack'}><span className="sub-web-github-link">xbb-helper</span></Link></b> - <b>xPack Build Helper</b></div>
91+
<div><b><Link to={'https://xpack-dev-tools.github./xpack-build-box/'}><span className="sub-web-home-link">xpack-build-box</span></Link></b> - <b>xPack Build Box (XBB)</b>
92+
<span className="margin-left-platforms">
93+
{false ? (<span className="platform-windows"></span>) : (<></>)}
94+
{false ? (<span className="platform-apple"></span>) : (<></>)}
95+
{true ? (<span className="platform-linux"></span>) : (<></>)}
96+
</span>
97+
</div>
8298
</div>
8399
</div>
84100
);

‎website/src/css/custom.css‎

Lines changed: 150 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -101,48 +101,48 @@ h2[class*="title"]
101101

102102
.sub-web-home-link::before {
103103
content: '';
104-
width: 26px;
105-
height: 26px;
104+
width: 1em;
105+
height: 1em;
106106
display: inline-flex;
107-
vertical-align: top;
107+
vertical-align: baseline;
108108
padding-right: 0.5em;
109-
background: url("/img/web.svg") no-repeat;
109+
background: url("/img/web-globe.svg") no-repeat;
110110
}
111111

112112
[data-theme='dark'] .sub-web-home-link::before {
113113
content: '';
114-
width: 26px;
115-
height: 26px;
114+
width: 1em;
115+
height: 1em;
116116
display: inline-flex;
117-
vertical-align: top;
117+
vertical-align: baseline;
118118
padding-right: 0.5em;
119-
background: url("/img/web-dark.svg") no-repeat;
119+
background: url("/img/web-globe-dark.svg") no-repeat;
120120
}
121121

122122
.sub-web-github-link::before {
123123
content: '';
124-
width: 24px;
125-
height: 24px;
124+
width: 1em;
125+
height: 1em;
126126
display: inline-flex;
127-
vertical-align: top;
127+
vertical-align: baseline;
128128
padding-right: 0.5em;
129-
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
129+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
130130
}
131131

132132
[data-theme='dark'] .sub-web-github-link::before {
133133
content: '';
134-
width: 24px;
135-
height: 24px;
134+
width: 1em;
135+
height: 1em;
136136
display: inline-flex;
137-
vertical-align: top;
137+
vertical-align: baseline;
138138
padding-right: 0.5em;
139-
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
139+
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
140140
}
141141

142142
.getting-started-link::before {
143143
content: '';
144-
width: 36px;
145-
height: 36px;
144+
width: 1.5em;
145+
height: 1.5em;
146146
display: inline-flex;
147147
vertical-align: bottom;
148148
margin-right: 0.5em;
@@ -151,8 +151,8 @@ h2[class*="title"]
151151

152152
.getting-started-link::after {
153153
content: '\0000a0 ';
154-
width: 36px;
155-
height: 36px;
154+
width: 1.5em;
155+
height: 1.5em;
156156
display: inline-flex;
157157
vertical-align: bottom;
158158
margin-left: 0.5em;
@@ -161,8 +161,8 @@ h2[class*="title"]
161161

162162
[data-theme='dark'] .getting-started-link::before {
163163
content: '';
164-
width: 36px;
165-
height: 36px;
164+
width: 1.5em;
165+
height: 1.5em;
166166
display: inline-flex;
167167
vertical-align: bottom;
168168
margin-right: 0.5em;
@@ -171,8 +171,8 @@ h2[class*="title"]
171171

172172
[data-theme='dark'] .getting-started-link::after {
173173
content: '\0000a0 ';
174-
width: 36px;
175-
height: 36px;
174+
width: 1.5em;
175+
height: 1.5em;
176176
display: inline-flex;
177177
vertical-align: bottom;
178178
margin-left: 0.5em;
@@ -199,6 +199,132 @@ h2[class*="title"]
199199
no-repeat;
200200
}
201201

202+
203+
.platform-windows::before {
204+
content: '';
205+
width: 1em;
206+
height: 1em;
207+
display: inline-flex;
208+
vertical-align: baseline;
209+
padding-right: 0.5em;
210+
background: url("/img/windows-svgrepo-com.svg") no-repeat;
211+
}
212+
213+
[data-theme='dark'] .platform-windows::before {
214+
content: '';
215+
width: 1em;
216+
height: 1em;
217+
display: inline-flex;
218+
vertical-align: baseline;
219+
padding-right: 0.5em;
220+
background: url("/img/windows-svgrepo-com-dark.svg") no-repeat;
221+
}
222+
223+
.platform-apple::before {
224+
content: '';
225+
width: 1em;
226+
height: 1em;
227+
display: inline-flex;
228+
vertical-align: baseline;
229+
padding-right: 0.5em;
230+
background: url("/img/apple-svgrepo-com.svg") no-repeat;
231+
}
232+
233+
[data-theme='dark'] .platform-apple::before {
234+
content: '';
235+
width: 1em;
236+
height: 1em;
237+
display: inline-flex;
238+
vertical-align: baseline;
239+
padding-right: 0.5em;
240+
background: url("/img/apple-svgrepo-com-dark.svg") no-repeat;
241+
}
242+
243+
.platform-linux::before {
244+
content: '';
245+
width: 1em;
246+
height: 1em;
247+
display: inline-flex;
248+
vertical-align: baseline;
249+
padding-right: 0.5em;
250+
background: url("/img/linux-svgrepo-com.svg") no-repeat;
251+
}
252+
253+
[data-theme='dark'] .platform-linux::before {
254+
content: '';
255+
width: 1em;
256+
height: 1em;
257+
display: inline-flex;
258+
vertical-align: baseline;
259+
padding-right: 0.5em;
260+
background: url("/img/linux-svgrepo-com-dark.svg") no-repeat;
261+
}
262+
263+
.tagline-platform-windows::before {
264+
content: '';
265+
width: 1em;
266+
height: 1em;
267+
display: inline-flex;
268+
vertical-align: baseline;
269+
padding-right: 0.5em;
270+
background: url("/img/windows-svgrepo-com-dark.svg") no-repeat;
271+
}
272+
273+
[data-theme='dark'] .tagline-platform-windows::before {
274+
content: '';
275+
width: 1em;
276+
height: 1em;
277+
display: inline-flex;
278+
vertical-align: baseline;
279+
padding-right: 0.5em;
280+
background: url("/img/windows-svgrepo-com.svg") no-repeat;
281+
}
282+
283+
.tagline-platform-apple::before {
284+
content: '';
285+
width: 1em;
286+
height: 1em;
287+
display: inline-flex;
288+
vertical-align: baseline;
289+
padding-right: 0.5em;
290+
background: url("/img/apple-svgrepo-com-dark.svg") no-repeat;
291+
}
292+
293+
[data-theme='dark'] .tagline-platform-apple::before {
294+
content: '';
295+
width: 1em;
296+
height: 1em;
297+
display: inline-flex;
298+
vertical-align: baseline;
299+
padding-right: 0.5em;
300+
background: url("/img/apple-svgrepo-com.svg") no-repeat;
301+
}
302+
303+
.tagline-platform-linux::before {
304+
content: '';
305+
width: 1em;
306+
height: 1em;
307+
display: inline-flex;
308+
vertical-align: baseline;
309+
padding-right: 0.5em;
310+
background: url("/img/linux-svgrepo-com-dark.svg") no-repeat;
311+
}
312+
313+
[data-theme='dark'] .tagline-platform-linux::before {
314+
content: '';
315+
width: 1em;
316+
height: 1em;
317+
display: inline-flex;
318+
vertical-align: baseline;
319+
padding-right: 0.5em;
320+
background: url("/img/linux-svgrepo-com.svg") no-repeat;
321+
}
322+
323+
.margin-left-platforms::before {
324+
content: ' ';
325+
margin-left: 0.6em;
326+
}
327+
202328
img.mac-stadium-img {
203329
float: right;
204330
width: 200px;

‎website/src/pages/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,13 @@ function HomepageHeader() {
3131
<HeadTitle title="Welcome to the xPack Binary Development Tools!" />
3232
<div className="container">
3333
<Heading as="h1" className="hero__title">{siteConfig.title}</Heading>
34-
<p className="hero__subtitle">{siteConfig.tagline}</p>
34+
<p className="hero__subtitle">{siteConfig.tagline}
35+
<span className="margin-left-platforms">
36+
<span className="tagline-platform-windows"></span>
37+
<span className="tagline-platform-apple"></span>
38+
<span className="tagline-platform-linux"></span>
39+
</span>
40+
</p>
3541
</div>
3642
</header>
3743
);

‎website/static/img/apple-svgrepo-com-dark.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎website/static/img/apple-svgrepo-com.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎website/static/img/linux-svgrepo-com-dark.svg‎

Lines changed: 46 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)