gpt method #2

app/pages/login/login.html

@@ -6,12 +6,12 @@
 {% block content %}
 <div id="main">
     <div class="login-container d-flex align-items-center justify-content-center">
-        <div style="padding: 10px;min-width:330px;" class="ps-md-4 pe-md-4">
+        <div class="login-panel px-4 py-4">
             <img src="/static/img/LoginLogo.png" alt="Nexium" class="login-logo" />
             <p class="login-subtitle">2016+ with freedom.</p>
             {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}
-                <div>
+                <div class="mb-2">
                 {% for category, message in messages %}
                     {% if category == 'error': %}
                     <div class="alert border p-2 text-center alert-danger border-danger">
@@ -34,7 +34,7 @@
                 <button type="submit" class="btn btn-primary mb-3" {% if not loginEnabled: %}disabled{% endif %}>Login</button>
             </form>
             <div class="text-center mt-2">
-                <p>Don't have an account? <a href="/signup">Signup</a>
+                <p>Don't have an account? <a href="/signup">Signup</a></p>
             </div>
         </div>
     </div>

app/static/css/login.css

@@ -1,6 +1,4 @@
 body {
-    background: radial-gradient(circle, var(--auth-dot) 10%, transparent 11%),radial-gradient(circle at bottom left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at bottom right, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top right, var(--auth-dot) 5%, transparent 6%);
-    background-size: 3em 3em;
     background-color: var(--auth-bg);
 }
 #main {
@@ -11,18 +9,17 @@ body {
 }
 
 .login-container {
-    min-width: 330px;
+    width: 100%;
-    display: inline-block;
+    padding: 24px 16px;
-    background-color: var(--auth-card-bg);
-    box-shadow: 0 0 15px var(--auth-card-shadow);
 }
 
-.login-container h1 {
+.login-panel {
-    text-align: center;
+    width: min(100%, 420px);
-    margin-bottom: 0;
+    background-color: var(--auth-card-bg);
-    font-size: 3.5rem;
+    box-shadow: 0 0 15px var(--auth-card-shadow);
-    font-weight: 700;
+    border-radius: 2px;
 }
+
 .login-container p {
     text-align: center;
     padding: 0;
@@ -52,10 +49,28 @@ body {
     margin-bottom: 10px;
 }
 
-.login-container img {
+.login-logo {
-    min-width: 500px;
+  display: block;
+  margin: 0 auto 8px;
+  max-width: 320px;
+  width: 100%;
+  height: auto;
+}
+
+.login-subtitle {
+  text-align: center;
+  margin-bottom: 12px;
+  color: rgba(230,238,248,0.9);
+  font-size: small;
+}
+
+.login-container button {
+    color: #fff;
+}
+
+.login-container .alert {
+    margin-bottom: 0.5rem;
 }
-    
 
 .form-text {
     /* wrap the text*/
@@ -91,7 +106,7 @@ body {
   font-size: small;
 }
 @media (max-width: 480px) {
-  .login-logo { max-width: 160px; }
+    .login-logo { max-width: 240px; }
 }
 .navbar .navbar-brand .brand-logo {
   display: block;

app/static/css/signup.css

@@ -1,6 +1,4 @@
 body {
-    background: radial-gradient(circle, var(--auth-dot) 10%, transparent 11%),radial-gradient(circle at bottom left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at bottom right, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top right, var(--auth-dot) 5%, transparent 6%);
-    background-size: 3em 3em;
     background-color: var(--auth-bg);
 }