marco.tngl.sh
My personal site.
feat: redesign
+173
-111
+6
-2
notes/sprites-nix-package-manager.md
+6
-2
notes/sprites-nix-package-manager.md
···
7
7
8
8
Recently I stumbled upon [Fly.io](https://fly.io/)'s [Sprites](https://sprites.dev/).
9
9
10
-
[Tangled](https://tangled.org/) uses [`nix`](https://nixos.org/download) (the package manager)
10
+
[Tangled](https://tangled.org/) uses [nix](https://nixos.org/download) (the package manager)
11
11
and since I had my development setup for Tangled in a docker container(TODO: add footnote) it was a good excuse to play around with them.
12
12
13
13
## How to install
···
20
20
21
21
Next, add the `nix` daemon to the services of your Sprite:
22
22
23
-
`sprite-env services create nix-daemon --cmd sudo --args /nix/var/nix/profiles/default/bin/nix-daemon`
23
+
```bash
24
+
sprite-env services create nix-daemon \
25
+
--cmd sudo \
26
+
--args /nix/var/nix/profiles/default/bin/nix-daemon
27
+
```
24
28
25
29
That's all. Yep.
26
30
public/Fraunces.woff2
public/Fraunces.woff2
This is a binary file and will not be displayed.
+4
-7
src/components/Box.astro
+4
-7
src/components/Box.astro
···
5
5
<style>
6
6
.box {
7
7
position: relative;
8
-
border: 1px solid #ffffff26;
8
+
border: 1px solid oklch(20.8% 0.042 265.755);
9
9
padding: 24px;
10
10
margin-block: 24px;
11
+
border-radius: 4px;
11
12
}
12
13
13
14
.box > h2 {
···
17
18
font-size: 12px;
18
19
height: 24px;
19
20
line-height: 24px;
20
-
font-weight: 400;
21
+
font-weight: 500;
22
+
letter-spacing: 3px;
21
23
margin: 0;
22
24
background-color: var(--bg);
23
25
padding-inline: 4px;
24
26
text-transform: uppercase;
25
-
}
26
-
27
-
.box > h2::before {
28
-
content: "## ";
29
-
color: oklch(44.2% 0.017 285.786);
30
27
}
31
28
</style>
32
29
<div class="box">
+39
-6
src/components/Header.astro
+39
-6
src/components/Header.astro
···
1
1
---
2
-
2
+
const currentPath = Astro.url.pathname;
3
+
const isActive = (path: string) => currentPath === path;
3
4
---
4
5
5
6
<style>
···
19
20
color: inherit;
20
21
text-decoration: none;
21
22
font-weight: 400;
23
+
font-size: 20px;
22
24
}
23
25
24
26
#main-nav > ul {
···
34
36
35
37
#main-nav > ul > li > a {
36
38
text-decoration: none;
37
-
color: inherit;
38
-
text-transform: uppercase;
39
+
font-size: 16px;
40
+
font-weight: 500;
41
+
color: oklch(0.54 0.04 261.36);
42
+
position: relative;
39
43
}
40
44
41
45
#main-nav > ul > li > a:hover {
42
-
background-color: #ffffff26;
46
+
color: var(--fg);
47
+
}
48
+
49
+
#main-nav > ul > li > a.active:after {
50
+
content: "•";
51
+
position: absolute;
52
+
bottom: -14px;
53
+
width: 100%;
54
+
left: 0;
55
+
display: grid;
56
+
place-items: center;
57
+
color: var(--fg);
58
+
}
59
+
60
+
a span {
61
+
display: inline-block;
62
+
max-width: 0;
63
+
overflow: hidden;
64
+
vertical-align: bottom;
65
+
transition: max-width 100ms ease-out;
66
+
}
67
+
68
+
a:hover span:first-of-type {
69
+
max-width: 4ch;
70
+
}
71
+
72
+
a:hover span:last-of-type {
73
+
max-width: 6ch;
43
74
}
44
75
</style>
45
76
<header>
46
-
<a href="/">marco.social</a>
77
+
<a href="/">m<span>arco</span>.<span>social</span></a>
47
78
<nav id="main-nav">
48
79
<ul>
49
-
<li><a href="/notes">[ notes ]</a></li>
80
+
<li>
81
+
<a href="/notes" class:list={[{ active: isActive("/notes") }]}>Notes</a>
82
+
</li>
50
83
</ul>
51
84
</nav>
52
85
</header>
+9
-39
src/layouts/BaseLayout.astro
+9
-39
src/layouts/BaseLayout.astro
···
12
12
<title>marco.social</title>
13
13
<style is:global>
14
14
@font-face {
15
-
font-family: "Geist Mono";
16
-
src: url("/GeistMono.woff2") format("woff2");
15
+
font-family: "Fraunces";
16
+
src: url("/Fraunces.woff2") format("woff2");
17
17
font-display: swap;
18
18
}
19
19
20
20
:root {
21
-
--bg: oklch(21% 0.006 285.885);
22
-
--fg: oklch(98.5% 0 0);
21
+
--bg: oklch(97% 0.001 106.424);
22
+
--fg: oklch(20.8% 0.042 265.755);
23
23
}
24
24
25
25
body {
26
26
background-color: var(--bg);
27
27
color: var(--fg);
28
-
font-family:
29
-
Geist Mono,
30
-
monospace;
31
-
font-weight: 200;
32
-
font-size: 14px;
28
+
font-family: Fraunces;
29
+
font-weight: 300;
30
+
font-size: 18px;
33
31
}
34
32
35
33
main {
34
+
display: flex;
35
+
flex-direction: column;
36
36
margin-block: 24px;
37
37
max-width: 1024px;
38
38
margin-inline: auto;
···
41
41
42
42
strong {
43
43
font-weight: 500;
44
-
}
45
-
46
-
h1 {
47
-
text-transform: uppercase;
48
-
font-size: 14px;
49
-
font-weight: 400;
50
-
margin-bottom: 18px;
51
-
}
52
-
53
-
h1::before,
54
-
h2::before,
55
-
h3::before {
56
-
content: "# ";
57
-
color: oklch(44.2% 0.017 285.786);
58
-
}
59
-
60
-
h2,
61
-
h3 {
62
-
text-transform: uppercase;
63
-
font-size: 12px;
64
-
font-weight: 400;
65
-
margin-bottom: 18px;
66
-
}
67
-
68
-
h2::before {
69
-
content: "## ";
70
-
}
71
-
72
-
h3::before {
73
-
content: "### ";
74
44
}
75
45
</style>
76
46
</head>
+25
-5
src/layouts/PostLayout.astro
+25
-5
src/layouts/PostLayout.astro
···
5
5
---
6
6
7
7
<style is:global>
8
+
@font-face {
9
+
font-family: "GeistMono";
10
+
src: url("/GeistMono.woff2") format("woff2");
11
+
font-display: swap;
12
+
}
13
+
8
14
#info {
9
15
margin-bottom: 36px;
10
16
}
···
14
20
}
15
21
16
22
.prose a {
17
-
color: oklch(98.5% 0 0);
23
+
color: var(--fg);
24
+
font-weight: 500;
18
25
text-decoration: none;
19
-
border-bottom: 1px solid oklch(98.5% 0 0);
26
+
border-bottom: 1px solid var(--fg);
20
27
}
21
28
22
29
.prose h1 {
23
30
background-color: var(--fg);
24
31
color: var(--bg);
25
32
width: max-content;
26
-
padding: 8px;
33
+
padding-block: 8px;
34
+
padding-inline: 20px;
27
35
margin-inline: auto;
28
36
}
29
37
···
48
56
}
49
57
50
58
.prose code {
51
-
font-family: inherit;
59
+
font-family: GhostMono, monospace;
60
+
font-size: 14px;
52
61
font-weight: 400;
53
-
background-color: #ffffff26;
62
+
background-color: color-mix(var(--bg), white 90%);
63
+
border-radius: 4px;
64
+
padding: 4px 2px;
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;
54
74
}
55
75
56
76
.prose code::before,
+49
-40
src/pages/index.astro
+49
-40
src/pages/index.astro
···
4
4
---
5
5
6
6
<style>
7
-
#intro {
8
-
margin-bottom: 36px;
7
+
section {
8
+
display: flex;
9
+
flex-direction: column;
10
+
}
11
+
12
+
#work {
13
+
margin-top: 12px;
9
14
}
10
15
11
16
@media (width >= 48rem) {
···
21
26
}
22
27
23
28
p {
24
-
margin-block: 20px;
29
+
margin-block: 6px;
25
30
}
26
31
27
32
ul {
···
44
49
}
45
50
</style>
46
51
<BaseLayout>
47
-
<div id="intro">
48
-
<p>Hi, if you haven't guessed it yet—I'm Marco.</p>
49
-
</div>
52
+
<section>
53
+
<div id="intro">
54
+
<h1>Hi!</h1>
55
+
<p>If you haven't guessed it yet, I'm Marco.</p>
56
+
</div>
50
57
51
-
<div id="about">
52
-
<h2>About me</h2>
53
-
<p>I'm a developer living in Germany.</p>
54
-
<p>Also, I climb rocks.</p>
55
-
</div>
58
+
<div id="about">
59
+
<h2>About me.</h2>
60
+
<p>Software Engineer.</p>
61
+
<p>Passionate about UX.</p>
62
+
<p>Likes to climb on rocks.</p>
63
+
</div>
56
64
57
-
<div id="work">
58
-
<Box class="currently" title="Currently">
59
-
<ul>
60
-
<li>
61
-
<span class="job-title">Senior Software Engineer</span>
62
-
<p>
63
-
<strong style="color: #f6673c;">Gofore</strong> • from April 2024
64
-
</p>
65
-
</li>
66
-
</ul>
67
-
</Box>
65
+
<div id="work">
66
+
<Box class="currently" title="Currently">
67
+
<ul>
68
+
<li>
69
+
<span class="job-title">Senior Software Engineer</span>
70
+
<p>
71
+
<strong style="color: #f6673c;">Gofore</strong> • from April 2024
72
+
</p>
73
+
</li>
74
+
</ul>
75
+
</Box>
68
76
69
-
<Box title="Formerly">
70
-
<ul>
71
-
<li>
72
-
<span class="job-title">Senior Software Engineer</span>
73
-
<p>
74
-
<strong>PRIMOZA</strong> • January 2021 – March 2024
75
-
</p>
76
-
</li>
77
-
<li>
78
-
<span class="job-title">Associate Software Engineer</span>
79
-
<p>
80
-
<strong>e.mundo</strong> • April 2018 – December 2020
81
-
</p>
82
-
</li>
83
-
</ul>
84
-
</Box>
85
-
</div>
86
-
</BaseLayout>
77
+
<Box title="Formerly">
78
+
<ul>
79
+
<li>
80
+
<span class="job-title">Senior Software Engineer</span>
81
+
<p>
82
+
<strong>PRIMOZA</strong> • January 2021 – March 2024
83
+
</p>
84
+
</li>
85
+
<li>
86
+
<span class="job-title">Associate Software Engineer</span>
87
+
<p>
88
+
<strong>e.mundo</strong> • April 2018 – December 2020
89
+
</p>
90
+
</li>
91
+
</ul>
92
+
</Box>
93
+
</div>
94
+
</section></BaseLayout
95
+
>
+41
-12
src/pages/notes/index.astro
+41
-12
src/pages/notes/index.astro
···
6
6
---
7
7
8
8
<style>
9
-
ul {
10
-
list-style: none;
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;
11
22
padding-inline: 0;
12
23
margin-top: 36px;
13
24
}
14
25
26
+
ol ::marker {
27
+
color: oklch(0.54 0.04 261.36);
28
+
}
29
+
15
30
li {
31
+
padding-inline-start: 0.5rem;
32
+
margin-left: -0.5rem;
33
+
}
34
+
35
+
li a {
16
36
display: flex;
37
+
width: 100%;
17
38
justify-content: space-between;
18
39
}
19
40
20
41
a {
21
42
color: inherit;
43
+
text-decoration: none;
44
+
}
45
+
46
+
a:hover span {
47
+
border-bottom: 2px solid var(--fg);
48
+
}
49
+
50
+
a span {
22
51
font-weight: 500;
23
-
text-decoration: none;
24
-
text-transform: uppercase;
25
52
}
26
53
</style>
27
54
···
29
56
<h1>Notes</h1>
30
57
Some more or less structured notes. Mostly for my own reference.
31
58
32
-
<ul>
59
+
<ol>
33
60
{
34
61
notes.map((note) => (
35
62
<li>
36
-
<a href={`/notes/${note.id}`}>{note.data.title}</a>
37
-
<time datetime={note.data.published.toISOString().slice(0, 10)}>
38
-
{note.data.published.toLocaleDateString("en-UK", {
39
-
dateStyle: "long",
40
-
})}
41
-
</time>
63
+
<a href={`/notes/${note.id}`}>
64
+
<span>{note.data.title}</span>
65
+
<time datetime={note.data.published.toISOString().slice(0, 10)}>
66
+
{note.data.published.toLocaleDateString("en-UK", {
67
+
dateStyle: "long",
68
+
})}
69
+
</time>
70
+
</a>
42
71
</li>
43
72
))
44
73
}
45
-
</ul>
74
+
</ol>
46
75
</BaseLayout>