chore: styling

src/pages/login.astro

@@ -7,15 +7,16 @@ import PageLayout from '../layouts/PageLayout.astro'
 
     <!-- form with username and password, and a button for oauth login -->
     <form action="/login" method="post">
-        <h3>Accedi con Poisson</h3>
+        <h3 class="center">Accedi con Poisson</h3>
         <input type="text" id="username" placeholder="Username" name="username" required />
         <input type="password" id="password" placeholder="Password" name="password" required />
 
-        <button class="primary" type="submit">Login</button>
+        <button class="primary center" type="submit">Login</button>
 
         <hr />
-        <h3>Accedi con Ateneo</h3>
+
-        <a href="/auth/ateneo" class="primary" role="button">Login</a>
+        <h3 class="center">Accedi con Ateneo</h3>
+        <a href="/auth/ateneo" class="primary center" role="button">Login</a>
     </form>
     <!-- <span class="material-symbols-outlined">person</span> -->
 </PageLayout>

src/styles/controls.scss

@@ -15,6 +15,9 @@ button,
 
     transition: all 64ms linear;
 
+    display: grid;
+    place-content: center;
+
     &:hover {
         transform: translate(-1px, -1px);
         box-shadow: 5px 5px 0 0 #222;
@@ -67,16 +70,21 @@ input[type='password'] {
 
 form {
     display: grid;
-    gap: 0.5rem;
+    gap: 1rem;
-    padding: 1rem;
+    padding: 2rem;
 
     background: #38adc1;
 
+    min-width: 40ch;
+
     @include neo-brutalist-card($size: 3px, $offset: 9px);
 
     button,
     .button,
     [role='button'] {
+        padding-left: 3rem;
+        padding-right: 3rem;
+
         &.primary {
             background: #1c7f90;
             color: #f4fef7;
@@ -86,4 +94,23 @@ form {
             }
         }
     }
+
+    hr {
+        border: none;
+        width: 100%;
+        height: 2px;
+        background: #0003;
+
+        margin-top: 1rem;
+    }
+
+    .right {
+        justify-self: end;
+    }
+    .left {
+        justify-self: start;
+    }
+    .center {
+        justify-self: center;
+    }
 }

src/styles/main.scss

@@ -378,7 +378,10 @@ body {
 }
 
 .login {
+    background: #ddfaff;
+
     main {
+
         justify-self: center;
 
         display: flex;
@@ -386,9 +389,14 @@ body {
         align-items: center;
 
         max-width: 80ch;
-        padding: 5rem 0;
+        padding: 3rem 0;
 
-        gap: 5rem;
+        gap: 3rem;
+
+        h3 {
+            font-size: 28px;
+            font-weight: 600;
+        }
     }
 }