Refactor some styling.

Trying to move away from so many element-specific classes.

app/static/styles.css

@@ -136,40 +136,38 @@ div.user form input {
   padding: 0.3em;
 }
 
-.white-black-button {
+.btn {
   font-weight: bold;
   border-radius: 0;
   border-style: none;
-  color: black;
-  background-color: white;
+}
+
+.color-fade {
   transition-property: color, background-color;
   transition-duration: 135ms;
   transition-timing-function: ease-out;
 }
 
-.white-black-button:hover {
+.primary {
   color: white;
   background-color: black;
 }
 
-.black-white-button {
-  font-weight: bold;
-  border-radius: 0;
-  border-style: none;
-  color: white;
-  background-color: black;
-  transition-property: color, background-color;
-  transition-duration: 135ms;
-  transition-timing-function: ease-out;
-  width: min-content;
-  white-space: nowrap;
-}
-
-.black-white-button:hover {
+.primary:hover {
   color: black;
   background-color: white;
 }
 
+.secondary {
+  color: black;
+  background-color: white;
+}
+
+.secondary:hover {
+  color: white;
+  background-color: black;
+}
+
 .logged-in {
   display: flex;
   flex-direction: row;
@@ -288,8 +286,13 @@ textarea {
   margin-bottom: 2em;
 }
 
-.modal-close-button {
-  position: absolute;
+.top-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.text-button {
   background: none;
   border: none;
   font-size: 3rem;
@@ -297,11 +300,9 @@ textarea {
   color: #444;
   margin: 0.25em;
   line-height: 100%;
-  top: 0;
-  right: 0;
 }
 
-.modal-close-button:hover {
+.text-button:hover {
   color: #000;
 }
 
@@ -341,9 +342,6 @@ textarea {
   .bigtext {
     min-height: 40vh;
   }
-  .login-button {
-    padding: 0.75em;
-  }
 }
 
 /* Big screens */
@@ -376,9 +374,6 @@ textarea {
     padding: 0.5em;
     height: min-content;
   }
-  .login-button {
-    padding: 0;
-  }
   .user {
     position: absolute;
     top: 0.5em;
@@ -415,4 +410,4 @@ textarea {
 
 .scroll-lock {
   overflow: hidden;
-}
+}

app/templates/_formhelpers.jinja2

@@ -38,7 +38,7 @@
 {% macro modal() %}
   <div id='modal' class='modal modal-background transparent' onclick="event.target.id === 'modal' && closeModal()">
     <div class='modal modal-content'>
-      <button class='modal-close-button' onclick="closeModal()">×</button>
+      <button class='top-right text-button' onclick="closeModal()">×</button>
       <h2 id='modal-title'>Login Now</h2>
       <form action="/login" method="post" id="create-account-form">
         <div>

app/templates/base.jinja2

@@ -17,6 +17,7 @@
         document.getElementById('modal').classList.remove('transparent')
         document.getElementById('modal-title').innerText = text
         document.body.classList.add('scroll-lock')
+
         const createAccountElements = [
           'confirm-password',
           'confirm-password-label',
@@ -25,25 +26,26 @@
         const loginElements = [
           'log-in-form-button'
         ]
-        const visibleElements = login ? loginElements : createAccountElements
-        visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
+        const [visibleElements, hiddenElements] = login
+            ? [loginElements, createAccountElements]
+            : [createAccountElements, loginElements]
 
-        const hiddenElements = login ? createAccountElements : loginElements
+        visibleElements.forEach(element => document.getElementById(element).classList.remove('hidden'))
         hiddenElements.forEach(element => document.getElementById(element).classList.add('hidden'))
       }
     </script>
-<style>
-    @font-face {
-        font-family: 'Barlow';
-        font-display: swap;
-        src: url('/static/fonts/Barlow-Regular.ttf');
-    }
-    @font-face {
-        font-family: 'BarlowMedium';
-        font-display: swap;
-        src: url('/static/fonts/Barlow-Medium.ttf');
-    }
-</style>
+    <style>
+        @font-face {
+            font-family: 'Barlow';
+            font-display: swap;
+            src: url('/static/fonts/Barlow-Regular.ttf');
+        }
+        @font-face {
+            font-family: 'BarlowMedium';
+            font-display: swap;
+            src: url('/static/fonts/Barlow-Medium.ttf');
+        }
+    </style>
     {% block head %}{{ head }}{% endblock head %}
 </head>
 
@@ -53,16 +55,16 @@
   <div class="user logged-in">
       <p style="margin: 0 1em 0 0;">{{ username }}</p>
       <form action="/logout">
-          <input class="black-white-button" style="margin: 0; padding: 0.4em;" type="submit" value="Logout">
+          <input class="btn primary color-fade" style="margin: 0; padding: 0.4em;" type="submit" value="Logout">
       </form>
   </div>
 {% else %}
   <div class="user logged-out">
     <form action="/create_account">
-      <div class="black-white-button" style="font-family: 'BarlowMedium'; margin-right: 1em; padding: 0.4em 1em;" onclick="showModal(false, 'Create your account')">
+      <div class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em; padding: 0.4em 1em;" onclick="showModal(false, 'Create your account')">
           Create account
       </div>
-      <div class="white-black-button" style="margin: 0; padding: 0.4em 1em;" onclick="showModal(true, 'Login now')">Log in</div>
+      <div class="btn secondary color-fade" style="margin: 0; padding: 0.4em 1em;" onclick="showModal(true, 'Login now')">Log in</div>
     </form>
   </div>
 {% endif %}

app/templates/writing.jinja2

@@ -51,7 +51,7 @@
             }}
             <a
                 href="/add_letter"
-                class="white-black-button"
+                class="btn secondary color-fade"
                 style="padding-left: 0.75em; padding-right: 0.75em; text-decoration: none; margin-left: 0.5em; text-align: center;"
             > + </a>
           </div>