From c0d2b9eb7e2b65b582039aafdca765fe32acf81e Mon Sep 17 00:00:00 2001 From: Linnnus Date: Sat, 27 Apr 2024 21:21:51 +0200 Subject: 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") --- static/styles/join_common.css | 44 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 static/styles/join_common.css (limited to 'static/styles/join_common.css') 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; +} -- cgit v1.2.3