mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-05-28 06:13:12 +00:00
Working on adding profiles
This commit is contained in:
parent
94563eb6f4
commit
1b8e92d144
6 changed files with 297 additions and 94 deletions
|
@ -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();
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue