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