Several style improvements.

Fix create_account() bug.
Lighter placeholder text.
Fancy black-white-button.
Username -> Email on login/create account forms.

undercover/routes.py

@@ -96,7 +96,7 @@ def index_get():
 
 
 @writing_blueprint.route('/create_account', methods=['GET'])
-def index_get():
+def create_account():
     return render_template('create_account.jinja2')
 
 

undercover/static/styles.css

@@ -2,6 +2,10 @@ html {
   height: 100%;
 }
 
+::placeholder {
+  color: #999;
+}
+
 span.logo {
   margin: 0;
   padding: 0.2em;
@@ -117,12 +121,43 @@ input, textarea {
   flex-direction: column;
 }
 
+div.user {
+  line-height: 125%;
+}
+
 div.user form {
   display: flex;
   flex-direction: row;
   font-size: 70%;
 }
 
+div.user form input, label {
+  border-radius: 0;
+}
+
+div.user form input {
+  font-size: 100%;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #ddd;
+}
+
+.black-white-button {
+  font-weight: bold;
+  border-radius: 0;
+  border-style: none;
+  color: white;
+  background-color: black;
+  transition-property: color, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in;
+}
+
+.black-white-button:hover {
+  color: black;
+  background-color: white;
+}
+
 .logged-in {
   display: flex;
   flex-direction: row;

undercover/templates/create_account.jinja2

@@ -2,13 +2,34 @@
 
 {% block title %}UnderCover - Create Account{% endblock title %}
 
+{% block head %}
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+  form div {
+    margin-top: 2em;
+  }
+  form a.wipe {
+    margin-left: inherit;
+    margin-top: 4em;
+    text-align: center;
+  }
+</style>
+{% endblock head %}
+
 {% block content %}
   <form action="/login" method="post">
-    <label for="login">Username: </label>
+    <div>
-    <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sagev9000">
+      <label for="login">Email: </label>
+      <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sage@sagev.space">
+    </div>
 
-    <label for="password">Password: </label>
+    <div>
-    <input id="password" maxlength="32" minlength="4" name="password" type="password">
+      <label for="password">Password: </label>
+      <input id="password" maxlength="32" minlength="4" name="password" type="password">
+    </div>
 
     <a href="javascript:void(0)"
       class="wipe up-wipe"

undercover/templates/writing.jinja2

@@ -35,22 +35,22 @@
 {% block content %}
   {% if username %}
     <div class="user logged-in">
-      <p>You are logged in as {{ username }}</p>
+      <p style="margin: 0 1em 0 0;">You are logged in as {{ username }}</p>
       <form action="/logout">
-        <input type="submit" value="Logout">
+        <input class="black-white-button" type="submit" value="Logout">
       </form>
     </div>
   {% else %}
       <div class="user logged-out">
         <p>You are here as a guest.</p>
         <form action="/login" method="post">
-          <label for="login">Username: </label>
+          <label for="login">Email: </label>
-          <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sagev9000">
+          <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sage@sagev.space">
 
           <label for="password">Password: </label>
           <input id="password" maxlength="32" minlength="4" name="password" type="password">
 
-          <input type="submit" value="Login">
+          <input class="black-white-button" type="submit" value="Login">
         </form>
       </div>
   {% endif %}