Skip to content

Commit f394861

Browse files
tertsdiepraamtertsdiepraam
committed
redo styling and add a blog
1 parent 2622246 commit f394861

File tree

10 files changed

+354
-90
lines changed

10 files changed

+354
-90
lines changed

‎content/_index.md

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,41 @@
11
+++
2+
title = "Home"
3+
template = "index.html"
24
+++
35

4-
<header>
5-
<img src="logo.svg" alt="uutils" class="logo" />
6-
<h1 class="title">uutils</h1>
7-
</header>
6+
<div class="hero">
7+
<img src="logo.svg">
8+
<div>uutils</div>
9+
</div>
810

911
The uutils project reimplements ubiquitous command line utilities in
1012
Rust. Our goal is to modernize the utils, while retaining full
1113
compatibility with the existing utilities.
1214

13-
## Projects
15+
# Projects
1416

1517
<div class="projects">
1618
<a class="project" href="/coreutils">
17-
<span aria-hidden="true">&gt;</span>
18-
coreutils
19+
<h2>coreutils</h2>
20+
<p>
21+
The commands you use everyday: <code>ls</code>, <code>cp</code>, etc.
22+
</p>
1923
</a>
2024
<a class="project" href="/findutils">
21-
<span aria-hidden="true">&gt;</span>
22-
findutils
25+
<h2>findutils</h2>
26+
<p>
27+
Finding what you need: <code>find</code>, <code>locate</code>, <code>updatedb</code> &amp; <code>xargs</code>.
28+
</p>
2329
</a>
2430
<a class="project" href="/diffutils">
25-
<span aria-hidden="true">&gt;</span>
26-
diffutils
31+
<h2>diffutils</h2>
32+
<p>
33+
Comparing text and files: <code>diff</code>, <code>cmp</code>, <code>diff3</code>, <code>sdiff</code>.
34+
</p>
2735
</a>
2836
</div>
2937

30-
## Crates
38+
# Crates
3139

3240
We maintain a variety of public crates to support our projects,
3341
which are published on [crates.io](https://crates.io/).
@@ -36,7 +44,7 @@ which are published on [crates.io](https://crates.io/).
3644
- [`parse_datetime`](https://github.com/uutils/parse_datetime)
3745
- [`uutils-term-grid`](https://github.com/uutils/uutils-term-grid)
3846

39-
## Contributing
47+
# Contributing
4048

4149
You can help us out by:
4250

@@ -48,7 +56,7 @@ You can help us out by:
4856

4957
You can join our [Discord server](https://discord.gg/wQVJbvJ) to discuss or ask anything concerning uutils. We're happy to help you get started with contributing!
5058

51-
## Friends of uutils
59+
# Friends of uutils
5260

5361
We collaborate with and build upon many other projects in the Rust
5462
community, either by using or providing crates. We highly recommend

‎content/blog/_index.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
+++
2+
template = "section.html"
3+
sort_by = "date"
4+
page_template = "post.html"
5+
title = "Blog"
6+
+++

‎content/blog/test.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
+++
2+
title = "Test post"
3+
draft = true
4+
date = 2024-01-31
5+
authors = ["Terts Diepraam"]
6+
+++
7+
8+
This is a test post
9+
10+
# Heading 1

‎content/gsoc.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
+++
2-
title = "GSOC"
2+
title = "Uutils at GSOC"
33
+++
44

5-
# Uutils at GSOC
6-
75
Google summer of code is:
86

97
> Google Summer of Code is a global, online program focused on bringing

‎static/style.css

Lines changed: 172 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* All these styles are adapted from oranda to match their look */
2-
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;900&display=swap");
31
:root {
42
--dark-fg-color: #fff;
53
--light-fg-color: #141414;
@@ -68,6 +66,8 @@ body {
6866
body {
6967
line-height: inherit;
7068
margin: 0;
69+
display: flex;
70+
flex-direction: column;
7171
}
7272

7373
.container {
@@ -80,54 +80,129 @@ body {
8080
flex-grow: 1;
8181
}
8282

83-
/* REPO BANNER */
84-
.repo_banner {
85-
background-color: var(--fg-color);
86-
color: var(--bg-color);
87-
padding-bottom: 0.375rem;
88-
padding-top: 0.375rem;
83+
/* HEADER */
84+
header {
85+
display: grid;
86+
grid-template-columns: repeat(2, max-content) max-content 1fr max-content;
87+
column-gap: 1em;
88+
align-items: center;
89+
justify-items: center;
90+
padding: 0.5rem 2rem;
91+
width: 100%;
92+
border-bottom: 1px solid #ddd;
93+
font-size: 1.2rem;
94+
}
95+
96+
header .home {
97+
color: black;
98+
font-size: 2rem;
99+
font-weight: bold;
89100
}
90101

91-
.repo_banner > a {
92-
align-items: flex-start;
102+
header .home:first-child {
93103
display: flex;
94-
gap: 0.5rem;
95-
height: 20px;
96-
justify-content: center;
104+
align-items: center;
105+
vertical-align: center;
97106
}
98-
.repo_banner > a,
99-
.repo_banner > a:hover {
100-
color: rgb(248 250 252);
107+
108+
header .home svg {
109+
height: 3rem;
110+
width: 3rem;
101111
}
102-
.repo_banner > a:hover {
103-
text-decoration-color: #f8fafc;
104-
text-decoration-line: underline;
105-
text-underline-offset: 1px;
112+
113+
header a {
114+
color: black;
115+
border-bottom: 2px solid transparent;
106116
}
107117

108-
/* HEADER */
109-
.logo {
118+
header a:hover:not(.home) {
119+
color: black;
120+
border-bottom: 2px solid #c04828;
121+
}
122+
123+
.navigation-block {
124+
display: flex;
125+
flex-direction: row;
126+
gap: 1rem;
127+
}
128+
129+
header .icon {
130+
display: flex;
131+
align-items: center;
132+
}
133+
134+
#mobile-open-navigation button {
135+
display: none;
136+
}
137+
138+
#mobile-open-navigation {
139+
justify-self: right;
140+
}
141+
142+
@media (max-width: 640px) {
143+
#mobile-open-navigation button {
144+
display: block;
145+
flex-direction: column;
146+
background-color: transparent;
147+
}
148+
149+
#mobile-open-navigation button div {
150+
margin: 0.5em 0;
151+
width: 2em;
152+
border-bottom: 0.25em solid black;
153+
}
154+
155+
header {
156+
grid-template-columns: max-content 1fr;
157+
}
158+
159+
.spacer {
160+
display: none;
161+
}
162+
163+
.navigation-block {
164+
margin-top: 0.5em;
165+
grid-column: auto / span 2;
166+
justify-self: left;
167+
}
168+
169+
header:not(.open) .spacer,
170+
header:not(.open) .navigation-block {
171+
display: none;
172+
}
173+
}
174+
175+
/* HERO */
176+
.hero {
177+
margin: 2rem 0;
178+
}
179+
180+
.hero img {
110181
display: block;
111-
height: 170px;
182+
height: 14em;
112183
margin: auto;
113184
}
114-
.title {
185+
186+
.hero div {
115187
font-size: 3.75rem;
116188
line-height: 1;
117189
text-align: center;
118190
padding-bottom: 0.5rem;
191+
font-weight: bold;
119192
}
193+
120194
@media (min-width: 640px) {
121-
.title {
195+
.hero div {
122196
font-size: 6rem;
123197
line-height: 1;
124198
}
125199
}
126200

127201
/* MAIN */
128202
main {
129-
margin: 6rem auto;
130-
max-width: 80%;
203+
margin: 1rem auto;
204+
width: 80%;
205+
flex: 1;
131206
}
132207

133208
@media (min-width: 1024px) {
@@ -137,7 +212,7 @@ main {
137212
}
138213

139214
h1 {
140-
font-size: 1.875rem;
215+
font-size: 1.5rem;
141216
font-weight: 900;
142217
line-height: 2.25rem;
143218
line-height: 1.25;
@@ -153,7 +228,7 @@ p {
153228

154229
@media (min-width: 640px) {
155230
h1 {
156-
font-size: 3.75rem;
231+
font-size: 3rem;
157232
line-height: 1;
158233
}
159234

@@ -216,35 +291,91 @@ footer {
216291
width: 1.25rem;
217292
}
218293

294+
.github-icon-black {
295+
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='000' 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");
296+
height: 1em;
297+
width: 1em;
298+
}
299+
219300
.projects {
220301
display: flex;
221-
flex-direction: row;
302+
flex-direction: column;
222303
flex-wrap: wrap;
223304
justify-content: space-between;
224305
width: 100%;
225-
gap: 1rem;
306+
gap: 2rem;
307+
margin-bottom: 1.5rem;
226308
}
227309

228310
.project {
229-
flex-basis: 20rem;
230-
flex-grow: 1;
231-
border: 3px solid #888;
232-
border-radius: 6px;
233-
padding: 2rem;
311+
border-left: 0.3em solid gray;
312+
padding: 1rem;
234313
text-decoration: none;
235314
color: var(--fg-color);
236-
font-size: 2rem;
237-
font-weight: 700;
238315
transition: text-decoration 0.3s;
239316
transition: border-color 0.3s;
240317
}
241-
.project > span {
318+
319+
.project h2 {
320+
margin-top: 0;
321+
font-family: monospace;
322+
}
323+
324+
.project p {
325+
margin-bottom: 0;
326+
}
327+
328+
.project>span {
242329
color: transparent;
243330
transition: color 0.3s;
244331
}
245-
.project:hover > span {
332+
333+
.project:hover>span {
246334
color: black;
247335
}
336+
248337
.project:hover {
249-
border-color: black;
338+
border-color: #c04828;
339+
}
340+
341+
.title {
342+
font-size: 3em;
343+
font-weight: bold;
344+
margin-bottom: 0.5em;
345+
}
346+
347+
@media (min-width: 640px) {
348+
.title {
349+
font-size: 4rem;
350+
line-height: 1;
351+
}
250352
}
353+
354+
.details {
355+
margin-bottom: 1.5em;
356+
color: #333;
357+
}
358+
359+
.post-thingy {
360+
display: block;
361+
padding: 1em;
362+
color: black;
363+
background: #e5e5e5;
364+
border-radius: 0.3em;
365+
border: 0.2em solid #e5e5e5;
366+
margin-bottom: 0.5em;
367+
}
368+
369+
.post-thingy:hover {
370+
border-color: #c04828;
371+
background: transparent;
372+
}
373+
374+
.post-thingy h1 {
375+
margin-bottom: 0.2em;
376+
}
377+
378+
blockquote {
379+
border-left: 0.2em solid gray;
380+
padding-left: 1em;
381+
}

0 commit comments

Comments
 (0)