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="https://roundabout-host.com/roundabout">Roundabout-host</a></li>
17
</ul>
18
<ul>
19
<li><a href="mailto:root@roundabout-host.com" id="mail-link">root@roundabout-host.com</a></li>
20
</ul>
21
</nav>
22
</header>
23
<main>
24
25
<h1>All articles</h1>
26
28
<article class="content-area">
29
30
<h2><a href="/articles/semantic-css.html" class="article-title">Let's write more semantic CSS</a></h2>
31
<div class="home-article-date">2024-05-07</div>
32
<p><p>You probably wrote something like this at least once in your life:
33
</p><pre data-language="html"><div class="card card--rounded card--primary">
34
<div class="card__image-container">
35
<img src="image.jpg" alt="A nice image" class="card__image">
36
<span class="card__image-caption">A nice image</span>
37
</div>
38
<div class="card__content">
39
<div class="card__header">
40
<div class="card__title">Hello, world!</div>
41
</div>
42
<p class="card__text">
43
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
44
</p>
45
</div>
46
<div class="card__footer">
47
<button class="btn btn--primary btn--raised btn--accent card__button card__button--primary">Click me!</button>
48
<button class="btn btn--secondary btn--raised btn--accent card__button card__button--secondary">Click me!</button>
49
</div>
50
</div>
51
</pre><p>Or this:
52
</p><pre data-language="html"><div class="max-w-sm rounded overflow-hidden shadow-lg">
53
<div>
54
<img class="w-full" src="image.jpg" alt="A nice image">
55
<span class="text-gray-500 text-base">A nice image</span>
56
</div>
57
<div class="px-6 py-4">
58
<div>
59
<div class="font-bold text-xl mb-2">Hello, world!</div>
60
</div>
61
<p class="text-gray-700 text-base">
62
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
63
</p>
64
</div>
65
<div class="px-6 py-4">
66
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me!</button>
67
<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>
68
</div>
69
</div>
70
</pre></p>
71
</article>
72
73
<article class="content-area">
74
75
<img src="/static/photos/browsers-bad.png" alt="The Pocket integration in Mozilla Firefox" class="article-image">
76
77
<h2><a href="/articles/browsers-are-doing-too-much.html" class="article-title">Browsers are doing way too much nowadays</a></h2>
78
<div class="home-article-date">2024-05-07</div>
79
<p><p>Ooh, shiny! Chrome is now forcing me to view my bookmarks in a ✨side panel✨! It's not like
80
we have windowing environments for that, right? Doesn't matter, it's modern, new so it's cool
81
and automatically better even though it sucks!
82
</p></p>
83
</article>
84
85
<article class="content-area">
86
87
<h2><a href="/articles/moved-to-a-roundabout.html" class="article-title">Moved to a roundabout</a></h2>
88
<div class="home-article-date">2024-05-07</div>
89
<p><p>Welcome to my new website! I've moved from GitHub to a git software I've developed,
90
<a href="https://roundabout-host.com/roundabout/roundabout">a roundabout</a>. To go along with
91
this move, I also made a new website, which is powered by a custom static site generator
92
called <a href="https://roundabout-host.com/roundabout/ampoule">Ampoule</a>. This will be the
93
generator I will use to write the documentation for all my projects, including the
94
roundabout itself.
95
</p></p>
96
</article>
97
98
</main>
100
<footer>
101
<p>Page generated on Tuesday, 7 May 2024 at 13:50:41</p>
102
<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>
103
<a href="#">Back to top</a>
104
</footer>
105
</body>
106
</html>