Flesh out 'join' user flow

This commit splits the user flow when sending in an application to join
the guild into three staged:

1. Intro text
2. HTML form
3. Form submission feedback (aka. "yay it went through")

1 files changed, 44 insertions, 0 deletions

diff --git a/static/styles/join_common.css b/static/styles/join_common.css
new file mode 100644
index 0000000..93bdb1d
--- /dev/null
+++ b/static/styles/join_common.css
@@ -0,0 +1,44 @@
+/*
+ * This file contains styles specific to the "join" views. There are a couple
+ * of views which are all part of the same user flow and reuse some styles. The
+ * corresponding HTML/template files are `views/join_*.html`.
+ */
+
+main {
+	/* Center align and keep width readable. */
+	width: 100%;
+	max-width: 500px;
+	margin: 2rem auto;
+
+}
+
+/* Some pages are text heavy. Keep a nice line distance. */
+p { line-height: 1.5; }
+
+.button {
+	/* Horizontally center the element */
+	display: block;
+	margin-inline: auto;
+
+	/* Make it look dark and twisted */
+	background-color: #6e1818;
+	color: white;
+	border: none;
+	border-radius: 500px;
+	padding: 1rem;
+	font-size: large;
+}
+
+/* The usual dimming effect makes interaction feel more tactile */
+.button:hover { filter: brightness(90%); }
+.button:active { filter: brightness(60%); }
+
+/* We use button-styles anchor-tags to preserve HTML semantics. */
+a.button {
+	/* Remove link styling */
+	color: inherit;
+	text-decoration: none;
+
+	/* Inline elements expand by default. */
+	width: fit-content;
+}