mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +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

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

@ -13,7 +13,7 @@
flex-direction: column;
height: 100vh; /* Full viewport height */
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);
align-items: center;
justify-content: center;
@ -21,20 +21,6 @@
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{
display: flex;
padding: 8px 40px 40px 40px;
@ -53,12 +39,21 @@
line-height: 40px; /* 166.667% */
}
.login-icon{
height: 32px;
width: 32px;
aspect-ratio: 1/1;
align-self: center;
}
.login-button{
display: inline-flex;
padding: 9px 8px;
padding: auto;
justify-content: center;
align-items: center;
gap: 10px;
width: 150px;
height: 32px;
border-radius: 10px;
border: 2px solid var(--Rotkehlchen-orange-default);
@ -102,70 +97,6 @@
line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
}
.login-icon{
height: 32px;
width: 32px;
aspect-ratio: 1/1;
align-self: center;
}
.login-image{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default);
background-image: url("../public/assets/images/BirdLogin.jpg");
background-size: cover;
background-position: 75%;
}
.signup-image{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default);
background-image: url("../public/assets/images/OwlSignUp.png");
background-size: cover;
background-position: 75%;
}
.login-part{
width: 45%;
height: 90%;
padding:3%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
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);
@ -178,7 +109,88 @@
letter-spacing: 0.8px;
}
.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%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default);
background-image: url("../public/assets/images/BirdLogin.jpg");
background-size: cover;
background-position: 75%;
}
.signup-image{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default);
background-image: url("../public/assets/images/OwlSignUp.png");
background-size: cover;
background-position: 75%;
}
.login-part{
width: 45%;
height: 90%;
padding:3%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1%;
}
}