nabu/assets/styles/pages/home/home-desktop.css

92 lines
2.2 KiB
CSS

/*
* Este archivo es parte de Nabu.
*
* Nabu es software libre: puedes redistribuirlo y/o modificarlo
* bajo los términos de la Licencia Pública General de GNU Affero publicada por
* la Free Software Foundation, ya sea la versión 3 de la Licencia, o
* (a su elección) cualquier versión posterior.
*
* Nabu se distribuye con la esperanza de que sea de utilidad,
* pero SIN NINGUNA GARANTÍA; incluso sin la garantía implícita de
* COMERCIABILIDAD o APTITUD PARA UN PROPÓSITO PARTICULAR. Consulte la
* Licencia Pública General de GNU Affero para obtener más detalles.
*
* Debería haber recibido una copia de la Licencia Pública General de GNU Affero
* junto con este programa. De lo contrario, consulte <https://www.gnu.org/licenses/>.
*/
.hero__img-wrapper {
flex-basis: 50%;
max-width: 450px;
}
/* Estilos de la sección de los post más populares */
.popular-posts {
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 60px auto;
padding: 0;
text-align: initial;
background-color: initial;
}
.popular-posts__title {
width: 30%;
margin-bottom: 0;
}
.popular-cards__container {
width: auto;
padding: 15px 0;
gap: 0;
overflow-x: hidden;
scroll-snap-type: initial;
}
.popular-cards__container > .card {
width: auto;
max-width: 280px;
}
/* Arreglar la altura de la la informacion, restarle la altura del banner */
.popular-cards__container .card .card__info {
height: calc(100% - 259px);
}
.popular-cards__container .card:not(.card:last-child) {
min-width: initial;
width: 80px;
transition: all ease-in-out 400ms;
}
.popular-cards__container .card:hover:not(.card:last-child) {
width: 280px;
}
.popular-cards__container .card:not(.card:last-child) .card__author {
opacity: 0;
transition: all ease-in 400ms;
}
.popular-cards__container .card:hover:not(.card:last-child) .card__author{
opacity: 1;
}
/*
.popular-cards__container .card:hover:not(.card:last-child) ~ .card:last-child {
right: -200px;
}
*/
/* Estilos para la seccion de articulos mas recientes */
.recent-cards__container > .card {
width: 330px;
}
/* Estilos para el CTA */
.CTA__title {
font-size: 2.4rem;
}