diff --git a/assets/styles/components/navbar/navbar-desktop.css b/assets/styles/components/navbar/navbar-desktop.css
index 645bee8..0c902ea 100644
--- a/assets/styles/components/navbar/navbar-desktop.css
+++ b/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;
}
diff --git a/assets/styles/components/navbar/navbar.css b/assets/styles/components/navbar/navbar.css
index 7a9ad6b..e2dca69 100644
--- a/assets/styles/components/navbar/navbar.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/assets/styles/pages/article/article-desktop.css b/assets/styles/pages/article/article-desktop.css
index c7134b2..d59462b 100644
--- a/assets/styles/pages/article/article-desktop.css
+++ b/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 {
diff --git a/assets/styles/pages/article/article.css b/assets/styles/pages/article/article.css
index a781f3f..7a44c9d 100644
--- a/assets/styles/pages/article/article.css
+++ b/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);
-}
\ No newline at end of file
+}
diff --git a/views/components/navbar.php b/views/components/navbar.php
index 69e0b07..12ca04b 100644
--- a/views/components/navbar.php
+++ b/views/components/navbar.php
@@ -3,14 +3,17 @@