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

[Agregar] estilos para la versión mobile del muro

Browse source
This commit is contained in:
Astra 2021-10-29 18:50:56 -05:00
parent c9becc9aab
commit 4e85a297db
6 changed files with 208 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/icons/glass-icon.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2093 11.637C14.2986 10.1505 14.7865 8.30754 14.5754 6.47678C14.3642 4.64602 13.4696 2.9625 12.0705 1.76301C10.6714 0.563527 8.87101 -0.063455 7.02948 0.00750229C5.18796 0.0784596 3.44113 0.842123 2.13847 2.14571C0.835816 3.4493 0.073402 5.19668 0.00376251 7.03825C-0.065877 8.87983 0.562393 10.6798 1.76288 12.078C2.96336 13.4763 4.64753 14.3697 6.47844 14.5795C8.30935 14.7894 10.152 14.3001 11.6377 13.2097H11.6365C11.6703 13.2547 11.7063 13.2975 11.7468 13.3391L16.078 17.6704C16.289 17.8815 16.5752 18.0001 16.8736 18.0002C17.172 18.0003 17.4583 17.8819 17.6694 17.6709C17.8805 17.46 17.9991 17.1738 17.9992 16.8754C17.9993 16.577 17.8809 16.2907 17.6699 16.0796L13.3387 11.7484C13.2984 11.7077 13.2552 11.67 13.2093 11.6359V11.637ZM13.4995 7.31249C13.4995 8.12504 13.3395 8.92964 13.0285 9.68034C12.7176 10.431 12.2618 11.1132 11.6873 11.6877C11.1127 12.2623 10.4306 12.718 9.6799 13.029C8.9292 13.3399 8.1246 13.5 7.31204 13.5C6.49949 13.5 5.69489 13.3399 4.94419 13.029C4.19349 12.718 3.51138 12.2623 2.93682 11.6877C2.36226 11.1132 1.90649 10.431 1.59554 9.68034C1.28459 8.92964 1.12455 8.12504 1.12455 7.31249C1.12455 5.67146 1.77644 4.09765 2.93682 2.93727C4.0972 1.77689 5.67102 1.12499 7.31204 1.12499C8.95307 1.12499 10.5269 1.77689 11.6873 2.93727C12.8476 4.09765 13.4995 5.67146 13.4995 7.31249Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

0
assets/styles/components/search/search-desktop.css Normal file
View file

33
assets/styles/components/search/search.css Normal file
View file

@ -0,0 +1,33 @@
/* .search__container {
text-align: center;
} */
.search__content {
position: relative;
width: 90%;
margin: 0 auto;
border: 2px solid var(--color-black);
border-radius: 30px;
}
.search__input {
width: 92%;
padding: 0 20px;
height: 45px;
font-size: 1.2rem;
border: 0;
background-color: transparent;
color: #000;
outline: 0 none;
}
.glass__icon {
position: absolute;
right: 8%;
top: 28%;
width: 18px;
height: 18px;
background-image: url(../../../icons/glass-icon.svg);
background-position: center;
background-repeat: no-repeat;
}

107
assets/styles/pages/all-articles/all-articles.css
View file

@ -0,0 +1,107 @@
/* Orden de los estilos
1. Posicionamineto
2. Modelo de caja
3. Tipografia
4. Visuales
5. Otros
Metodologia => BEM
*/
body {
background-color: var(--color-background);
}
/* Estilos al header */
.header {
width: 90%;
margin: 0 auto;
min-width: 310px;
background-color: var(--color-background);
}
/*Estilos para la seccion de los artículos*/
.articles__data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.articles__title {
font-size: 3.2rem;
font-weight: 500;
line-height: 4.8rem;
}
.articles__cards {
margin-bottom: 30px;
display: flex;
flex-direction: column;
gap: 30px;
}
/* Estilos para la sección del CTA */
.CTA {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-black);
}
.CTA__container {
width: 90%;
padding: 20px 0;
text-align: center;
}
.CTA__title {
margin-bottom: 20px;
font-size: 1.8rem;
font-weight: 700;
line-height: 2.7rem;
color: #fff;
}
.CTA__description {
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.8rem;
color: #fff;
}
.CTA__form {
display: flex;
flex-direction: column;
align-items: center;
}
.form__input-mail {
width: 70%;
max-width: 400px;
height: 46px;
margin-bottom: 15px;
border-radius: 30px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
text-align: center;
outline: 0 none;
border: none;
}
.form__join {
width: 45%;
max-width: 160px;
height: 37px;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.6rem;
background-color: var(--color-primary-red);
color: #fff;
border: none;
}

21
views/components/search.php
View file

@ -1,11 +1,14 @@
<?php defined('NABU') || exit() ?>
<form method="POST" action="<?= NABU_ROUTES['home'] ?>">
<input type="hidden" name="csrf" value="<?= $token ?>">
<span>
<input type="text" name="q" minlength="1" maxlength="246" required>
</span>
<span>
<input type="submit" name="search-submit" value="&#x1F50E">
</span>
</form>
<div class="search__container">
<form class="form" method="POST" action="<?= NABU_ROUTES['home'] ?>">
<input type="hidden" name="csrf" value="<?= $token ?>">
<div class="search__content">
<input class = "search__input" type="text" name="q" minlength="1" placeholder="Buscar un blogpost" maxlength="246" required>
<span class="glass__icon"></span>
</div>
<!-- <span>
<input type="submit" name="search-submit" value="&#x1F50E">
</span> -->
</form>
</div>

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

@ -1,21 +1,69 @@
<?php defined('NABU') || exit() ?>
<?php $head_title = 'Muro' ?>
<!-- Estilos cargados -->
<?php $styles = array(
'components/navbar/navbar.css',
'components/search/search.css',
'pages/all-articles/all-articles.css',
'components/articles/articles.css',
'components/footer/footer.css',
) ?>
<!-- Estilos para el responsive design -->
<?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() ?>
<!-- Archivos de javascript -->
<?php $scripts = array(
'home.js',
) ?>
<!-- Componente head -->
<?php require_once 'views/components/head.php' ?>
<?php require_once 'views/components/navbar.php' ?>
<h1>Muro</h1>
<header class="header">
<?php require_once 'views/components/navbar.php' ?>
</header>
<main>
<section class="searcher">
<div class="searcher__content">
<span class="searcher__image"></span>
<?php require_once 'views/components/search.php' ?>
</div>
</section>
<section class="articles">
<div class="articles__data">
<h1 class = "articles__title">Muro</h1>
<span class="articles__icon"></span>
</div>
<div class="articles__cards">
<?php require 'views/components/articles.php' ?>
<?php require 'views/components/articles.php' ?>
<?php require 'views/components/articles.php' ?>
<?php require 'views/components/articles.php' ?>
<?php require 'views/components/articles.php' ?>
</div>
</section>
<section class="CTA">
<div class="CTA__container">
<div class="CTA__text">
<h2 class="CTA__title">Interesante, ¿No? 🤔</h2>
<p class="CTA__description">Déjanos tu e-mail y te compartiremos los posts más recientes, además de recursos para mejorar tu escritura en medios digitales. 😉</p>
</div>
<div class="CTA__mail">
<form class="CTA__form" method="POST" action="">
<input class = "form__input-mail" type="text" minlength="1" placeholder="Tu e-mail" maxlength="246" required>
<input class = "form__join" type="submit" name="mail-submit" value="Unirme">
</form>
</div>
<span class="CTA__image"></span>
</div>
</section>
</main>
<?php require_once 'views/components/search.php' ?>
<?php require_once 'views/components/articles.php' ?>
<?php require_once 'views/components/footer.php' ?>