marco.tngl.sh
My personal site.
feat: improve post design
+7
-1
astro.config.mjs
+7
-1
astro.config.mjs
+6
-7
notes/sprites-nix-package-manager.md
+6
-7
notes/sprites-nix-package-manager.md
···
12
12
13
13
## How to install
14
14
15
-
First, choose the multi-user installation:
16
-
15
+
First, choose the multi-user installation:
17
16
`sh <(curl --proto '=https' --tlsv1.2 -L https://nixos.org/nix/install) --daemon`
18
17
19
-
> **Note**: The installer will complain, that you don't have `systemd` installed. This is expected—we will handle that next.
18
+
> **Note**: The installer will complain, that you don't have `systemd` installed.
19
+
> This is expected—we will handle that next.
20
20
21
-
Next, add the `nix` daemon to the services of your Sprite:
22
-
21
+
Next, add the `nix` daemon to the services of your Sprite:
23
22
```bash
24
23
sprite-env services create nix-daemon \
25
-
--cmd sudo \
26
-
--args /nix/var/nix/profiles/default/bin/nix-daemon
24
+
--cmd sudo \
25
+
--args /nix/var/nix/profiles/default/bin/nix-daemon
27
26
```
28
27
29
28
That's all. Yep.
+8
-7
src/components/Header.astro
+8
-7
src/components/Header.astro
···
5
5
6
6
<style>
7
7
header {
8
-
margin-inline: 12px;
9
8
padding: 12px;
10
9
max-width: 1024px;
11
10
margin-inline: auto;
···
20
19
color: inherit;
21
20
text-decoration: none;
22
21
font-weight: 400;
23
-
font-size: 20px;
22
+
font-size: 24px;
24
23
}
25
24
26
25
#main-nav > ul {
···
69
68
transition: max-width 100ms ease-out;
70
69
}
71
70
72
-
a:hover span:first-of-type {
73
-
max-width: 4ch;
74
-
}
71
+
@media (hover: hover) {
72
+
a:hover span:first-of-type {
73
+
max-width: 4ch;
74
+
}
75
75
76
-
a:hover span:last-of-type {
77
-
max-width: 6ch;
76
+
a:hover span:last-of-type {
77
+
max-width: 6ch;
78
+
}
78
79
}
79
80
</style>
80
81
<header>
+31
-9
src/layouts/PostLayout.astro
+31
-9
src/layouts/PostLayout.astro
···
17
17
18
18
#published {
19
19
text-align: center;
20
+
margin-top: 24px;
20
21
}
21
22
22
23
.prose a {
···
24
25
font-weight: 500;
25
26
text-decoration: none;
26
27
border-bottom: 1px solid var(--fg);
28
+
}
29
+
30
+
.title-wrapper {
31
+
text-align: center;
27
32
}
28
33
29
34
.prose h1 {
35
+
display: inline;
36
+
box-decoration-break: clone;
37
+
-webkit-box-decoration-break: clone;
30
38
background-color: var(--fg);
31
39
color: var(--bg);
32
-
width: max-content;
33
40
padding-block: 8px;
34
41
padding-inline: 20px;
35
-
margin-inline: auto;
36
-
}
37
-
38
-
.prose h1::before {
39
-
content: "";
42
+
line-height: 4rem;
40
43
}
41
44
42
45
.prose h2,
···
46
49
47
50
.prose {
48
51
max-width: 65ch;
52
+
width: 100%;
49
53
margin-inline: auto;
50
54
}
51
55
52
56
.prose blockquote {
53
-
border-left: 2px solid red;
57
+
border-left: 3px solid red;
54
58
margin-left: 0;
55
59
padding-left: 12px;
56
60
}
···
65
69
}
66
70
67
71
.astro-code {
72
+
display: flex;
73
+
flex-direction: column;
68
74
background-color: color-mix(var(--bg), white 90%) !important;
75
+
overflow-y: visible !important;
69
76
border-radius: 4px;
77
+
padding-inline: 12px;
78
+
padding-top: 8px;
70
79
}
71
80
72
-
.astro-code code::before {
81
+
.astro-code::before,
82
+
.astro-code::after {
83
+
content: "```";
84
+
}
85
+
86
+
.astro-code code {
87
+
background: none;
88
+
padding: 0;
89
+
}
90
+
91
+
.astro-code code::before,
92
+
.astro-code code::after {
73
93
display: none;
74
94
}
75
95
···
93
113
<BaseLayout>
94
114
<article class="prose">
95
115
<header id="info">
96
-
<h1>{frontmatter.title}</h1>
116
+
<div class="title-wrapper">
117
+
<h1>{frontmatter.title}</h1>
118
+
</div>
97
119
<div id="published">
98
120
Published on
99
121
<time datetime={published.toISOString().slice(0, 10)}>
+24
-20
src/pages/notes/index.astro
+24
-20
src/pages/notes/index.astro
···
3
3
import BaseLayout from "../../layouts/BaseLayout.astro";
4
4
5
5
const notes = await getCollection("notes");
6
+
const pad = (i: number) => String(i).padStart(2, "0");
6
7
---
7
8
8
9
<style>
9
-
body {
10
-
counter-reset: note;
11
-
}
12
-
13
-
@counter-style pad-3 {
14
-
system: numeric;
15
-
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
16
-
suffix: " ";
17
-
pad: 2 "0";
18
-
}
19
-
20
10
ol {
21
-
list-style-type: pad-3;
11
+
list-style: none;
22
12
padding-inline: 0;
23
13
margin-top: 36px;
24
14
}
25
15
26
-
ol ::marker {
27
-
color: oklch(0.54 0.04 261.36);
16
+
li {
17
+
display: flex;
18
+
column-gap: 12px;
19
+
container-type: inline-size;
28
20
}
29
21
30
-
li {
31
-
padding-inline-start: 0.5rem;
32
-
margin-left: -0.5rem;
22
+
.list-counter {
23
+
color: oklch(0.54 0.04 261.36);
24
+
flex-shrink: 0;
33
25
}
34
26
35
27
li a {
36
28
display: flex;
29
+
flex-direction: column;
37
30
width: 100%;
38
31
justify-content: space-between;
32
+
33
+
@container (width >= 38rem) {
34
+
flex-direction: row;
35
+
}
39
36
}
40
37
41
38
a {
···
43
40
text-decoration: none;
44
41
}
45
42
46
-
a:hover span {
47
-
border-bottom: 2px solid var(--fg);
43
+
@media (hover: hover) {
44
+
a:hover span {
45
+
border-bottom: 1px solid var(--fg);
46
+
}
48
47
}
49
48
50
49
a span {
51
50
font-weight: 500;
52
51
}
52
+
53
+
time {
54
+
flex-shrink: 0;
55
+
}
53
56
</style>
54
57
55
58
<BaseLayout>
···
58
61
59
62
<ol>
60
63
{
61
-
notes.map((note) => (
64
+
notes.map((note, index) => (
62
65
<li>
66
+
<span class="list-counter">{pad(index + 1)}</span>
63
67
<a href={`/notes/${note.id}`}>
64
68
<span>{note.data.title}</span>
65
69
<time datetime={note.data.published.toISOString().slice(0, 10)}>