[Fix] the navbar menu in desktop view
This commit is contained in:
francisco-solis99
parent
059afac639
commit
b9a6fcf447
|
|
@ -23,14 +23,15 @@
|
|||
|
||||
.nav__menu {
|
||||
position: initial;
|
||||
width: auto;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
/* width: auto; */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
|
||||
justify-items: center;
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.nav__logo-wrapper {
|
||||
width: 20%;
|
||||
width: 10%;
|
||||
max-width: 110px;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
.nav__item a {
|
||||
padding: 10px 15px;
|
||||
border-radius: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav__item:nth-child(2) a {
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ header:hover {
|
|||
/* Estilos para el navbar */
|
||||
.nav__logo-wrapper {
|
||||
width: 100px;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.nav__logo-wrapper > a {
|
||||
|
|
@ -53,9 +55,6 @@ header:hover {
|
|||
color: #FFF;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
/* Estilos de la sección de otros posts */
|
||||
=======
|
||||
/* Estilos al heart like */
|
||||
.heart {
|
||||
top: -120px;
|
||||
|
|
@ -102,7 +101,6 @@ header:hover {
|
|||
|
||||
|
||||
|
||||
>>>>>>> open-article
|
||||
|
||||
.popular-posts {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -24,3 +24,75 @@
|
|||
* 5. Otros
|
||||
* Metodología => BEM
|
||||
*/
|
||||
|
||||
/* Estilos al header */
|
||||
header {
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
position: relative;
|
||||
background-image: url("/assets/images/background.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: initial;
|
||||
padding-bottom: 50px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.nav__logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* profile image */
|
||||
|
||||
.profile-own {
|
||||
max-width: 200px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: -90px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
background-color: tomato;
|
||||
}
|
||||
|
||||
.profile-own__image-wrapper {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
min-width: 40px;
|
||||
max-width: 200px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-own__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.profile-own__description {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<!-- Estilos a cargar para el responsive design -->
|
||||
<?php $desktop_styles = array(
|
||||
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: 768px)"'),
|
||||
array('file' => 'pages/article/article-desktop.css', 'attributes' => 'media="screen and (min-width: 768px)"')
|
||||
) ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,28 +21,47 @@
|
|||
|
||||
<!-- Estilos cargados -->
|
||||
<?php $styles = array(
|
||||
'pages/profile/profile.css',
|
||||
'components/navbar/navbar.css',
|
||||
'components/articles/articles.css',
|
||||
'components/footer/footer.css',
|
||||
'pages/profile/profile.css',
|
||||
) ?>
|
||||
|
||||
<!-- Estilos para el responsive design -->
|
||||
<?php $desktop_styles = array(
|
||||
array('file' => 'pages/profile/profile-desktop.css', 'attributes' => ''),
|
||||
array('file' => 'components/navbar/navbar-desktop.css', 'attributes' => 'media="screen and (min-width: 650px)"'),
|
||||
array('file' => 'pages/profile/profile-desktop.css', 'attributes' => '')
|
||||
) ?>
|
||||
|
||||
<?php require_once 'views/components/head.php' ?>
|
||||
<?php require_once 'views/components/navbar.php' ?>
|
||||
<!-- Archivos de javascript a cargar -->
|
||||
<?php $scripts = array(
|
||||
'home.js'
|
||||
) ?>
|
||||
|
||||
<!-- HTML head -->
|
||||
<?php require_once 'views/components/head.php' ?>
|
||||
|
||||
<!-- HTML body -->
|
||||
<header>
|
||||
<!-- Nav bar -->
|
||||
<?php require_once 'views/components/navbar.php' ?>
|
||||
<!-- <div>
|
||||
<img src="<?= $profile['background'] ?>" alt="Fondo de perfil" width="20%">
|
||||
</div> -->
|
||||
<div class="profile-own">
|
||||
<picture class="profile-own__image-wrapper">
|
||||
<img src="https://scontent.fcyw4-1.fna.fbcdn.net/v/t39.30808-6/272064856_452115463212117_8803840504382002522_n.jpg?_nc_cat=106&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=kfsgbwKN7z0AX-9v5jd&_nc_ht=scontent.fcyw4-1.fna&oh=00_AT9cA6zq0C9ylsxd_flHjuy1iirmctsUfuDaV5ScX97NdA&oe=61F84F27" alt="Foto de perfil del autor" class="profile-own__image">
|
||||
</picture>
|
||||
<h2 class='profile-own__title'><?= $profile['username'] ?></h2>
|
||||
<p class='profile-own__description'><?= $profile['description'] ?></p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1>Perfil</h1>
|
||||
|
||||
<?php if ($isMyProfile): ?>
|
||||
<a href="<?= NABU_ROUTES['edit-profile'] ?>">Editar perfil</a>
|
||||
<?php endif ?>
|
||||
|
||||
<div>
|
||||
<img src="<?= $profile['background'] ?>" alt="Fondo de perfil" width="20%">
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Nombre completo: <?= $profile['name'] ?></li>
|
||||
<li>Apodo: <?= $profile['username'] ?></li>
|
||||
|
|
@ -53,7 +72,15 @@
|
|||
<img src="<?= $profile['avatar'] ?>" alt="Foto de perfil" width="8%">
|
||||
</div>
|
||||
|
||||
<h2>Artículos publicados</h2>
|
||||
|
||||
<section class="public-posts">
|
||||
<h2 class='public-posts__title'>Post publicados</h2>
|
||||
<section class="public-cards__container">
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
<?php require 'views/components/articles.php' ?>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<?php require_once 'views/components/articles.php' ?>
|
||||
<?php require_once 'views/components/pagination.php' ?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue