[Arreglar] la imagen de perfi dimensiones y posicionamiento
This commit is contained in:
parent
da791f553b
commit
ae33ad1e31
6 changed files with 25 additions and 42 deletions
|
@ -29,18 +29,12 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__image-wrapper {
|
.profile-own__image-wrapper {
|
||||||
width: 50%;
|
max-width: 180px;
|
||||||
}
|
|
||||||
|
|
||||||
.profile-own__image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Estilos para los bototnes de editar fotos de perfil y fondo */
|
/* Estilos para los bototnes de editar fotos de perfil y fondo */
|
||||||
.edit__field-avatar::before {
|
.edit__field-avatar::before {
|
||||||
top: -100px;
|
top: -120px;
|
||||||
font-size: 2.8rem;
|
font-size: 2.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -66,11 +66,9 @@ header::before {
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__image-wrapper {
|
.profile-own__image-wrapper {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
width: 45%;
|
max-width: 120px;
|
||||||
min-width: 40px;
|
border-radius: 100%;
|
||||||
max-width: 200px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: var(--color-black);
|
background-color: var(--color-black);
|
||||||
}
|
}
|
||||||
|
@ -78,8 +76,9 @@ header::before {
|
||||||
.profile-own__image {
|
.profile-own__image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: cover;
|
||||||
filter: opacity(0.7);
|
filter: opacity(0.7);
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__title {
|
.profile-own__title {
|
||||||
|
@ -142,7 +141,7 @@ input[type="file"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit__field-avatar::before {
|
.edit__field-avatar::before {
|
||||||
top: -70px;
|
top: -80px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
|
|
|
@ -47,7 +47,7 @@ header {
|
||||||
} */
|
} */
|
||||||
|
|
||||||
.profile-own {
|
.profile-own {
|
||||||
bottom: -125px;
|
bottom: -135px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__title {
|
.profile-own__title {
|
||||||
|
@ -60,22 +60,16 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__image-wrapper {
|
.profile-own__image-wrapper {
|
||||||
width: 50%;
|
max-width: 150px;
|
||||||
}
|
|
||||||
|
|
||||||
.profile-own__image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile__link-edit {
|
.profile__link-edit {
|
||||||
right: 35px;
|
right: 15px;
|
||||||
font-size: 2.8rem;
|
font-size: 2.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-posts {
|
.public-posts {
|
||||||
margin-top: 140px;
|
margin-top: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-posts__title {
|
.public-posts__title {
|
||||||
|
|
|
@ -81,26 +81,25 @@ header::before {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -105px;
|
bottom: -120px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
/* background-color: tomato; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__image-wrapper {
|
.profile-own__image-wrapper {
|
||||||
display: flex;
|
display: inline-flex;
|
||||||
width: 45%;
|
max-width: 120px;
|
||||||
min-width: 40px;
|
border-radius: 100%;
|
||||||
max-width: 200px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background-color: var(--color-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__image {
|
.profile-own__image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: cover;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-own__title {
|
.profile-own__title {
|
||||||
|
@ -121,7 +120,7 @@ header::before {
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-posts {
|
.public-posts {
|
||||||
margin-top: 110px;
|
margin-top: 150px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
padding: 23px 0;
|
padding: 23px 0;
|
||||||
|
|
|
@ -25,13 +25,12 @@
|
||||||
* Metodología => BEM
|
* Metodología => BEM
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html {
|
/* html {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
} */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin-bottom: 90px;
|
|
||||||
background-color: rgba(0, 183, 255, 0.4);
|
background-color: rgba(0, 183, 255, 0.4);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -188,10 +187,8 @@ body {
|
||||||
/* Cambia los estilos del footer */
|
/* Cambia los estilos del footer */
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: var(--color-black);
|
background-color: var(--color-black);
|
||||||
|
bottom: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .rights {
|
.footer .rights {
|
||||||
|
|
|
@ -55,11 +55,11 @@
|
||||||
<input type="hidden" name="csrf" value="<?= $token ?>">
|
<input type="hidden" name="csrf" value="<?= $token ?>">
|
||||||
|
|
||||||
<label for="avatar" class="edit__field-out edit__field-avatar">
|
<label for="avatar" class="edit__field-out edit__field-avatar">
|
||||||
<input type="file" id="avatar" name="avatar" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo btn-photo'>
|
<input type="file" id="avatar" name="avatar" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo'>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label for="background" class="edit__field-out edit__field-background">
|
<label for="background" class="edit__field-out edit__field-background">
|
||||||
<input type="file" id="background" name="background" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo btn-backPhoto'>
|
<input type="file" id="background" name="background" accept="<?= NABU_DEFAULT['image-formats'] ?>" class='edit__btn-photo'>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue