User details page

Closes #46

static/site.css

@@ -134,3 +134,87 @@ button:hover, a.button:hover {
   background-color: var(--theme-color-highlight);
 }
 
+.user-profile img.banner {
+  width: 100%;
+  height: 24em;
+  object-fit: cover;
+  /* TODO: Center this on the image focus */
+}
+
+.user-profile {
+  --avatar-size: 12em;
+}
+
+.user-profile .avatar {
+  margin-top: calc(var(--avatar-size) * -3/5);
+  margin-left: calc(var(--avatar-size) / 20);
+}
+
+.user-profile .avatar img {
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+}
+
+.user-profile header > div {
+  display: flex;
+  position: relative;
+  z-index: 1;
+  flex-wrap: wrap;
+}
+
+.user-profile header .names {
+  margin: 1em;
+}
+
+.user-profile > div {
+  margin-left: calc(var(--avatar-size) * 3/5);
+}
+
+.user-profile .profile-fields .field {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  text-align: center;
+}
+
+.user-profile .profile-fields .field .field-name { grid-column: 1; }
+.user-profile .profile-fields .field .field-value { grid-column: 2; }
+
+@media (max-width: 720px) {
+  .user-profile img.banner {
+    height: 18em;
+  }
+  .user-profile {
+    --avatar-size: 10em;
+  }
+  .user-profile .profile-fields .field {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .user-profile img.banner {
+    height: 12em;
+  }
+  .user-profile header div {
+  }
+  .user-profile header div * {
+    flex-basis: 100%;
+    text-align: center;
+  }
+  .user-profile {
+    --avatar-size: 8em;
+  }
+  .user-profile .avatar {
+    margin-left: 0px;
+  }
+  .user-profile > div {
+    margin-left: 0px;
+  }
+  .user-profile .bio {
+    text-align: center;
+  }
+  .user-profile .profile-fields .field {
+    grid-template-columns: 2fr 3fr;
+  }
+}
+