mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-07 16:38:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Mobile view of Signup and Login

Browse source
This commit is contained in:
Ilay Eble 2025-06-09 13:04:24 +02:00 • committed by Luisa Bellitto
parent 739a0e1c54
commit 8cc62d1fdc
1 changed files with 93 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

118
code/frontend/src/Login.css
View file

@ -13,7 +13,7 @@
flex-direction: column; flex-direction: column;
height: 100vh; /* Full viewport height */ height: 100vh; /* Full viewport height */
width: 100vw; /* Full viewport width */ width: 100vw; /* Full viewport width */
position: absolute; /* Change from absolute to relative */ position: absolute;
background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat); background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -21,20 +21,6 @@
min-height: 400px; min-height: 400px;
} }
.login-login{
display: flex;
flex-direction: row;
border-radius: 4px;
background: rgba(13, 10, 56, 0.71);
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
align-items: center;
justify-content: start;
width: 50vw;
height: 60vh;
min-height: 300px;
min-width: 400px;
}
.login-text{ .login-text{
display: flex; display: flex;
padding: 8px 40px 40px 40px; padding: 8px 40px 40px 40px;
@ -53,12 +39,21 @@
line-height: 40px; /* 166.667% */ line-height: 40px; /* 166.667% */
} }
.login-icon{
height: 32px;
width: 32px;
aspect-ratio: 1/1;
align-self: center;
}
.login-button{ .login-button{
display: inline-flex; display: inline-flex;
padding: 9px 8px; padding: auto;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
width: 150px;
height: 32px;
border-radius: 10px; border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default); border: 2px solid var(--Rotkehlchen-orange-default);
@ -102,15 +97,57 @@
line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */ line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
letter-spacing: var(--Static-Body-Large-Tracking, 0.5px); letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
} }
.login-link{
color: var(--Rotkehlchen-orange-default, #E79A0E);
.login-icon{ /* Body-M */
height: 32px; font-family: Inter;
width: 32px; font-size: 16px;
aspect-ratio: 1/1; font-style: normal;
align-self: center; font-weight: 600;
line-height: 17px;
letter-spacing: 0.8px;
} }
.login-image{ .login-signup{
color: #FFF;
text-align: center;
/* Body-M */
font-family: Inter;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 17px; /* 106.25% */
letter-spacing: 0.8px;
}
.login-part{
display: flex;
padding: 8px 40px 40px 40px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 18px;
}
/* Desktop view*/
@media only screen and (min-width: 768px) {
.login-login{
display: flex;
flex-direction: row;
border-radius: 4px;
background: rgba(13, 10, 56, 0.71);
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
align-items: center;
justify-content: start;
width: 50vw;
height: 60vh;
min-height: 300px;
min-width: 400px;
}
.login-image{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -124,9 +161,9 @@
background-image: url("../public/assets/images/BirdLogin.jpg"); background-image: url("../public/assets/images/BirdLogin.jpg");
background-size: cover; background-size: cover;
background-position: 75%; background-position: 75%;
} }
.signup-image{ .signup-image{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -140,45 +177,20 @@
background-image: url("../public/assets/images/OwlSignUp.png"); background-image: url("../public/assets/images/OwlSignUp.png");
background-size: cover; background-size: cover;
background-position: 75%; background-position: 75%;
} }
.login-part{ .login-part{
width: 45%; width: 45%;
height: 90%; height: 90%;
padding:3%; padding:3%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
gap: 1%; gap: 1%;
} }
.login-signup{
color: #FFF;
text-align: center;
/* Body-M */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 17px; /* 106.25% */
letter-spacing: 0.8px;
}
.login-link{
color: var(--Rotkehlchen-orange-default, #E79A0E);
/* Body-M */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 17px;
letter-spacing: 0.8px;
}
/* Desktop view*/
@media only screen and (min-width: 768px) {
} }