ricardogj08/nabu
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

[Arreglar] detalles de dimension de la card y agregando anclas

Browse source
This commit is contained in:
francisco-solis99 2021-10-15 18:53:08 -05:00
parent 0dc019160f
commit 07507d6fba
3 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/styles/components/articles/articles.css
View file

@ -11,9 +11,10 @@ Metodologia => BEM
margin: 0 auto;
display: flex;
flex-direction: column;
width: 90%;
max-width: 360px;
width: auto;
max-width: 340px;
min-width: 288px;
max-height: 406px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
@ -46,11 +47,16 @@ Metodologia => BEM
min-width: 241px;
}
.card__title-link {
text-decoration: none;
color: var(--color-secondary-purple);
}
.card__title {
margin-bottom: 8px;
font-size: 1.6rem;
font-weight: 600;
color: var(--color-secondary-purple);
}
.card__copy {
@ -67,7 +73,8 @@ Metodologia => BEM
/*Imagen de perfil*/
.profile {
display: block;
width: 28px;
min-width: 25px;
width: 25px;
border-radius: 50%;
}
@ -77,8 +84,15 @@ Metodologia => BEM
}
.card__author {
text-decoration: none;
font-size: 1rem;
font-weight: 500;
color: #9D9D9D;
}
.card__author:hover {
text-decoration: underline;
color: var(--color-secondary-purple);
}
.card__stats {

5
assets/styles/pages/home/home-desktop.css
View file

@ -44,11 +44,6 @@
width: 280px;
}
/* Esta regla se pondra en los estilos de la card del componenete */
.popular-cards__container .card:not(.card:last-child) .profile {
min-width: 27px;
}
.popular-cards__container .card:not(.card:last-child) .card__author {
opacity: 0;
transition: all ease-in 400ms;

8
views/components/articles.php
View file

@ -6,14 +6,18 @@
</picture>
<div class="card__info">
<div class="card__text">
<h3 class="card__title">Lugares donde la inspiracion y las ideas pueden llegar</h3>
<h3 class="card__title">
<a href="#" class="card__title-link">
Lugares donde la inspiracion y las ideas pueden llegar
</a>
</h3>
<p class="card__copy">La creatividad a veces no llega en el momento deseado, pero puede alcanzarnos en el momento menos esperado...</p>
</div>
<div class="card__details">
<picture class="profile">
<img src="https://scontent-lax3-1.xx.fbcdn.net/v/t1.6435-9/103564332_100818335008500_4987535241959814468_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=174925&_nc_eui2=AeFLfQ6m44wh0nGXbCIoQp9rQi_G7p1L5IpCL8bunUvkipd7MyfqDBh6lvl5slEJxg2JfKqtfoJLLSFgbZBhQ1tV&_nc_ohc=2Ht3awmMIc0AX975ljD&_nc_ht=scontent-lax3-1.xx&oh=aa5254a401801cdf23a8e02ae0239237&oe=616EB288" alt="" class="profile__image">
</picture>
<span class = "card__author">by Ricardo Adrian Gomez</span>
<a class="card__author" href="#">by Ricardo Adrian Gomez</a>
<div class="card__stats">
<span class = "card__stats-hearth"></span>
<span class = "card__stats-numlike">12</span>