Tweak login form styling

undercover/static/styles.css

@@ -57,64 +57,6 @@ input, textarea {
     font-family: sans-serif;
 }
 
-/* Small screens */
-@media only screen and (max-width: 1080px) {
-  body {
-    width: 85vw;
-  }
-  h1 {
-    font-size: 300%;
-  }
-  h2 {
-    line-height: 100%;
-  }
-  input {
-    font-size: 200%;
-    width: 100%;
-  }
-  .letter-form {
-    width: 100%;
-  }
-  dd {
-    margin-bottom: 2em;
-    margin-left: 0;
-  }
-  textarea {
-    width: 80vw;
-    font-size: 120%;
-  }
-  .bigtext {
-    min-height: 40vh;
-  }
-}
-
-/* Big screens */
-@media only screen and (min-width: 1081px) {
-  body {
-    min-height: 98%;
-    width: 40vw;
-  }
-  h1 {
-    font-size: 300%;
-  }
-  input, textarea {
-    margin-bottom: 0.5em;
-    font-size: 105%;
-  }
-  dd {
-    margin-left: 0.5em;
-  }
-  dt {
-    margin-top: 0.5em;
-  }
-  dl {
-    margin-top: 0;
-  }
-  #closingText {
-    width: 50%;
-  }
-}
-
 .letter-form {
   display: flex;
   flex-grow: 1;
@@ -123,23 +65,46 @@ input, textarea {
 
 div.user {
   line-height: 125%;
+  margin-bottom: 2em;
 }
 
 div.user form {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   font-size: 70%;
 }
 
+div.user form div {
+  display: flex;
+  flex-direction: row;
+}
+
 div.user form input, label {
   border-radius: 0;
 }
 
 div.user form input {
-  font-size: 100%;
+  font-size: 120%;
   border-style: solid;
   border-width: 1px;
   border-color: #ddd;
+  padding: 0.3em;
+}
+
+.white-black-button {
+  font-weight: bold;
+  border-radius: 0;
+  border-style: none;
+  color: black;
+  background-color: white;
+  transition-property: color, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in;
+}
+
+.white-black-button:hover {
+  color: white;
+  background-color: black;
 }
 
 .black-white-button {
@@ -161,6 +126,8 @@ div.user form input {
 .logged-in {
   display: flex;
   flex-direction: row;
+  justify-content: end;
+  align-items: center;
 }
 
 dl {
@@ -237,3 +204,75 @@ textarea {
   bottom: 0;
   height: 100%;
 }
+
+/* Small screens */
+@media only screen and (max-width: 1080px) {
+  body {
+    width: 85vw;
+  }
+  h1 {
+    font-size: 300%;
+  }
+  h2 {
+    line-height: 100%;
+  }
+  input {
+    font-size: 200%;
+    width: 100%;
+  }
+  .letter-form {
+    width: 100%;
+  }
+  dd {
+    margin-bottom: 2em;
+    margin-left: 0;
+  }
+  textarea {
+    width: 80vw;
+    font-size: 120%;
+  }
+  .bigtext {
+    min-height: 40vh;
+  }
+  .login-button {
+    padding: 0.75em;
+  }
+}
+
+/* Big screens */
+@media only screen and (min-width: 1081px) {
+  body {
+    min-height: 98%;
+    width: 40vw;
+  }
+  h1 {
+    font-size: 300%;
+  }
+  input, textarea {
+    margin-bottom: 0.5em;
+    font-size: 105%;
+  }
+  dd {
+    margin-left: 0.5em;
+  }
+  dt {
+    margin-top: 0.5em;
+  }
+  dl {
+    margin-top: 0;
+  }
+  #closingText {
+    width: 50%;
+  }
+  div.user form {
+    flex-direction: row;
+  }
+  div.user form input {
+    font-size: 110%;
+    padding: 0.5em;
+    height: min-content;
+  }
+  .login-button {
+    padding: 0;
+  }
+}

undercover/templates/writing.jinja2

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