Add Nikki and a photo of both of us to About page

website/sass/about.scss

@@ -0,0 +1,9 @@
+@import "./colors.scss";
+@import "./utils.scss";
+@import "./vars.scss";
+
+.markdown-content {
+	figure + h2 {
+		margin-top: 0;
+	}
+}

website/sass/base.scss

@@ -201,6 +201,40 @@ button {
 	}
 }
 
+figure {
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+
+	img {
+		display: block;
+		width: 100%;
+		border: 4px solid $accent-color-primary;
+		border-radius: $border-radius-large;
+		box-sizing: border-box;
+	}
+
+	figcaption {
+		display: inline;
+		font-size: pixels-to-rem(13);
+		background-color: $accent-color-primary;
+		padding: 0.25em 0.5em;
+		margin-right: $border-radius-large;
+		border-bottom-left-radius: $border-radius-default;
+		border-bottom-right-radius: $border-radius-default;
+		color: $text-color-inverse;
+
+		a {
+			color: inherit;
+			text-decoration-thickness: 1px;
+			&:hover {
+				text-decoration-thickness: 3px;
+			}
+		}
+	}
+}
+
 .no-border-radius-top {
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;

website/sass/colors.scss

@@ -4,6 +4,7 @@ $bg-color-primary: #0c5035;
 // $bg-color-primary: #050505;
 // $bg-color-primary: #23363a;
 $text-color-primary: #eff7f8;
+$text-color-inverse: #141414;
 // $fg-color-primary: #577D86;
 $fg-color-primary: #607a6f;
 // $accent-color-primary: #fff157;

website/sass/vars.scss

@@ -1,2 +1,3 @@
 $border-radius-default: 5px;
+$border-radius-large: 20px;
 $mobile-width: 640px;

website/templates/about.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block head %}
+	<link rel="stylesheet" href="/about.css">
+{% endblock %}
+
+{% block content %}
+	<div class="markdown-content page">
+		{{ page.content | safe }}
+	</div>
+{% endblock content %}