HTML document, Unicode text, UTF-8 text
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>css</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
<a href="#main" id="skip-link">Skip navigation</a>
12
<nav>
13
<ul>
14
<li><a href="/">Home</a></li>
15
<li><a href="/projects">Projects</a></li>
16
<li><a href="/index">Index</a></li>
17
<li><a href="/about">About</a></li>
18
<li><a href="https://roundabout-host.com/roundabout">Roundabout-host</a></li>
19
</ul>
20
<ul>
21
<li><a href="mailto:root@roundabout-host.com" id="mail-link">root@roundabout-host.com</a></li>
22
</ul>
23
</nav>
24
</header>
25
<main id="main">
26
27
<h1>css</h1>
28
<div class="topic-posts">
30
31
<article class="content-area">
32
<h2><a href="/articles/font-stacks.html" class="article-title">Proposed system font stacks</a></h2>
33
<div class="home-article-date">2024-12-27</div>
34
<p><p>I've seen <a href="https://modernfontstacks.com/">Modern Font Stacks</a>. I agree that there are many cases
35
where system fonts are fine, but the stacks there have some problems, especially with GNU/Linux
36
devices.
37
</p></p>
38
</article>
39
40
<article class="content-area">
41
<h2><a href="/articles/semantic-css.html" class="article-title">Let's write more semantic CSS</a></h2>
42
<div class="home-article-date">2024-05-18</div>
43
<p><p>You probably wrote something like this at least once in your life:
44
</p><pre data-language="html"><div class="card card--rounded card--primary">
45
<div class="card__image-container">
46
<img src="image.jpg" alt="A nice image" class="card__image">
47
<span class="card__image-caption">A nice image</span>
48
</div>
49
<div class="card__content">
50
<div class="card__header">
51
<div class="card__title">Hello, world!</div>
52
</div>
53
<p class="card__text">
54
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
55
</p>
56
</div>
57
<div class="card__footer">
58
<button class="btn btn--primary btn--raised btn--accent card__button card__button--primary">Click me!</button>
59
<button class="btn btn--secondary btn--raised btn--accent card__button card__button--secondary">Click me!</button>
60
</div>
61
</div>
62
</pre><p>Or this:
63
</p><pre data-language="html"><div class="max-w-sm rounded overflow-hidden shadow-lg">
64
<div>
65
<img class="w-full" src="image.jpg" alt="A nice image">
66
<span class="text-gray-500 text-base">A nice image</span>
67
</div>
68
<div class="px-6 py-4">
69
<div>
70
<div class="font-bold text-xl mb-2">Hello, world!</div>
71
</div>
72
<p class="text-gray-700 text-base">
73
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
74
</p>
75
</div>
76
<div class="px-6 py-4">
77
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me!</button>
78
<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>
79
</div>
80
</div>
81
</pre></p>
82
</article>
83
84
</div>
85
</main>
87
<footer>
88
<p>Page generated on Sunday, 4 May 2025 at 15:06:42</p>
89
<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>
90
<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>
91
<a href="#">Back to top</a>
92
</footer>
93
</body>
94
</html>