[Agregar] el liston detras del logo y el hipervinculo al componente del navbar en el logo

assets/styles/components/navbar/navbar-desktop.css

@@ -8,13 +8,13 @@
     position: initial;
     width: auto;
     flex-direction: row;
-    justify-content: center;   
+    justify-content: center;
     background-color: initial;
 }
 
 .nav__logo-wrapper {
     width: 20%;
-    max-width: 136px;
+    max-width: 110px;
     max-height: 60px;
 }
 

assets/styles/components/navbar/navbar.css

@@ -18,6 +18,15 @@
     width: 100%;
 }
 
+.nav__logo-wrapper > a {
+    display: block;
+    width: 100%;
+}
+
+.nav__polygon {
+    display: none;
+}
+
 .nav__burger-icon {
     background-image: url("../../../icons/burger-icon.svg");
     width: 14px;
@@ -56,6 +65,10 @@
     display: block;
 }
 
+.nav__logo-menu{
+    width: 100%;
+}
+
 .nav__item {
     /* background-color: hsla(237, 58%, 69%, 0.4); */
     display: flex;
@@ -139,4 +152,4 @@
 .stop-scrolling {
     height: 100vh;
     overflow: hidden;
-}
+}

assets/styles/pages/article/article-desktop.css

@@ -1,6 +1,6 @@
 /* Fix the width to se in a tablet and desktop */
-.nav, 
-.post__head, 
+.nav,
+.post__head,
 .post__copy,
 .author-info__container,
 .comments__container {
@@ -16,10 +16,29 @@ header:hover {
     box-shadow: inset 0 0 0 100vh rgba(0,0,0,0.2);
 }
 
+/* Estilos al nav bar */
+.nav__logo-wrapper{
+    width: 100px;
+}
+
+.nav__logo-wrapper > a {
+    width: 85%;
+}
+
+.nav__polygon {
+    width: 100px;
+    height: 95px;
+}
+
+.nav__item > a {
+    color: #FFF;
+}
+
+
 /* Estilos a la seccion de otros posts */
 .popular-posts {
     width: 100%;
-    background-color: initial;   
+    background-color: initial;
 }
 
 .popular-cards__container {

assets/styles/pages/article/article.css

@@ -27,9 +27,9 @@ header::before {
   content: "";
   position: absolute;
   z-index: 1;
-  left: 0; 
+  left: 0;
   right: 0;
-  top: 0; 
+  top: 0;
   bottom: 0;
   background: rgba(0, 0, 0, .5);
 }
@@ -37,7 +37,7 @@ header::before {
 /* Sobreescribiendo estilos del componente nav */
 .nav {
     background-color: initial;
-    padding-bottom: 20px;
+    padding-bottom: 50px;
     width: 90%;
     margin: 0 auto;
     position: relative;
@@ -48,6 +48,32 @@ header::before {
     z-index: 2;
 }
 
+/* Liston del navbar */
+.nav__polygon {
+    display: initial;
+    width: 80px;
+    height: 85px;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+    clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%, 50% 75%);
+    background: rgba(255,255,255,0.8);
+}
+
+.nav__logo-wrapper{
+    width: 80px;
+}
+
+.nav__logo-wrapper > a {
+    display: block;
+    width: 80%;
+    margin: 0 auto;
+}
+
+.nav__logo {
+    width: 100%;
+}
+
 /* Estilos al texto del post */
 .post__head {
     width: 90%;
@@ -110,7 +136,7 @@ header::before {
     width: 90%;
     margin: 0 auto;
 }
-
+/* Estilos generales de las etiquetas */
 .post__copy > p:not(p:first-child) {
     margin-top: 2.8rem;
 }
@@ -168,7 +194,7 @@ header::before {
   width: 2px;
   height: 2px;
 }
- 
+
 .popular-cards__container::-webkit-scrollbar-thumb {
   background-color: var(--color-secondary-purple);
 }
@@ -293,4 +319,4 @@ header::before {
 
 .footer .media svg path {
     fill: var(--color-background);
-}
+}

views/components/navbar.php

@@ -3,14 +3,17 @@
 
 <div class="overlay"></div>
 <nav class="nav">
+    <div class='nav__polygon'></div>
     <figure class="nav__logo-wrapper">
-        <img class="nav__logo" src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu">
+            <a href="<?= NABU_ROUTES['home'] ?>">
+                <img class="nav__logo" src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu">
+            </a>
     </figure>
     <span class="nav__burger-icon" id="control-menu"></span>
         <ul class="nav__menu" id="menu">
             <li class="nav__item-logo">
                 <a href="<?= NABU_ROUTES['home'] ?>">
-                    <img class="nav__logo" src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu">
+                    <img class="nav__logo-menu" src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu">
                 </a>
             </li>
             <li class="nav__item">

views/pages/article.php

@@ -20,6 +20,7 @@
 <?php require_once 'views/components/head.php' ?>
 <!-- HTML body -->
 <header>
+    <!-- Nav bar -->
     <?php require_once 'views/components/navbar.php' ?>
     <div class="post__head">
         <h1 class="post__title">
@@ -49,7 +50,7 @@
     <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. 
+        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.
@@ -63,7 +64,7 @@
         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. 
+        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>
@@ -114,7 +115,7 @@
     <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">