HTML document, Unicode text, UTF-8 text
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>web</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>web</h1>
27
<div class="topic-posts">
29
30
<article class="content-area">
31
<h2><a href="/articles/font-stacks.html" class="article-title">Proposed system font stacks</a></h2>
32
<div class="home-article-date">2024-12-27</div>
33
<p><p>I've seen <a href="https://modernfontstacks.com/">Modern Font Stacks</a>. I agree that there are many cases
34
where system fonts are fine, but the stacks there have some problems, especially with GNU/Linux
35
devices.
36
</p></p>
37
</article>
38
39
<article class="content-area">
40
<h2><a href="/articles/semantic-css.html" class="article-title">Let's write more semantic CSS</a></h2>
41
<div class="home-article-date">2024-05-18</div>
42
<p><p>You probably wrote something like this at least once in your life:
43
</p><pre data-language="html"><div class="card card--rounded card--primary">
44
<div class="card__image-container">
45
<img src="image.jpg" alt="A nice image" class="card__image">
46
<span class="card__image-caption">A nice image</span>
47
</div>
48
<div class="card__content">
49
<div class="card__header">
50
<div class="card__title">Hello, world!</div>
51
</div>
52
<p class="card__text">
53
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
54
</p>
55
</div>
56
<div class="card__footer">
57
<button class="btn btn--primary btn--raised btn--accent card__button card__button--primary">Click me!</button>
58
<button class="btn btn--secondary btn--raised btn--accent card__button card__button--secondary">Click me!</button>
59
</div>
60
</div>
61
</pre><p>Or this:
62
</p><pre data-language="html"><div class="max-w-sm rounded overflow-hidden shadow-lg">
63
<div>
64
<img class="w-full" src="image.jpg" alt="A nice image">
65
<span class="text-gray-500 text-base">A nice image</span>
66
</div>
67
<div class="px-6 py-4">
68
<div>
69
<div class="font-bold text-xl mb-2">Hello, world!</div>
70
</div>
71
<p class="text-gray-700 text-base">
72
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
73
</p>
74
</div>
75
<div class="px-6 py-4">
76
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me!</button>
77
<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>
78
</div>
79
</div>
80
</pre></p>
81
</article>
82
83
<article class="content-area">
84
<h2><a href="/articles/browsers-are-doing-too-much.html" class="article-title">Browsers are doing way too much nowadays</a></h2>
85
<div class="home-article-date">2024-05-07</div>
86
<p><p>Ooh, shiny! Chrome is now forcing me to view my bookmarks in a ✨side panel✨! It's not like
87
we have windowing environments for that, right? Doesn't matter, it's modern, new so it's cool
88
and automatically better even though it sucks!
89
</p></p>
90
</article>
91
92
<article class="content-area">
93
<h2><a href="/projects/ampoule.html" class="article-title">Ampoule</a></h2>
94
<div class="home-article-date">2025-02-02</div>
95
<p><p>Ampoule is a lightweight, simple yet flexible, static site generator written in Python.
96
It uses Jinja2 for templating. This site was generated using Ampoule.
97
</p></p>
98
</article>
99
100
<article class="content-area">
101
<h2><a href="/projects/echo.html" class="article-title">Echo</a></h2>
102
<div class="home-article-date">2024-04-29</div>
103
<p><p>Echo is a very basic status tracker for web endpoints. I don't recommend you use it. It was
104
made for a programming competition (hackathon) organised by the Automation and Computing faculty
105
of the Politehnica University of Timișoara, in 3 days, alone. I decided to publish it because
106
it might be useful for someone and doesn't hurt me to have it online, and the contest encourages
107
publishing the works.
108
</p></p>
109
</article>
110
111
<article class="content-area">
112
<h2><a href="/projects/gigadata.html" class="article-title">Gigadata</a></h2>
113
<div class="home-article-date">2024-10-15</div>
114
<p><p>Gigadata is an image dataset collection and annotation platform. It allows anyone
115
to easily contribute to the dataset by uploading images and annotating objects,
116
and to use the dataset for training machine learning models.
117
</p></p>
118
</article>
119
120
<article class="content-area">
121
<h2><a href="/projects/roundabout.html" class="article-title">The roundabout</a></h2>
122
<div class="home-article-date">2025-02-02</div>
123
<p><p>The roundabout is a <strong class="emphasis-2">git repository hosting</strong> server software. It is designed to be a complete
124
alternative to GitHub, GitLab, BitBucket, Gogs/Gitea/Forgejo, and other similar services. It
125
is still in development and not yet ready for production use. As of version 0.3.0 development
126
stage, it supports:
127
</p></p>
128
</article>
129
130
</div>
131
</main>
133
<footer>
134
<p>Page generated on Monday, 17 March 2025 at 17:06:45</p>
135
<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>
136
<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>
137
<a href="#">Back to top</a>
138
</footer>
139
</body>
140
</html>