Skip to content

Commit 7fb5c4d

Browse files
tertsdiepraamtertsdiepraam
committed
create homepage HTML
1 parent a96fa88 commit 7fb5c4d

File tree

2 files changed

+385
-0
lines changed

2 files changed

+385
-0
lines changed

‎homepage/index.html

+324
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>uutils</title>
5+
<style>
6+
/* All these styles are adapted from oranda to match their look */
7+
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;900&display=swap");
8+
:root {
9+
--dark-fg-color: #fff;
10+
--light-fg-color: #141414;
11+
--light-bg-color: var(--dark-fg-color);
12+
--dark-bg-color: var(--light-fg-color);
13+
--fg-color: var(--light-fg-color);
14+
--bg-color: var(--light-bg-color);
15+
--light-link-color: #0284c7;
16+
--dark-link-color: #8bb9fe;
17+
--link-color: var(--light-link-color);
18+
--light-highlight-bg-color: #ededed;
19+
--light-highlight-fg-color: #595959;
20+
--dark-highlight-bg-color: #27272a;
21+
--dark-highlight-fg-color: #ededed;
22+
--highlight-fg-color: var(--light-highlight-fg-color);
23+
--highlight-bg-color: var(--light-highlight-bg-color);
24+
--font-face: "Fira Sans", sans-serif;
25+
}
26+
27+
*,
28+
::after,
29+
::before {
30+
border: 0 solid #e5e7eb;
31+
box-sizing: border-box;
32+
}
33+
34+
html {
35+
font-feature-settings: normal;
36+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
37+
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
38+
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
39+
font-variation-settings: normal;
40+
line-height: 1.5;
41+
tab-size: 4;
42+
}
43+
44+
blockquote,
45+
dd,
46+
dl,
47+
figure,
48+
h1,
49+
h2,
50+
h3,
51+
h4,
52+
h5,
53+
h6,
54+
hr,
55+
p,
56+
pre {
57+
margin: 0;
58+
}
59+
60+
a {
61+
color: var(--link-color);
62+
text-decoration: inherit;
63+
}
64+
65+
/* PAGE LAYOUT */
66+
html,
67+
body {
68+
font-family: var(--font-face);
69+
height: 100%;
70+
scroll-behavior: smooth;
71+
}
72+
73+
body {
74+
line-height: inherit;
75+
margin: 0;
76+
}
77+
78+
.container {
79+
display: flex;
80+
flex-direction: column;
81+
min-height: 100%;
82+
}
83+
84+
.page-body {
85+
flex-grow: 1;
86+
}
87+
88+
/* REPO BANNER */
89+
.repo_banner {
90+
background-color: var(--fg-color);
91+
color: var(--bg-color);
92+
padding-bottom: 0.375rem;
93+
padding-top: 0.375rem;
94+
}
95+
96+
.repo_banner > a {
97+
align-items: flex-start;
98+
display: flex;
99+
gap: 0.5rem;
100+
height: 20px;
101+
justify-content: center;
102+
}
103+
.repo_banner > a,
104+
.repo_banner > a:hover {
105+
color: rgb(248 250 252);
106+
}
107+
.repo_banner > a:hover {
108+
text-decoration-color: #f8fafc;
109+
text-decoration-line: underline;
110+
text-underline-offset: 1px;
111+
}
112+
113+
/* HEADER */
114+
.logo {
115+
display: block;
116+
height: 170px;
117+
margin: auto;
118+
}
119+
.title {
120+
font-size: 3.75rem;
121+
line-height: 1;
122+
text-align: center;
123+
padding-bottom: 0.5rem;
124+
}
125+
@media (min-width: 640px) {
126+
.title {
127+
font-size: 6rem;
128+
line-height: 1;
129+
}
130+
}
131+
132+
/* MAIN */
133+
main {
134+
margin: 6rem auto;
135+
max-width: 80%;
136+
}
137+
138+
@media (min-width: 1024px) {
139+
main {
140+
max-width: 56rem;
141+
}
142+
}
143+
144+
h1 {
145+
font-size: 1.875rem;
146+
font-weight: 900;
147+
line-height: 2.25rem;
148+
line-height: 1.25;
149+
margin-bottom: 2rem;
150+
}
151+
152+
p {
153+
font-size: 1rem;
154+
line-height: 1.5rem;
155+
line-height: 1.625;
156+
margin-bottom: 2rem;
157+
}
158+
159+
@media (min-width: 640px) {
160+
h1 {
161+
font-size: 3.75rem;
162+
line-height: 1;
163+
}
164+
165+
p {
166+
font-size: 1.125rem;
167+
line-height: 1.75rem;
168+
}
169+
}
170+
171+
h2 {
172+
font-size: 1.5rem;
173+
font-weight: 700;
174+
line-height: 2rem;
175+
line-height: 1.25;
176+
margin-bottom: 1.5rem;
177+
}
178+
179+
@media (min-width: 640px) {
180+
h2 {
181+
font-size: 3rem;
182+
line-height: 1;
183+
}
184+
}
185+
186+
h2,
187+
h3 {
188+
margin-top: 3rem;
189+
}
190+
191+
@media (min-width: 640px) {
192+
li {
193+
font-size: 1.125rem;
194+
line-height: 1.75rem;
195+
}
196+
}
197+
198+
/* FOOTER */
199+
footer {
200+
align-items: center;
201+
background-color: var(--fg-color);
202+
color: var(--bg-color);
203+
display: flex;
204+
flex-grow: 0;
205+
flex-shrink: 1;
206+
font-size: 0.75rem;
207+
justify-content: space-between;
208+
line-height: 1rem;
209+
padding: 0.5rem 1rem;
210+
width: 100%;
211+
}
212+
213+
.github-icon {
214+
background-image: 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");
215+
height: 1.25rem;
216+
width: 1.25rem;
217+
}
218+
219+
.projects {
220+
display: flex;
221+
flex-direction: row;
222+
flex-wrap: wrap;
223+
justify-content: space-between;
224+
width: 100%;
225+
gap: 1rem;
226+
}
227+
228+
.project {
229+
flex-basis: 20rem;
230+
flex-grow: 1;
231+
border: 3px solid #888;
232+
border-radius: 6px;
233+
padding: 2rem;
234+
text-decoration: none;
235+
color: var(--fg-color);
236+
font-size: 2rem;
237+
font-weight: 700;
238+
transition: text-decoration 0.3s;
239+
transition: border-color 0.3s;
240+
}
241+
.project > span {
242+
color: transparent;
243+
transition: color 0.3s;
244+
}
245+
.project:hover > span {
246+
color: black;
247+
}
248+
.project:hover {
249+
border-color: black;
250+
}
251+
</style>
252+
</head>
253+
<body>
254+
<div class="container">
255+
<div class="repo_banner">
256+
<a href="https://github.com/uutils">
257+
<div class="github-icon" aria-hidden="true"></div>
258+
Check out our GitHub!
259+
</a>
260+
</div>
261+
<div class="page-body">
262+
<main>
263+
<header>
264+
<img src="logo.svg" alt="uutils" class="logo" />
265+
<h1 class="title">uutils</h1>
266+
</header>
267+
<p>
268+
The uutils project reimplements ubiquitous command line utilities in
269+
Rust. Our goal is to modernize the utils, while retaining full
270+
compatibility with the existing utilities.
271+
</p>
272+
<h2>Projects</h2>
273+
<div class="projects">
274+
<a class="project" href="/coreutils">
275+
<span aria-hidden="true">&gt;</span>
276+
coreutils
277+
</a>
278+
<a class="project" href="/findutils">
279+
<span aria-hidden="true">&gt;</span>
280+
findutils
281+
</a>
282+
</div>
283+
<h2>Crates</h2>
284+
<p>
285+
We maintain a variety of public crates to support our projects,
286+
which are published on <a href="https://crates.io/">crates.io</a>.
287+
</p>
288+
<ul>
289+
<li>
290+
<a href="https://github.com/uutils/platform-info"
291+
>platform-info</a
292+
>
293+
</li>
294+
<li>
295+
<a href="https://github.com/uutils/parse_datetime"
296+
>parse_datetime</a
297+
>
298+
</li>
299+
<li>
300+
<a href="https://github.com/uutils/rust-users">rust-users</a>
301+
</li>
302+
</ul>
303+
<h2>Friends of uutils</h2>
304+
<p>
305+
We collaborate with and build upon many other projects in the Rust
306+
community, either by using or providing crates. We highly recommend
307+
giving these projects a look!
308+
</p>
309+
<ul>
310+
<li><a href="https://www.nushell.sh/">nushell</a></li>
311+
<li><a href="https://github.com/burntsushi/ripgrep">ripgrep</a></li>
312+
<li><a href="https://github.com/ogham/exa">exa</a></li>
313+
</ul>
314+
</main>
315+
</div>
316+
<footer>
317+
<a href="https://github.com/uutils">
318+
<div class="github-icon" aria-hidden="true"></div>
319+
</a>
320+
<span>uutils, MIT</span>
321+
</footer>
322+
</div>
323+
</body>
324+
</html>

‎homepage/logo.svg

+61
Loading

0 commit comments

Comments
 (0)