blob: f2e06242a2c3c4b0334312c4f122323f926f75e5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!--: extends page.html -->
<!--: replace title -->
members
<!--: endreplace -->
<!--: replace extraHead -->
<style>
section.member-info {
border-radius: 10px;
display: grid;
grid-template-columns: 1fr 6fr 3fr;
margin-bottom: 0.5rem;
}
section.member-info header h2, section.member-info p {
margin: 0.5rem 5px;
text-align: left;
}
section.member-info div#image-container {
margin: 0.5rem 0 0.5rem 0.5rem;
}
section.member-info div#image-container img {
width: 100px;
}
section.member-info div#links nav ul {
float: right;
margin-right: 0.5rem;
}
@media screen and (max-width: 720px) {
section.member-info {
grid-template-columns: initial;
grid-template-rows: 1fr 1fr;
}
section.member-info div#image-container, section.member-info header h2 {
text-align: center;
}
}
</style>
<!--: endreplace -->
<!--: replace body -->
<main>
<section class="member-info odd">
<div id="image-container">
<img src="rosa.jpeg" alt="Rosa's profile picture" />
</div>
<div id="name-and-intro">
<header id="rosa">
<h2>Rosa</h2>
</header>
<p>
Hi! I'm Rosa. I'm a Canadian trans woman who likes messing around with
computers. I make Minecraft mods and am currently learning the
<a href="https://ziglang.org" rel="external">Zig</a> programming language.
</p>
</div>
<div id="facts-and-links">
<ul>
<li>age: 20</li>
<li>tz: America/Toronto</li>
<li>email: <a href="mailto:rosaontheweb@proton.me">rosaontheweb@proton.me</a></li>
<li>matrix: <a href="https://matrix.to/#/@rosa:girlonthe.net">@rosa:girlonthe.net</a></li>
</ul>
</div>
</section>
</main>
<!--: endreplace -->
<!--
if you want to add a section, copy this template. add the "odd" class when
your entry is odd-numbered
-->
<section class="member-info">
<div id="image-container">
<img src="your-image.jpeg" onerror="this.src = '/fallback.jpeg';" alt="{name}'s profile picture" />
</div>
<div id="name-and-intro">
<header id="your-name">
<h2>Name</h2>
</header>
<p>
hellooooooo
</p>
</div>
<div id="facts-and-links">
<ul>
<li>tz: Etc/UTC</li>
</ul>
</div>
</section>
|
