HTML document, Unicode text, UTF-8 text
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Home</title>
6
<link rel="stylesheet" href="/static/style.css">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
</head>
9
<body>
10
<header>
11
<nav>
12
<ul>
13
<li><a href="/">Home</a></li>
14
<li><a href="/projects">Projects</a></li>
15
<li><a href="/index">Index</a></li>
16
<li><a href="/about">About</a></li>
17
<li><a href="https://roundabout-host.com/roundabout">Roundabout-host</a></li>
18
</ul>
19
<ul>
20
<li><a href="mailto:root@roundabout-host.com" id="mail-link">root@roundabout-host.com</a></li>
21
</ul>
22
</nav>
23
</header>
24
<main>
25
26
<h1>All articles</h1>
27
29
30
<article class="content-area">
31
32
<h2><a href="/articles/semantic-css.html" class="article-title">Let's write more semantic CSS</a></h2>
33
<div class="home-article-date">2024-12-27</div>
34
<p><p>You probably wrote something like this at least once in your life:
35
</p><pre data-language="html"><div class="card card--rounded card--primary">
36
<div class="card__image-container">
37
<img src="image.jpg" alt="A nice image" class="card__image">
38
<span class="card__image-caption">A nice image</span>
39
</div>
40
<div class="card__content">
41
<div class="card__header">
42
<div class="card__title">Hello, world!</div>
43
</div>
44
<p class="card__text">
45
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
46
</p>
47
</div>
48
<div class="card__footer">
49
<button class="btn btn--primary btn--raised btn--accent card__button card__button--primary">Click me!</button>
50
<button class="btn btn--secondary btn--raised btn--accent card__button card__button--secondary">Click me!</button>
51
</div>
52
</div>
53
</pre><p>Or this:
54
</p><pre data-language="html"><div class="max-w-sm rounded overflow-hidden shadow-lg">
55
<div>
56
<img class="w-full" src="image.jpg" alt="A nice image">
57
<span class="text-gray-500 text-base">A nice image</span>
58
</div>
59
<div class="px-6 py-4">
60
<div>
61
<div class="font-bold text-xl mb-2">Hello, world!</div>
62
</div>
63
<p class="text-gray-700 text-base">
64
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
65
</p>
66
</div>
67
<div class="px-6 py-4">
68
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me!</button>
69
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">Click me!</button>
70
</div>
71
</div>
72
</pre></p>
73
</article>
74
75
76
77
<article class="content-area">
78
79
<h2><a href="/articles/homemade-nas.html" class="article-title">Cheap, homemade NAS with Raspberry Pi</a></h2>
80
<div class="home-article-date">2024-12-27</div>
81
<p><p>This is a very simple, cheap and quick way to get networked storage at home. It should not cost
82
more than €120 for all the components (assuming you've got a network you can plug it into). It also
83
offers more flexibility than a commercial NAS, because you can install any software you want on it.
84
And if you already use the Raspberry Pi for something else, you can just add this to it and not
85
worry about an extra device you need power, networking, space and maintenance for.
86
</p></p>
87
</article>
88
89
90
91
<article class="content-area">
92
93
<img src="/static/photos/browsers-bad.png" alt="The Pocket integration in Mozilla Firefox" class="article-image">
94
95
<h2><a href="/articles/browsers-are-doing-too-much.html" class="article-title">Browsers are doing way too much nowadays</a></h2>
96
<div class="home-article-date">2024-12-27</div>
97
<p><p>Ooh, shiny! Chrome is now forcing me to view my bookmarks in a ✨side panel✨! It's not like
98
we have windowing environments for that, right? Doesn't matter, it's modern, new so it's cool
99
and automatically better even though it sucks!
100
</p></p>
101
</article>
102
103
104
105
<article class="content-area">
106
107
<h2><a href="/articles/beginner-distros.html" class="article-title">There are no beginner GNU/Linux distributions</a></h2>
108
<div class="home-article-date">2024-12-27</div>
109
<p><p>I see this so often and it's so wrong. That if you know GNU/Linux, you must
110
switch to Arch, Gentoo, Fedora, OpenSUSE or at least Debian. That if you use
111
Mint or Ubuntu, you're not a real GNU/Linux user.
112
</p></p>
113
</article>
114
115
116
117
<article class="content-area">
118
119
<h2><a href="/articles/gnulinux-not-linux.html" class="article-title">A Reason to Call it GNU/Linux</a></h2>
120
<div class="home-article-date">2024-12-27</div>
121
<p><p>Linux isn't very Unix-like by itself. Of course, it's a Unix-like <em class="emphasis-1">kernel</em>, and it
122
does Unix-compatible file operations, process management, and system calls, but without the GNU
123
suite or some other userland, it is just a kernel which doesn't have to be used as a Unix-like
124
one.
125
</p></p>
126
</article>
127
128
129
130
<article class="content-area">
131
132
<h2><a href="/articles/linux-on-the-surface-go.html" class="article-title">GNU/Linux on the Microsoft Surface Go</a></h2>
133
<div class="home-article-date">2024-12-27</div>
134
<p><p>Interestingly, the best GNU/Linux tablet is actually made by Microsoft. The
135
Surface Go (first generation) is a tablet released in 2018. The performance is
136
nothing amazing, but unlike most tablets, you can actually make use of the
137
performance it does have; it doesn't feel slow for normal tablet tasks either.
138
Besides that, it has a 10" screen, front and back cameras, a kickstand, stylus
139
support and a detachable keyboard — but the latter two are sold separately.
140
</p></p>
141
</article>
142
143
144
145
<article class="content-area">
146
147
<h2><a href="/articles/moved-to-a-roundabout.html" class="article-title">Moved to a roundabout</a></h2>
148
<div class="home-article-date">2024-12-27</div>
149
<p><p>Welcome to my new website! I've moved from GitHub to a git software I've developed,
150
<a href="https://roundabout-host.com/roundabout/roundabout">a roundabout</a>. To go along with
151
this move, I also made a new website, which is powered by a custom static site generator
152
called <a href="https://roundabout-host.com/roundabout/ampoule">Ampoule</a>. This will be the
153
generator I will use to write the documentation for all my projects, including the
154
roundabout itself.
155
</p></p>
156
</article>
157
158
159
160
161
162
<article class="content-area">
163
164
<h2><a href="/articles/font-stacks.html" class="article-title">Proposed system font stacks</a></h2>
165
<div class="home-article-date">2024-12-27</div>
166
<p><p>I've seen <a href="https://modernfontstacks.com/">Modern Font Stacks</a>. I agree that there are many cases
167
where system fonts are fine, but the stacks there have some problems, especially with GNU/Linux
168
devices.
169
</p></p>
170
</article>
171
172
173
</main>
175
<footer>
176
<p>Page generated on Friday, 27 December 2024 at 11:17:45</p>
177
<p xmlns:cc="http://creativecommons.org/ns#" >This work is marked with <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC0 1.0 Universal</a> (🄍). No rights reserved.</p>
178
<p>Hosted at <a href="https://roundabout-host.com/roundabout">Roundabout-host</a> using the static site service, and generated with <a href="/projects/ampoule.html">Ampoule</a>.</p>
179
<a href="#">Back to top</a>
180
</footer>
181
</body>
182
</html>