kazhnuz.space/kspace-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: rework header

Browse source 
Fixes #26
This commit is contained in:
Kazhnuz 2022-12-08 13:46:17 +01:00
parent 0562f3f63e
commit 48bae3a81b
5 changed files with 145 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/header-content.php
View file

@ -1,6 +1,4 @@
<header id="page-header"> <header id="page-header">
<div class="header-collumns">
<?php include(TEMPLATEPATH . '/components/logo.php'); ?>
<?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?> <?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?>
</div> <?php include(TEMPLATEPATH . '/components/logo.php'); ?>
</header> </header>

44
components/navbar-pages.php
View file

@ -1,10 +1,46 @@
<div class="navbar-area"> <nav class="toolbar flex-that">
<ul>
<li>
<a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar">
<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span>
</a>
</li>
<li>
<span class="btn btn-navbar">
Catégories <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul class="card-menu">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
}?>
</ul>
</span>
</li>
<?php <?php
$listmenu = get_nav_menu_locations(); $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar']); $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
foreach ($menu as $menuElement) { foreach ($menu as $menuElement) {
echo '<a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a>'; echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
} }
?> ?>
<a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a> </ul>
</div>
<ul>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
}
?>
<li><a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
</ul>
</nav>

7
functions.php
View file

@ -312,9 +312,10 @@ register_taxonomy('roman', 'post',
function wpb_custom_new_menu() { function wpb_custom_new_menu() {
register_nav_menus( register_nav_menus(
array( array(
'top-navbar' => __( 'Top Navbar' ), 'top-navbar' => __( 'Navbar (gauche)' ),
'link-menu' => __( 'Links Menu' ), 'top-navbar-2' => __( 'Navbar (droite)' ),
'footer-pages' => __( 'Footer pages' ), 'link-menu' => __( 'Liste des liens' ),
'footer-pages' => __( 'Pages dans le footer' ),
'social' => __( 'Reseaux sociaux' ) 'social' => __( 'Reseaux sociaux' )
) )
); );

91
scss/_global.scss
View file

@ -33,44 +33,8 @@
#page-header { #page-header {
background: $color-skyblue url('img/background.png') center bottom repeat-x; background: $color-skyblue url('img/background.png') center bottom repeat-x;
border-top: 6px solid $color-dark2; border-top: 6px solid $color-dark2;
padding-bottom:3rem; padding-top: .75rem;
padding-bottom:1.5rem;
.header-collumns {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"logo";
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
.navbar-area {
grid-area: nav;
text-align: center;
}
.logo-area {
grid-area: logo;
}
@include lg() {
grid-template-columns: 1fr 1fr;
grid-template-areas: "logo nav";
height:11*$lineheight;
padding-bottom:0;
.navbar-area {
text-align: right;
}
}
@include xxl() {
height:13*$lineheight;
}
}
} }
header h1 { header h1 {
@ -81,11 +45,13 @@ header h1 {
font-style:oblique; font-style:oblique;
padding-bottom:0px; padding-bottom:0px;
line-height: 1.5em; line-height: 1.5em;
max-width: 1600px;
margin: auto;
img { img {
width: 100%; width: 600px;
height: auto; height: auto;
margin-top:0.75rem; margin-top:0rem;
} }
a, a:visited, a:hover { a, a:visited, a:hover {
@ -93,6 +59,51 @@ header h1 {
} }
} }
.toolbar {
display:flex;
justify-content: space-between;
margin:auto;
padding:0;
max-width: 1600px;
z-index:2;
ul {
display:flex;
margin: 0;
padding: 0;
li {
list-style: none;
margin:0;
position:relative;
z-index: 2;
ul {
display:none;
position:absolute;
left:-0.75rem;
background-color:$color-light2;
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
z-index: 2;
}
&:hover {
ul {
display:flex;
flex-direction:column;
}
}
}
}
.btn-navbar {
margin:0rem;
margin-left:0.75rem;
margin-right: 0.75rem;
}
}
.navbar { .navbar {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;

71
style.css
View file

@ -606,34 +606,9 @@ th {
#page-header { #page-header {
background: #2aa198 url("img/background.png") center bottom repeat-x; background: #2aa198 url("img/background.png") center bottom repeat-x;
border-top: 6px solid #073642; border-top: 6px solid #073642;
padding-bottom: 3rem; } padding-top: .75rem;
#page-header .header-collumns {
padding-left: 1.5rem;
padding-right: 1.5rem;
max-width: 1600px;
margin: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "nav" "logo";
grid-template-rows: auto;
grid-gap: 1.5rem;
padding-bottom: 1.5rem; } padding-bottom: 1.5rem; }
#page-header .header-collumns .navbar-area {
grid-area: nav;
text-align: center; }
#page-header .header-collumns .logo-area {
grid-area: logo; }
@media (min-width: 992px) {
#page-header .header-collumns {
grid-template-columns: 1fr 1fr;
grid-template-areas: "logo nav";
height: 16.5rem;
padding-bottom: 0; }
#page-header .header-collumns .navbar-area {
text-align: right; } }
@media (min-width: 1600px) {
#page-header .header-collumns {
height: 19.5rem; } }
header h1 { header h1 {
border-style: none !important; border-style: none !important;
color: #fdf6e3; color: #fdf6e3;
@ -641,14 +616,50 @@ header h1 {
font-size: 5.4em; font-size: 5.4em;
font-style: oblique; font-style: oblique;
padding-bottom: 0px; padding-bottom: 0px;
line-height: 1.5em; } line-height: 1.5em;
max-width: 1600px;
margin: auto; }
header h1 img { header h1 img {
width: 100%; width: 600px;
height: auto; height: auto;
margin-top: 0.75rem; } margin-top: 0rem; }
header h1 a, header h1 a:visited, header h1 a:hover { header h1 a, header h1 a:visited, header h1 a:hover {
background-color: transparent; } background-color: transparent; }
.toolbar {
display: flex;
justify-content: space-between;
margin: auto;
padding: 0;
max-width: 1600px;
z-index: 2; }
.toolbar ul {
display: flex;
margin: 0;
padding: 0; }
.toolbar ul li {
list-style: none;
margin: 0;
position: relative;
z-index: 2; }
.toolbar ul li ul {
display: none;
position: absolute;
left: -0.75rem;
background-color: #eee8d5;
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
z-index: 2; }
.toolbar ul li:hover ul {
display: flex;
flex-direction: column; }
.toolbar .btn-navbar {
margin: 0rem;
margin-left: 0.75rem;
margin-right: 0.75rem; }
.navbar { .navbar {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;