From 240d11504ba112d4ed374695f42a6e8831e39c5b Mon Sep 17 00:00:00 2001
From: francisco-solis99 <franciscosoliscss@gmail.com>
Date: Fri, 4 Mar 2022 11:17:41 -0600
Subject: [PATCH] -m[Arreglar] la navbar, su posicionamineto y espaciado,
 [Agregar] olas a palabras claves en el home y en e navbar

---
 .../components/navbar/navbar-desktop.css      | 19 ++++++++++++++-----
 assets/styles/pages/home/home-tablet.css      |  1 +
 assets/styles/pages/home/home.css             |  8 ++++++++
 views/components/navbar.php                   |  6 +++---
 views/pages/home.php                          |  4 ++--
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/assets/styles/components/navbar/navbar-desktop.css b/assets/styles/components/navbar/navbar-desktop.css
index bcdc23c..e690a24 100644
--- a/assets/styles/components/navbar/navbar-desktop.css
+++ b/assets/styles/components/navbar/navbar-desktop.css
@@ -23,20 +23,18 @@
 
 .nav__menu {
     position: initial;
-    /* width: auto; */
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
-    justify-items: center;
     background-color: initial;
 }
 
 .nav__logo-wrapper {
-    width: 10%;
     max-width: 110px;
     max-height: 60px;
 }
 
 .nav__item {
+    justify-content: center;
     margin: 0 10px;
     padding: 0;
 }
@@ -51,16 +49,23 @@
 }
 
 .nav__item a {
-    padding: 10px 15px;
-    border-radius: 40px;
     text-align: center;
 }
 
+.nav__item .nav__link-underline {
+    text-decoration: wavy;
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--color-secondary-purple);
+}
+
 .nav__item:nth-child(2) a {
     padding: 0;
 }
 
 .nav__item:nth-child(3) a {
+    padding: 8px;
+    border-radius: 5px;
     font-weight: bold;
     color: var(--color-secondary-purple);
     border: 2px solid var(--color-secondary-purple);
@@ -72,6 +77,10 @@
 }
 
 .nav__item:last-child a {
+    display: inline-block;
+    /* height: 100%; */
+    padding: 10px;
+    border-radius: 5px;
     background-color: var(--color-primary-red);
     color: var(--color-background);
 }
diff --git a/assets/styles/pages/home/home-tablet.css b/assets/styles/pages/home/home-tablet.css
index fd98c91..2411e24 100644
--- a/assets/styles/pages/home/home-tablet.css
+++ b/assets/styles/pages/home/home-tablet.css
@@ -18,6 +18,7 @@
 /* Estilos del header */
 
 .hero {
+    margin-top: 20px;
     flex-direction: row-reverse;
     text-align: initial;
     justify-content: space-between;
diff --git a/assets/styles/pages/home/home.css b/assets/styles/pages/home/home.css
index e4abbcf..f9cf0e2 100644
--- a/assets/styles/pages/home/home.css
+++ b/assets/styles/pages/home/home.css
@@ -183,6 +183,14 @@ body {
     line-height: 2.7rem;
 }
 
+.CTA__title .CTA__mark {
+    text-decoration: wavy;
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-secondary-purple);
+    text-decoration-thickness: 2px;
+    text-decoration-skip-ink: none;
+}
+
 .CTA__button {
     display: inline-block;
     min-width: 215px;
diff --git a/views/components/navbar.php b/views/components/navbar.php
index 4c1eb1c..fc4234c 100644
--- a/views/components/navbar.php
+++ b/views/components/navbar.php
@@ -33,7 +33,7 @@
                 </a>
             </li>
             <li class="nav__item">
-                <span>☷</span><a href="<?= NABU_ROUTES['all-articles'] ?>">Muro</a>
+                <span>☷</span><a class="nav__link-underline" href="<?= NABU_ROUTES['all-articles'] ?>">Muro</a>
             </li>
             <?php if (isset($_SESSION['user'])): ?>
                 <?php $user = $_SESSION['user'] ?>
@@ -46,10 +46,10 @@
                     <span>➣</span> <a href="<?= NABU_ROUTES['post-article'] ?>">Publicar un post</a>
                 </li>
                 <li class="nav__item">
-                    <span>✮</span> <a href="<?= NABU_ROUTES['favorites'] ?>">Favoritos</a>
+                    <span>✮</span> <a class="nav__link-underline" href="<?= NABU_ROUTES['favorites'] ?>">Favoritos</a>
                 </li>
                 <li class="nav__item">
-                    <span>☻</span> <a href="<?= NABU_ROUTES['profile'] . '&user=' . urlencode($user['username']) ?>"><?= utils::escape($user['username']) ?></a>
+                    <span>☻</span> <a class="nav__link-underline" href="<?= NABU_ROUTES['profile'] . '&user=' . urlencode($user['username']) ?>"><?= utils::escape($user['username']) ?></a>
                 </li>
                 <li class="nav__item">
                     <span class="close__icon">➲</span><a href="<?= NABU_ROUTES['logout'] ?>">Cerrar sesión</a>
diff --git a/views/pages/home.php b/views/pages/home.php
index c0b1c79..d9a838e 100644
--- a/views/pages/home.php
+++ b/views/pages/home.php
@@ -29,7 +29,7 @@
 <!-- Estilos a cargar para el responsive design -->
 <?php $desktop_styles = array(
     array('file' => 'components/footer/footer-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
-    array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
+    array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 760px)"'),
     array('file' => 'pages/home/home-tablet.css',           'attributes' => 'media="screen and (min-width: 650px)"'),
     array('file' => 'pages/home/home-desktop.css',          'attributes' => 'media="screen and (min-width: 1024px)"')
 ) ?>
@@ -77,7 +77,7 @@
     <section class = "CTA">
         <span class="CTA__plane"></span>
         <div class="CTA__container">
-            <h3 class="CTA__title">Tus palabras merecen ser leídas, escribe algo e inicia un viaje de descubrimiento</h3>
+            <h3 class="CTA__title">Tus <strong class="CTA__mark">palabras</strong> merecen ser leídas, <strong class="CTA__mark">escribe</strong> algo e inicia un viaje de <strong class="CTA__mark">descubrimiento</strong></h3>
             <a href="<?= NABU_ROUTES['signup'] ?>" class="CTA__button">Quiero compartir lo que sé</a>
         </div>
     </section>