From e8079a7c827e7adf9e5e800d18787db44773ffbc Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 16 May 2024 19:39:47 +0200
Subject: [PATCH] update responsive design

---
 src/app/components/login/login.component.html |  4 +-
 src/app/components/login/login.component.scss | 69 +++++++++++++------
 2 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 74fbf3b..ceccce6 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -8,7 +8,9 @@
   >
     <div class="content">
       <p>{{ "login.login" | translate }}</p>
-      <img src="./../../../assets/img/login/blue-line.svg" alt="" />
+      <div class="line">
+        <img src="./../../../assets/img/login/blue-line.svg" alt="" />
+      </div>
       <div class="input-fields">
         <input
           type="mail"
diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss
index 56261b9..9136813 100644
--- a/src/app/components/login/login.component.scss
+++ b/src/app/components/login/login.component.scss
@@ -13,12 +13,12 @@ section {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
-  width: 422px;
+  width: 482px;
   height: fit-content;
   background: var(--white);
   box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05);
   border-radius: 30px;
-  padding: 48px 96px;
+  padding: 48px 64px;
   p {
     font-size: 61px;
     font-weight: 700;
@@ -33,7 +33,7 @@ section {
   flex-direction: column;
   align-items: center;
   position: relative;
-  width: 100%;
+  width: 90%;
   .custom-input::-webkit-contacts-auto-fill-button {
     visibility: hidden;
   }
@@ -89,31 +89,62 @@ section {
 
 /*------------- RESPONSIVE -------------*/
 
-@media screen and (max-width: 650px) {
-  .content {
-    width: 322px;
-    height: fit-content;
-    padding: 24px 48px;
-    p {
-      font-size: 47px;
-    }
-  }
-}
-
 @media (max-height: 800px) {
   .content {
     top: 40%;
   }
 }
 
+@media screen and (max-width: 650px) {
+  .content {
+    width: 352px;
+    height: fit-content;
+    padding: 24px 36px;
+    p {
+      font-size: 47px;
+    }
+    .line {
+      img {
+        width: 120px;
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 450px) {
   .content {
-    width: 252px;
-    height: fit-content;
-    padding: 12px 24px;
+    width: calc(100vw - 84px);
+    padding: 24px 36px;
     p {
       font-size: 36px;
     }
+    .line {
+      img {
+        width: 100px;
+      }
+    }
+  }
+
+  .error-msg {
+    height: 21px;
+    p {
+      font-size: 11px !important;
+    }
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .content {
+    width: calc(100vw - 60px);
+    padding: 12px 24px;
+    p {
+      font-size: 32px;
+    }
+    .line {
+      img {
+        width: 80px;
+      }
+    }
   }
 
   .input-fields {
@@ -134,10 +165,6 @@ section {
     }
   }
 
-  .input-fields {
-    width: 80%;
-  }
-
   .error-msg {
     height: 18px;
     p {