members page added

2 files changed, 83 insertions, 0 deletions

diff --git a/src/pages/members/index.html b/src/pages/members/index.html
new file mode 100644
index 0000000..fdf76fe
--- /dev/null
+++ b/src/pages/members/index.html
@@ -0,0 +1,83 @@
+<!--: extends base.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;
+	}
+
+	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;
+	}
+</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>
+				<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>
+			<h2>Name</h2>
+		</header>
+		<p>
+			hellooooooo
+		</p>
+	</div>
+	<div id="facts-and-links">
+		<ul>
+			<li>tz: Etc/UTC</li>
+		</ul>
+	</div>
+</section>
diff --git a/src/pages/members/rosa.jpeg b/src/pages/members/rosa.jpeg
new file mode 100644
index 0000000..f0ce13b
--- /dev/null
+++ b/src/pages/members/rosa.jpeg