[feature] Redesigned login page (#76)

Reworked the login page

- Simplified some of the HTML and CSS
- Removed some `aria-label`s
- Added alt text for the logo
- Added a label for the input field
- Added subtle borders to otherwise flat elements

![redesigned login page with the mentioned changes](/attachments/53dc5c16-deac-4a68-912e-8a4486a93b53)

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/76
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>

app/javascript/flavours/glitch/styles/login.scss

@@ -5,88 +5,76 @@
 @import 'basics';
 
 body {
-    height: 100vh;
-
-    a {
-        color: #89caff;
-    }
+    font-family: ui-rounded, 'mastodon-font-sans-serif', sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
 }
 
 .login-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    max-width: 30rem;
+    --login-row-gap: 10px;
+
+    display: grid;
+    row-gap: var(--login-row-gap);
+    margin: 50px auto;
     padding: 1rem;
-    margin: auto;
+    max-width: 30rem;
     box-sizing: border-box;
 }
 
 header {
     display: flex;
     justify-content: center;
-    margin-bottom: 1rem;
-}
 
-.mascot {
-    height: 10rem;
+    img {
+        height: 150px;
+    }
 }
 
 main {
     display: flex;
-    position: relative;
     flex-direction: column;
-    row-gap: 10px;
+    row-gap: var(--login-row-gap);
 }
 
-.login {
-    display: flex;
-    position: relative;
-    column-gap: 10px;
+h1 {
+    font-size: 28px;
+    line-height: 33px;
+    font-weight: 700;
+    margin-bottom: 15px;
 }
 
-.instance {
-    background: #282c37;
-    border: 0;
-    border-radius: 4px;
-    box-shadow: none;
-    box-sizing: border-box;
-    color: #9baec8;
-    display: block;
+label {
     font-family: inherit;
-    font-size: 16px;
-    line-height: 18px;
-    margin: 0;
-    outline: 0;
-    padding: 15px;
-    padding-inline-end: 30px;
-    width: 100%;
+    color: $primary-text-color;
+    display: block;
+    word-wrap: break-word;
+    font-weight: 500;
+    grid-column: 1 / -1;
 }
 
-.button {
-    display: flex;
-    column-gap: .5rem;
-    align-items: center;
-    justify-content: center;
-    background-color: #66befe;
-    border: 0 none;
+form {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 1fr min-content;
+}
+
+:focus-visible,
+button:focus-visible {
+    outline: 2px solid #66befe;
+    outline-offset: 3px;
+}
+
+button {
+    padding: 7px 10px;
+    border: 1px solid lighten(#66befe, 7%);
     border-radius: 4px;
     box-sizing: border-box;
     color: #2a2b2f;
-    cursor: pointer;
-    font-size: 16px;
-    letter-spacing: 0;
-    line-height: 22px;
-    font-family: inherit;
+    font-size: inherit;
     font-weight: 500;
-    padding: 7px 10px;
-    position: relative;
     text-align: center;
-    text-decoration: none;
     white-space: nowrap;
-    flex-basis: auto;
+    background-color: #66befe;
 
     &:hover {
         background-color: #89caff;
@@ -98,21 +86,35 @@ main {
     }
 }
 
-.content {
-    background-color: #444b5d;
+input[type='text'] {
+    display: block;
+    marhing: 0;
     padding: 15px;
-    font-size: 1rem;
-    line-height: 1.5rem;
+    border: 1px solid lighten(#282c37, 7%);
     border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    row-gap: .75rem;
+    box-sizing: border-box;
+    box-shadow: none;
+    color: #9baec8;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 18px;
+    background: #282c37;
+}
+
+.content {
+    padding: 20px 15px 20px;
+    border-radius: 4px;
+    border: 1px solid lighten(#39404f, 7%);
+    color: #fff;
+    background-color: #39404f;
 }
 
 .link-footer {
-    padding: 10px;
+    padding-inline: 10px;
+    color: #97a8b4;
+    font-size: 0.875rem;
 
-    p, a {
-        color: #97A8B4;
+    a {
+        color: inherit;
     }
-}
+}