5 files changed, 101 insertions, 4 deletions
diff --git a/src/pages/fallback.jpeg b/src/pages/fallback.jpeg
new file mode 100644
index 0000000..8e0b090
--- /dev/null
+++ b/src/pages/fallback.jpeg
diff --git a/src/pages/index.html b/src/pages/index.html
index e03d20e..4009dac 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -3,6 +3,9 @@
 home
 <!--: endreplace -->
 
+<!--: replace extraHead -->
+<!--: endreplace -->
+
 <!--: replace body -->
 <main>
 	<section>
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
diff --git a/src/templates/base.html b/src/templates/base.html
index d089b5b..11f6f57 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -3,6 +3,9 @@
 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="initial-scale=1,width=device-width" />
+	<!--
+	<link rel="preload" href="/FiraCodeNerdFontMono-Regular.ttf" as="font" type="font/ttf" />
+	-->
 	<title>{{title}} - the evil transgenders club</title>
 	<style>
 		:root {
@@ -12,6 +15,7 @@
 
 		@font-face {
 			font-family: 'FiraCode Nerd Font Mono';
+			font-weight: regular;
 			src: url("/FiraCodeNerdFontMono-Regular.ttf");
 		}
 
@@ -19,6 +23,7 @@
 			background: black;
 			color: white;
 			font-family: 'FiraCode Nerd Font Mono', monospace;
+			font-size: 10pt;
 			margin-left: 15%;
 			margin-right: 15%;
 		}
@@ -60,11 +65,11 @@
 		}
 
 		#main-navigation ul li::before {
-			content: " /* ";
+			content: "/* ";
 		}
 
 		#main-navigation ul li::after {
-			content: " */ ";
+			content: " */";
 		}
 
 		footer {
@@ -93,7 +98,12 @@
 			color: #ff5555;
 			font-style: normal;
 		}
+
+		.odd {
+			background-color: #111;
+		}
 	</style>
+	{{extraHead}}
 </head>
 
 <body>
@@ -102,13 +112,14 @@
 		<nav id="main-navigation">
 			<ul>
 				<li><a href="/">home</a></li>
-				<li><a rel="external" href="https://git.eviltransgenders.club">git</a></li>
+				<li><a href="/members">members</a></li>
+				<li><a href="/services">services</a></li>
 			</ul>
 		</nav>
 	</header>
 	{{body}}
 	<footer>
-		<p>made with <em class="heart">&lt;3</em> // <a rel="external" href="https://git.eviltransgenders.club/www.eviltransgenders.club">view the source</a>.</p>
+		<p>made with <em class="heart">&hearts;</em> // <a rel="external" href="https://git.eviltransgenders.club/www.eviltransgenders.club">view the source</a>.</p>
 	</footer>
 </body>
 </html>