Working on adding profiles

This commit is contained in:
Michał Gdula 2022-09-22 12:43:22 +00:00
parent 94563eb6f4
commit 1b8e92d144
6 changed files with 297 additions and 94 deletions

View file

@ -183,7 +183,7 @@
|-------------------------------------------------------------
*/
.fullscreen-image {
width: 100vw; height: 100vh;
width: 101vw; height: 101vh;
position: fixed;
top: 50%;
@ -195,10 +195,10 @@
z-index: 999;
transition: opacity 0.5s cubic-bezier(.19, 1, .22, 1);
transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
display: none; // Hidden so to not disturb the user
opacity: 0; //
display: none; // Automatically hidden, revealed on fullscreen
opacity: 0; // expose
img {
max-width: 95%; max-height: 95%;
@ -206,7 +206,7 @@
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-050%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
border-radius: $rad;
@ -408,12 +408,78 @@
/*
|-------------------------------------------------------------
| ABOUT
| profile
|-------------------------------------------------------------
*/
.about-root {
.profile-root {
@include defaultDecoration($page-accent);
@include defaultFont();
margin: 3rem auto 1rem auto;
min-height: 7rem;
position: relative;
text-align: center;
img {
width: 9rem;
height: 9rem;
object-fit: cover;
position: absolute;
left: 6rem;
top: -3rem;
transform: translateX(-50%);
border-radius: $rad;
border: $page-accent 0.2rem solid;
background-color: $bg;
}
h2, & > p {
margin: 0 0 0.5rem 0;
padding-left: 11rem;
}
}
.profile-info {
margin-top: 0;
margin-bottom: 0.5rem;
padding-left: 11rem;
display: flex; flex-direction: column;
text-align: center;
& > * {
margin-top: 0;
margin-bottom: 0.5rem;
}
}
@media (max-width: 669px) {
.profile-root {
img {
position: absolute;
left: 50%;
top: -3rem;
transform: translateX(-50%);
}
h2 {
margin: 7rem 0 0.5rem 0;
padding: 0;
}
& > p {
padding: 0;
}
}
.profile-info {
padding: 0;
& > * {
padding: 0;
}
}
}
/*
@ -645,14 +711,4 @@
.password-reset-root {
@include defaultDecoration($red);
@include defaultFont();
}
/*
|-------------------------------------------------------------
| ERROR PAGE
|-------------------------------------------------------------
*/
.error-root {
@include defaultDecoration($page-accent);
@include defaultFont();
}