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")

4 files changed, 88 insertions, 54 deletions

diff --git a/static/styles/base.css b/static/styles/base.css
index f9b1ae6..2ae562e 100644
--- a/static/styles/base.css
+++ b/static/styles/base.css
@@ -60,3 +60,14 @@ footer {
 	font-size: small;
 	margin: 1rem;
 }
+
+/* Chill link styling */
+a {
+	/* dark and twisted color, lighter for contrast */
+	color: #a27d7d;
+	text-decoration: underline;
+}
+
+a:visited {
+	color: inherit;
+}
diff --git a/static/styles/join.css b/static/styles/join.css
deleted file mode 100644
index f958aad..0000000
--- a/static/styles/join.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * This file contains styles specific to the "join" view. The corresponding
- * HTML/template file is `views/join.html`.
- */
-
-main {
-	width: 100%;
-	max-width: 500px;
-	margin: 2rem auto;
-}
-
-.signup {
-
-}
-
-.signup__box {
-	margin-bottom: 1reM;
-}
-
-.signup__label {
-	font-weight: bold;
-}
-
-.signup__input {
-	width: 100%;
-	padding: .5rem;
-	border-radius: 5px;
-}
-
-textarea.signup__input {
-	/* Remove UA's default monospace font */
-	font-family: inherit;
-
-	/* Horizontal resizing totally breaks our layout :( */
-	resize: vertical;
-}
-
-.signup__submit {
-	/* 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 */
-.signup__submit:hover { filter: brightness(90%); }
-.signup__submit:active { filter: brightness(60%); }
\ No newline at end of file
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;
+}
diff --git a/static/styles/join_form.css b/static/styles/join_form.css
new file mode 100644
index 0000000..f4ba0f1
--- /dev/null
+++ b/static/styles/join_form.css
@@ -0,0 +1,33 @@
+/*
+ * This file contains styles specific to the "join_form" view. The corresponding
+ * HTML/template file is `views/join_form.html`.
+ *
+ * See also the file `static/styles/join_common.css` which contains some styles
+ * which are reused among the "join_" group of views.
+ */
+
+.signup {
+
+}
+
+.signup__box {
+	margin-bottom: 1reM;
+}
+
+.signup__label {
+	font-weight: bold;
+}
+
+.signup__input {
+	width: 100%;
+	padding: .5rem;
+	border-radius: 5px;
+}
+
+textarea.signup__input {
+	/* Remove UA's default monospace font */
+	font-family: inherit;
+
+	/* Horizontal resizing totally breaks our layout :( */
+	resize: vertical;
+}