styles fix

site/components/Signin.tsx

@@ -17,7 +17,7 @@ export default function Signin() {
       <div className="text-center mb-4">
         <Link href="/" className="mx-auto d-inline-block logo" aria-label="Tabler" />
       </div>
-      <div className="card card-md">
+      <div className="flex-column card card-md">
         <div className="card-body">
           <h2 className="h2 text-center mb-4">Login to your account</h2>
           <form>

site/components/Signup.tsx

@@ -11,7 +11,7 @@ export default function Signup() {
       <div className="text-center mb-4">
         <Link href="/" className="mx-auto d-inline-block logo" aria-label="Tabler" />
       </div>
-      <form className="card card-md">
+      <form className="flex-column card card-md">
         <div className="card-body">
           <h2 className="card-title text-center mb-4">Create new account</h2>
           <div className="mb-3">

site/styles/_card.scss

@@ -21,6 +21,10 @@ Cards
 .card-body {
   padding: $gap-4;
   flex: 1;
+
+  .card-md > & {
+    padding: 2.5rem;
+  }
 }
 
 .card-title {

site/styles/_config.scss

@@ -167,6 +167,7 @@ $grid-breakpoints: (
 $container-max-width: px2rem(1280px);
 $container-narrow-max-width: px2rem(990px);
 $container-slim-max-width: px2rem(660px);
+$container-tight-max-width: px2rem(500px);
 
 $zindex-modal: 100;
 $zindex-gototop: 90;
@@ -177,6 +178,7 @@ $grid-columns: 12;
 
 $header-height: 5rem;
 $aside-width: 20rem;
+$hr-margin-y: 2rem;
 
 $form-focus-color: $color-primary;
 $form-check-size: 1rem;

site/styles/_forms.scss

@@ -72,6 +72,11 @@ $form-range-thumb-transition:              background-color .3s ease-in-out, bor
   }
 }
 
+.form-label {
+  display: block;
+  font-weight: $font-weight-medium;
+  margin-bottom: 0.5rem
+}
 
 .form-check {
   @extend %form-common;
@@ -135,7 +140,9 @@ $form-range-thumb-transition:              background-color .3s ease-in-out, bor
   }
 }
 
-
+.form-footer {
+  margin-top: 2rem;
+}
 
 
 .form-range {

site/styles/_grid.scss

@@ -10,6 +10,10 @@
   }
 }
 
+.container-tight {
+  max-width: $container-tight-max-width;
+}
+
 .container-narrow {
   max-width: $container-narrow-max-width;
 }

site/styles/_typo.scss

@@ -8,6 +8,40 @@ hr {
   border-top: 1px solid $color-border-light;
 }
 
+.hr-text {
+  display: flex;
+  align-items: center;
+  margin: $hr-margin-y 0;
+  height: 1px;
+
+  &:after,
+  &:before {
+    flex: 1 1 auto;
+    height: 1px;
+    background-color: $color-border;
+  }
+
+  &:before {
+    content: "";
+    margin-right: .5rem;
+  }
+
+  &:after {
+    content: "";
+    margin-left: .5rem;
+  }
+
+  > *:first-child {
+    padding-right: .5rem;
+    padding-left: 0;
+    color: $color-border;
+  }
+
+  .card > & {
+    margin: 0;
+  }
+}
+
 a {
   color: $color-primary;
   text-decoration: none;