Merge branch 'open-article' into dev
This commit is contained in:
commit
f9b5d55559
|
|
@ -0,0 +1,63 @@
|
|||
/* Fix the width to se in a tablet and desktop */
|
||||
.nav,
|
||||
.post__head,
|
||||
.post__copy,
|
||||
.author-info__container,
|
||||
.comments__container {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* Estilso al header */
|
||||
header {
|
||||
box-shadow: inset 0 0 0 100vh rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
header:hover {
|
||||
box-shadow: inset 0 0 0 100vh rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Estilos a la seccion de otros posts */
|
||||
.popular-posts {
|
||||
width: 100%;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.popular-cards__container {
|
||||
width: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
overflow: initial;
|
||||
scroll-snap-type: initial;
|
||||
}
|
||||
|
||||
/* Estilos para la seccion del autor */
|
||||
.author-info__title {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.author-info__description {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Seccion de comentarios */
|
||||
|
||||
.comments__form {
|
||||
max-width: 660px;
|
||||
}
|
||||
|
||||
.comment__user-image-container {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* Text area */
|
||||
.comments__textarea {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* Boton mandar comentario */
|
||||
.comments__button {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
/* 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 {
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-image: url('https://static.collectui.com/shots/4371077/target-right-customers-blog-large');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
box-shadow: inset 0 0 0 100vh rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
||||
header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
/* Sobreescribiendo estilos del componente nav */
|
||||
.nav {
|
||||
background-color: initial;
|
||||
padding-bottom: 20px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Estilos al texto del post */
|
||||
.post__head {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 30px;
|
||||
color: #FFF;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.post__title {
|
||||
margin-top: 0;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 700;
|
||||
line-height: 2.8rem;
|
||||
}
|
||||
|
||||
.post__details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post__profile {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post__img-author {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post__info {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.post__author-name a {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.post__date {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Post copy */
|
||||
|
||||
.post__body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post__copy {
|
||||
padding: 20px 0;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post__copy > p:not(p:first-child) {
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
.post__copy > p {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.6rem;
|
||||
font-weight: normal;
|
||||
letter-spacing: -0.03px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.post__copy > h3 {
|
||||
margin-top: 2.2rem;
|
||||
font-size: 2.2rem;
|
||||
line-height: 2.8rem;
|
||||
font-weight: 600;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.post__body .post__copy > h3 + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Estilos para la seccion de otros post para mostrar */
|
||||
.popular-posts {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
padding: 23px 0;
|
||||
text-align: center;
|
||||
background-color: var(--color-secundary-background);
|
||||
}
|
||||
|
||||
.popular-posts__title,
|
||||
.recent-posts__title {
|
||||
margin-bottom: 11px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
line-height: 3.6rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.popular-cards__container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 0 20px;
|
||||
padding: 15px 20px;
|
||||
overflow-x: scroll;
|
||||
margin-left:auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
|
||||
/* Estilos a la barra del scroll */
|
||||
.pupular-cards__container::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.popular-cards__container::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-secondary-purple);
|
||||
}
|
||||
|
||||
/* Estilos para la seccion del autor */
|
||||
.author-info__container {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.author-info__image {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.author__image {
|
||||
width: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.author-info__text {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.author-info__title {
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.author-info__title a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.author-info__description {
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
/* Estilos para la caja de comentarios */
|
||||
.comments {
|
||||
width: 100%;
|
||||
padding: 40px 0;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.comments__container {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comments__title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
line-height: 3.6rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.comments__box {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment__user-image-container {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.comments__form {
|
||||
width: 100%;
|
||||
max-width: 370px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.comments__textarea {
|
||||
resize: none;
|
||||
min-width: 180px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
font-size: 1.2rem;
|
||||
border: 0;
|
||||
outline-color: var(--color-secondary-purple);
|
||||
}
|
||||
|
||||
.comments__button {
|
||||
min-width: 80px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
font-size: 1.2rem;
|
||||
background-color: var(--color-secondary-purple);
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comments__button:active {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Estilos para el footer */
|
||||
.footer {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
|
||||
.footer .rights {
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
.footer .media svg path {
|
||||
fill: var(--color-background);
|
||||
}
|
||||
|
|
@ -1,41 +1,147 @@
|
|||
<?php defined('NABU') || exit() ?>
|
||||
<?php $head_title = 'Artículo' ?>
|
||||
<!-- Estilos cargados -->
|
||||
<?php $styles = array(
|
||||
'pages/article/article.css',
|
||||
'components/navbar/navbar.css',
|
||||
'components/articles/articles.css',
|
||||
'components/footer/footer.css',
|
||||
'pages/article/article.css',
|
||||
) ?>
|
||||
<!-- Estilos para el responsive design -->
|
||||
<?php $desktop_styles = array(
|
||||
array('pages/article/article-desktop.css', 'attributes' => ''),
|
||||
array('components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
|
||||
array('pages/article/article-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"'),
|
||||
) ?>
|
||||
<?php $scripts = array() ?>
|
||||
<!-- Archivos de JavaScript -->
|
||||
<?php $scripts = array(
|
||||
'home.js',
|
||||
) ?>
|
||||
<!-- HTML head -->
|
||||
<?php require_once 'views/components/head.php' ?>
|
||||
<!-- HTML body -->
|
||||
<header>
|
||||
<?php require_once 'views/components/navbar.php' ?>
|
||||
<div class="post__head">
|
||||
<h1 class="post__title">
|
||||
<?= $article['title'] ?>¿Cómo ser creativo en un ambiete de estudio cuadrado?
|
||||
</h1>
|
||||
<div class="post__details">
|
||||
<a class="post__author-link" href="<?= $author_profile ?>">
|
||||
<picture class="post__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="Foto de perfil del autor" class="post__img-author">
|
||||
</picture>
|
||||
</a>
|
||||
<div class="post__info">
|
||||
<p class="post__author-name">
|
||||
<a href="<?= $author_profile ?>">
|
||||
<?= $article['author-username'] ?>Juan Jose Ramirez Lopez
|
||||
</a>
|
||||
</p>
|
||||
<p class="post__date">
|
||||
<?= $article['date'] ?>18 de Octubre 2021
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1><?= $article['title'] ?></h1>
|
||||
<section class="post__body">
|
||||
<article class="post__copy">
|
||||
<p>
|
||||
<?= $article['content'] ?>
|
||||
A las personas que estudiamos una ingeniería, desde pequeño se nos dicen frases como "Eres bueno para los números, no para lo demás", "Desarrollaste más la parte izquierda del cerebro", "La creatividad no va con personas como tu" y cosas por el estilo. Afortunadamente a lo largo de la vida me he dado cuenta de que la creatividad está dentro de todos y aún la persona más cuadrada puede ser creativa en un punto excelso.
|
||||
</p>
|
||||
<p>
|
||||
El estudiar en un ambiente ingenieril puede reprimir nuestro sentido creativo demasiado, llegando a un punto en que pensamos que no nacimos para ser creativos, por eso hoy me permito compartir tres simples consejos que me han funcionado a lo largo de la carrera para no dejar de lado mi "Yo" artista, soñador y creativo.
|
||||
</p>
|
||||
<h3>Entender que la creatividad no está en contra del conocimiento.</h3>
|
||||
<p>
|
||||
Creatividad no es antítesis del saber, de hecho yo lo pondría como un complemento del mismo, ya que la definición de ser creativo es precisamente eso; resolver problemas de forma diferente y sobre todo crear. Sabiendo esto podemos darnos cuenta que no son bandos contrarios ni nada parecido, dentro de la ingeniería nos encontramos con problemas que normalmente los resolvemos de forma lineal, siguiendo una formula o un patrón establecido por quien nos enseña a resolverlo, pero si le damos la vuelta al problema, es decir, entender el problema por completo desde la raíz, nos podremos dar cuenta que en el problema está la solución y no solo una, sino que hay muchas formas de resolver un mismo problema, solo hay que pensar un poquito fuera de la caja.
|
||||
</p>
|
||||
<h3>Define tu "Yo" creativo.</h3>
|
||||
<p>
|
||||
Para despertar un poco más tu instinto creativo, no nos debemos quedar encerrados en hacer cosas similares siempre, a veces es bueno salir un poco de tu zona de confort y buscar algunas cosas que te puedan gustar además de tu ingeniería, bailar, pintar, escribir, crear contenido audiovisual e incluso meternos en temas de otras ingenierías.
|
||||
</p>
|
||||
<p>
|
||||
Todas esas cosas que parecen no estar relacionadas con nuestra carrera pueden estarlo más de lo que nos imaginamos, pues el pensar en cosas distintas y resolver problemas a los que nunca nos imaginamos que nos enfrentaríamos , puede ser de mucho apoyo para pensar diferente dentro de nuestra área y pensar mas allá, e incluso mezclar conceptos de distintas áreas para crear aplicaciones de interés dentro de nuestra carrea y darles ese valor agregado que todos necesitamos para destacar un poquito y alimentar nuestra marca personal.
|
||||
</p>
|
||||
<p>
|
||||
<em>
|
||||
¡Sal de tu zona de confort, no sabes con lo que te puedes encontrar!
|
||||
</em>
|
||||
</p>
|
||||
<h3>Sé autodidacta</h3>
|
||||
<p>
|
||||
Si buscamos un hobbie que nos saque de la rutina de aprender siempre lo mismo, por lo menos hay que hacerlo bien, en nuestro escritorio o en nuestro bolsillo se encuentra una puerta a todo el conocimiento humano, aprende a escribir, tomar fotografía, física, pero aprende bien, vuélvete bueno en tu hobbie y ¿por qué no? aprende más cosas acerca de tu carrera, los cursos y blogs online son de las mejores cosas en las cuales podemos invertir el tiempo navegando por internet.
|
||||
</p>
|
||||
<p>
|
||||
Sin duda lo anterior me ha funcionado durante estos cuatro años y medio a salir muchas veces de la rutina y me llevó a descubrir talentos que ni siquiera sabía que tenía. Recuerda, la creatividad la tenemos todos y podemos ser capaces de desarrollarla, solo hace falta practicar y practicar mucho, no eres "Una persona de números" eres una persona creativa, con un potencial inmenso guardado dentro de ti.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="popular-posts">
|
||||
<h2 class="popular-posts__title">También tenemos esto para ti</h2>
|
||||
<section class="popular-cards__container">
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="author-info">
|
||||
<div class="author-info__container">
|
||||
<picture class="author-info__image">
|
||||
<img class="author__image" src="https://64.media.tumblr.com/ca2bffff55fb8d4e84f5686502813d78/b16ec16ee09df3f4-65/s128x128u_c1/8773c700858f518d93429ce71b3e90349ee009c7.jpg">
|
||||
<!-- <img class="author__image" src="<?= $article['author']['image'] ?>" alt="Author profile image"> -->
|
||||
</picture>
|
||||
<div class="author-info__text">
|
||||
<h3 class="author-info__title">
|
||||
<a href="<?= $author_profile ?>">
|
||||
<?= $article['author'] ?>
|
||||
Juan Jose Ramirez Lopez
|
||||
</a>
|
||||
</h3>
|
||||
<p class="author-info__description">
|
||||
<?= $article['author-description'] ?>
|
||||
Le ordené a mi fase REM que anotase todos mis sueños en cuadernos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="comments">
|
||||
<div class="comments__container">
|
||||
<h2 class="comments__title">Deja tu opinión al autor</h2>
|
||||
<div class="comments__list">
|
||||
|
||||
</div>
|
||||
<div class="comments__box">
|
||||
<picture class="author-info__image comment__user-image-container">
|
||||
<img class="author__image comment__user-image" src="https://64.media.tumblr.com/ca2bffff55fb8d4e84f5686502813d78/b16ec16ee09df3f4-65/s128x128u_c1/8773c700858f518d93429ce71b3e90349ee009c7.jpg">
|
||||
<!-- <img class="author__image" src="<?= $article['author']['image'] ?>" alt="Author profile image"> -->
|
||||
</picture>
|
||||
<form class="comments__form">
|
||||
<textarea class="comments__textarea" placeholder="Hazle saber que estuviste aqui" maxlength="250" name="textarea"></textarea>
|
||||
<input type="submit" class="comments__button" value="Enviar">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <h2>Datos del autor</h2>
|
||||
|
||||
<div>
|
||||
<p>Autor:</p>
|
||||
<a href="<?= $author_profile ?>"><img src="<?= $article['author-avatar'] ?>" alt="Foto de perfil del autor" width="8%"></a>
|
||||
<p><a href="<?= $author_profile ?>"><?= $article['author-username'] ?></a></p>
|
||||
<p><?= $article['date'] ?></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<?= $article['content'] ?>
|
||||
</div>
|
||||
|
||||
<h2>Datos del autor</h2>
|
||||
|
||||
<div>
|
||||
<a href="<?= $author_profile ?>"><img src="<?= $article['author-avatar'] ?>" alt="Foto de perfil del autor" width="8%"></a>
|
||||
<p><a href="<?= $author_profile ?>"><?= $article['author'] ?></a></p>
|
||||
<a href="<?= $author_profile ?>">
|
||||
<img src="<?= $article['author-avatar'] ?>" alt="Foto de perfil del autor" width="8%">
|
||||
</a>
|
||||
<p>
|
||||
<a href="<?= $author_profile ?>">
|
||||
<?= $article['author'] ?>
|
||||
</a>
|
||||
</p>
|
||||
<p><?= $article['author-description'] ?></p>
|
||||
</div>
|
||||
|
||||
<h2>Otros artículos</h2>
|
||||
|
||||
<?php require_once 'views/components/articles.php' ?>
|
||||
|
||||
<h2>Comentarios</h2>
|
||||
</div> -->
|
||||
|
||||
<?php require_once 'views/components/messages.php' ?>
|
||||
<?php require_once 'views/components/footer.php' ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue