Added some modifications to the login page for mobile devices and the authlinks component.

Author: Programming-Sai

src/app/login/login.module.css

@@ -1,67 +1,74 @@
-.container{
-    position: relative;
-    z-index: 1;
-    margin-block: 5%;
+.container {
+  position: relative;
+  z-index: 1;
+  margin-block: 5%;
 }
 
-.back{
-    margin-block: 7.5%;
+.back {
+  margin-block: 7.5%;
 }
 
-
-.overlay, .loginContainer, .links{
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.overlay,
+.loginContainer,
+.links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-
 .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: var(--bg);
-    width: 100vw;
-    height: 100vh;
-    backdrop-filter: blur(10px);
-    z-index: 100 !important;
-    pointer-events: auto; 
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: var(--bg);
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(10px);
+  z-index: 100 !important;
+  pointer-events: auto;
 }
 
-.loginContainer{
-    background-color: var(--soft-bg);
-    border: 5px solid var(--border-color);
-    width: 50%;
-    height: 70%;
-    border-radius: 20px;
-    padding: 1rem;
-    flex-direction: column;
+.loginContainer {
+  background-color: var(--soft-bg);
+  border: 5px solid var(--border-color);
+  width: 50%;
+  height: 70%;
+  border-radius: 20px;
+  padding: 1rem;
+  flex-direction: column;
 }
 
-.links{
-    flex-wrap: wrap;
-    width: 100%;
-    gap: 5%;
-    margin-block: 10%;
+.links {
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 5%;
+  margin-block: 10%;
 }
 
-.img{
-    object-fit: contain;
-    width: 100%;
-    background-color: var(--soft-bg);
-    border-radius: 100px;
-    padding: 10px;
-    margin-block: 5%;
+.img {
+  object-fit: contain;
+  width: 100%;
+  background-color: var(--soft-bg);
+  border-radius: 100px;
+  padding: 10px;
+  margin-block: 5%;
 }
 
-.links, .img{
-    transition: 0.5s ease;
+.links,
+.img {
+  transition: 0.5s ease;
 }
 
-.links:hover .img:not(:hover){
-    filter: grayscale(1);
+.links:hover .img:not(:hover) {
+  filter: grayscale(1);
 }
 
-.img:hover{
-    transform: scale(1.2);
-}
+.img:hover {
+  transform: scale(1.2);
+}
+
+@media screen and (max-width: 580px) {
+  .loginContainer {
+    width: 80%;
+  }
+}

src/components/authlinks/authlinks.module.css

@@ -43,6 +43,8 @@
   .icon {
     display: inline;
     margin-left: -10px;
+    margin-right: 6px;
+    font-size: 1.4rem;
   }
   .authlink:hover {
     --color: transparent;
@@ -53,4 +55,7 @@
     align-items: center;
     width: 100%;
   }
+  .authlink .anchor span {
+    font-size: 1.1rem !important;
+  }
 }