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

[Agregar] estilos para desktop

Browse source
This commit is contained in:
francisco-solis99 2021-10-13 20:04:15 -05:00
parent b7f763b321
commit 6508e084bc
3 changed files with 63 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,50 +1,63 @@
/* Estilos para el header */
.hero {
flex-direction: row-reverse;
text-align: initial;
justify-content: space-between;
}
.hero__img-wrapper {
flex-basis: 40%;
max-width: 400px;
margin: 0;
}
.hero__text-container {
flex-basis: 50%;
}
.hero__CTA {
margin: 0;
margin-bottom: 10px;
}
.hero__secundary-CTA {
margin-top: 0;
}
.hero__button {
margin: 0;
}
/* Estilos para la seccion de posts mas recientes */
.recent__posts {
width: 90%;
margin: 0 auto;
}
.recent-cards__container {
grid-template-columns: repeat(auto-fill,minmax(288px, 1fr));
gap: 30px 10px;
justify-content: center;
}
.CTA__button {
width: 40%;
max-width: 450px;
}
/* Estilos para la seccion de los post mas 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;
}
.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;
}
/* 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;
}
.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;
} */

3
views/pages/all-articles.php
View file

@ -1,10 +1,13 @@
<?php defined('NABU') || exit() ?>
<?php $head_title = 'Muro' ?>
<?php $styles = array(
'components/navbar/navbar.css',
'pages/all-articles/all-articles.css',
'components/articles/articles.css',
'components/footer/footer.css',
) ?>
<?php $desktop_styles = array(
array('components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('pages/all-articles/all-articles-desktop.css', 'attributes' => ''),
) ?>
<?php $scripts = array() ?>

3
views/pages/home.php
View file

@ -10,7 +10,8 @@
<!-- Estilos para el responsive design -->
<?php $desktop_styles = array(
array('components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('pages/home/home-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('pages/home/home-tablet.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
array('pages/home/home-desktop.css', 'attributes' => 'media="screen and (min-width: 1024px)"'),
) ?>
<!-- Archivos de javascript -->
<?php $scripts = array(