[ref] Revois le bandeau et le menu de l'en-tête
- intègre le nouveau bandeau et logo de la ville ; - adapte le menu principal en en-tête et commence à le simplifier ; - désactive les composants et fonctions désormais inutiles.master
Parent
e86f75f5c5
révision
7c6f4027c0
|
@ -56,8 +56,8 @@ if ( ! function_exists( 'bm_setup' ) ) :
|
|||
* Add support for core custom logo.
|
||||
*/
|
||||
add_theme_support( 'custom-logo', array(
|
||||
'height' => 70,
|
||||
'width' => 70,
|
||||
'height' => 340,
|
||||
'width' => 120,
|
||||
'flex-width' => true,
|
||||
'flex-height' => true,
|
||||
) );
|
||||
|
|
49
header.php
49
header.php
|
@ -26,15 +26,6 @@
|
|||
|
||||
<header id="masthead" class="site-header" role="banner">
|
||||
|
||||
<div class="site-banner show-for-medium">
|
||||
<div class="site-branding">
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" title="Aller à l'accueil">
|
||||
<?php bm_the_custom_logo(); ?>
|
||||
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-bar" data-responsive-toggle="site-navigation" data-hide-for="medium">
|
||||
<button class="menu-icon" type="button" data-toggle></button>
|
||||
<a class="title-bar-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" title="Aller à l'accueil">
|
||||
|
@ -42,24 +33,30 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<nav id="site-navigation" class="main-navigation top-bar fast" role="navigation" data-animate="slide-in-down slide-out-up">
|
||||
<?php
|
||||
if ( has_nav_menu( 'primary' ) ) :
|
||||
$menu_data = 'data-responsive-menu="drilldown medium-dropdown" ' .
|
||||
'data-back-button="<li class=\'js-drilldown-back\'><a tabindex=\'0\'>' .
|
||||
'Retour</a></li>" data-auto-height="true"';
|
||||
<div class="site-banner">
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" title="Aller à l'accueil" class="site-banner-logo show-for-medium">
|
||||
<?php bm_the_custom_logo(); ?>
|
||||
</a>
|
||||
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_id' => 'primary-menu',
|
||||
'container_class' => 'top-bar-left',
|
||||
'menu_class' => 'vertical medium-horizontal menu',
|
||||
'items_wrap' => '<ul id="%1$s" class="%2$s" ' . $menu_data . '>%3$s</ul>',
|
||||
)
|
||||
);
|
||||
endif; ?>
|
||||
</nav>
|
||||
<nav id="site-navigation" class="main-navigation fast" role="navigation" data-animate="slide-in-down slide-out-up">
|
||||
<?php
|
||||
if ( has_nav_menu( 'primary' ) ) :
|
||||
$menu_data = 'data-responsive-menu="drilldown medium-dropdown" ' .
|
||||
'data-back-button="<li class=\'js-drilldown-back\'><a tabindex=\'0\'>' .
|
||||
'Retour</a></li>" data-auto-height="true"';
|
||||
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'container' => false,
|
||||
'theme_location' => 'primary',
|
||||
'menu_id' => 'primary-menu',
|
||||
'menu_class' => 'vertical medium-horizontal menu',
|
||||
'items_wrap' => '<ul id="%1$s" class="%2$s" ' . $menu_data . '>%3$s</ul>',
|
||||
)
|
||||
);
|
||||
endif; ?>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
|
|
@ -13,11 +13,12 @@ if ( ! function_exists( 'bm_the_custom_logo' ) ) :
|
|||
*/
|
||||
function bm_the_custom_logo() {
|
||||
$custom_logo_id = get_theme_mod( 'custom_logo' );
|
||||
|
||||
echo wp_get_attachment_image( $custom_logo_id, 'full', false, array(
|
||||
'class' => 'custom-logo',
|
||||
'itemprop' => 'logo',
|
||||
) );
|
||||
$logo = wp_get_attachment_image_src( $custom_logo_id , 'medium' );
|
||||
if ( has_custom_logo() ) {
|
||||
echo '<img src="'. esc_url( $logo[0] ) .'" alt="'. get_bloginfo( 'name' ) . '">';
|
||||
} else {
|
||||
echo '<h1>'. get_bloginfo( 'name' ) .'</h1>';
|
||||
}
|
||||
}
|
||||
endif;
|
||||
|
||||
|
|
Fichier binaire non affiché.
Avant Largeur: | Hauteur: | Taille: 87 KiB Après Largeur: | Hauteur: | Taille: 166 KiB |
|
@ -29,3 +29,31 @@
|
|||
@mixin z-depth-2($color: $black) {
|
||||
box-shadow: z-depth-2($color);
|
||||
}
|
||||
|
||||
////
|
||||
/// Wordpress
|
||||
////
|
||||
|
||||
@mixin active-menu-items(
|
||||
$color: $menu-item-color-active,
|
||||
$background: $menu-item-background-active,
|
||||
$submenu-background: null
|
||||
) {
|
||||
.current-menu-item,
|
||||
.current-menu-parent,
|
||||
.current-menu-ancestor {
|
||||
> a {
|
||||
color: $color;
|
||||
background: $background;
|
||||
}
|
||||
}
|
||||
|
||||
@if $submenu-background {
|
||||
.submenu > .current-menu-item,
|
||||
.submenu > .current-menu-parent {
|
||||
> a {
|
||||
background: $submenu-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -45,24 +45,18 @@ $card-shadow: z-depth-1();
|
|||
|
||||
$drilldown-arrow-color: rgba($black, 0.5);
|
||||
$drilldown-background: $white;
|
||||
$dropdownmenu-min-width: 220px;
|
||||
|
||||
// 18. Dropdown Menu
|
||||
// -----------------
|
||||
|
||||
$dropdownmenu-arrow-color: rgba($black, 0.5);
|
||||
$dropdownmenu-arrow-color: rgba($black, 0.8);
|
||||
$dropdownmenu-arrow-padding: 1.7rem;
|
||||
$dropdownmenu-background: $white;
|
||||
$dropdownmenu-border: 1px solid $primary-color;
|
||||
$dropdownmenu-background: transparent;
|
||||
$dropdownmenu-border: 0;
|
||||
$dropdownmenu-submenu-background: $white;
|
||||
|
||||
// 22. Menu
|
||||
// --------
|
||||
|
||||
$menu-simple-margin: 1rem;
|
||||
|
||||
// 37. Top Bar
|
||||
// -----------
|
||||
|
||||
$topbar-padding: 0 1rem;
|
||||
$topbar-background: $white;
|
||||
$topbar-submenu-background: $light-gray;
|
||||
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
|
||||
|
|
|
@ -19,9 +19,12 @@ $hentry-title-border-color: lighten($brand-color-light-gray, 2%);
|
|||
|
||||
/// Éléments du site
|
||||
|
||||
$header-banner-background: #92c0d4;
|
||||
$header-banner-height: rem-calc(220);
|
||||
$header-branding-max-width: rem-calc(980);
|
||||
$header-banner-height: (
|
||||
medium: 220px,
|
||||
xlarge: 300px,
|
||||
);
|
||||
$header-logo-left: 12%;
|
||||
$header-logo-max-height: 40%;
|
||||
$sidebar-background: $hentry-title-background;
|
||||
|
||||
/// Chemins
|
||||
|
|
|
@ -1,54 +0,0 @@
|
|||
// Menu principal de navigation
|
||||
// ----------------------------
|
||||
|
||||
// conteneur du menu principal
|
||||
.main-navigation {
|
||||
@include z-depth-1();
|
||||
border-top: 1px solid $primary-color;
|
||||
border-bottom: 1px solid $primary-color;
|
||||
|
||||
@include breakpoint(small only) {
|
||||
padding: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#primary-menu {
|
||||
> li > a {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// élément actif
|
||||
.current-menu-item,
|
||||
.current-menu-parent,
|
||||
.current-menu-ancestor {
|
||||
> a {
|
||||
background: $menu-item-background-active;
|
||||
color: $menu-item-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
// sous-élément actif
|
||||
.submenu > .current-menu-item,
|
||||
.submenu > .current-menu-parent {
|
||||
> a {
|
||||
background: lighten($menu-item-background-active, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
@include flex-align(center);
|
||||
}
|
||||
}
|
||||
|
||||
// bouton « Retour » du drilldown
|
||||
.js-drilldown-back > a {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
// réinitialise la position fixée par .is-dropdown-submenu-parent
|
||||
.drilldown .is-drilldown-submenu-parent.is-dropdown-submenu-parent {
|
||||
position: unset;
|
||||
}
|
|
@ -1,6 +1,43 @@
|
|||
// En-têtes des pages
|
||||
// ------------------
|
||||
|
||||
//// Bannière du site ----------------------------------------------------------
|
||||
/// Définis l'apparence de la bannière en en-tête du site, contenant le logo et
|
||||
/// une image d'arrière-plan, masqués sur mobile.
|
||||
|
||||
.site-banner {
|
||||
position: relative;
|
||||
background-image: none;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
background-image: url('#{$img-path}/header-banner.jpg');
|
||||
@include z-depth-1();
|
||||
}
|
||||
|
||||
@each $bp, $height in $header-banner-height {
|
||||
@include breakpoint($bp) {
|
||||
height: $height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-banner-logo {
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
left: $header-logo-left;
|
||||
|
||||
img {
|
||||
max-height: $header-logo-max-height;
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
/// Barre de titre et de navigation
|
||||
////
|
||||
|
||||
// fixe l'en-tête sur mobile
|
||||
@include breakpoint(small only) {
|
||||
.site-header {
|
||||
|
@ -14,51 +51,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
////
|
||||
/// Bannière
|
||||
////
|
||||
|
||||
.site-banner {
|
||||
height: $header-banner-height;
|
||||
background-color: $header-banner-background;
|
||||
background-image: url('#{$img-path}/header-banner.jpg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
.site-branding {
|
||||
max-width: $header-branding-max-width;
|
||||
margin: 0 auto;
|
||||
padding-top: $global-padding;
|
||||
|
||||
> a {
|
||||
color: $black;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $anchor-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-logo {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
font-size: rem-calc(32);
|
||||
font-weight: $global-weight-bold;
|
||||
}
|
||||
|
||||
////
|
||||
/// Barre de titre et de navigation
|
||||
////
|
||||
|
||||
@import '../components/main-navigation';
|
||||
|
||||
.title-bar {
|
||||
// place la barre de titre au dessus
|
||||
position: relative;
|
||||
|
@ -75,12 +67,6 @@
|
|||
}
|
||||
|
||||
.no-js {
|
||||
@include breakpoint(small only) {
|
||||
.top-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
.title-bar {
|
||||
display: none;
|
||||
|
|
|
@ -1,7 +1,86 @@
|
|||
// Navigations dans le site
|
||||
// ------------------------
|
||||
|
||||
/// Navigation entre les articles
|
||||
//// Barre de navigation principale --------------------------------------------
|
||||
/// Définis l'apparence de la barre de navigation et de son menu, qui devient
|
||||
/// un menu vertical sur mobile.
|
||||
|
||||
.main-navigation {
|
||||
border-bottom: 1px solid $primary-color;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#primary-menu {
|
||||
a {
|
||||
color: $dark-gray;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
/// affichage sur mobile : drilldown
|
||||
&.drilldown {
|
||||
@include active-menu-items(
|
||||
$submenu-background: lighten($menu-item-background-active, 5%)
|
||||
);
|
||||
}
|
||||
|
||||
/// affichage plus grand : dropdown
|
||||
&.dropdown {
|
||||
@include flex-align(center);
|
||||
@include active-menu-items($black, $light-gray);
|
||||
|
||||
.submenu {
|
||||
@include z-depth-1();
|
||||
}
|
||||
|
||||
// éléments de premier niveau
|
||||
> li > a {
|
||||
color: $white;
|
||||
font-weight: $global-weight-bold;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $dark-gray;
|
||||
background: rgba($white, 0.4);
|
||||
}
|
||||
|
||||
@include breakpoint(xlarge) {
|
||||
font-size: rem-calc(20);
|
||||
}
|
||||
}
|
||||
|
||||
> li.current-menu-item,
|
||||
> li.current-menu-parent,
|
||||
> li.current-menu-ancestor {
|
||||
> a {
|
||||
color: $black;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// bouton « Retour » du drilldown
|
||||
.js-drilldown-back > a {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
// réinitialise la position fixée par .is-dropdown-submenu-parent
|
||||
.drilldown .is-drilldown-submenu-parent.is-dropdown-submenu-parent {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
//// Navigation entre les articles ---------------------------------------------
|
||||
|
||||
.comment-navigation,
|
||||
.posts-navigation,
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
@include foundation-thumbnail;
|
||||
@include foundation-title-bar;
|
||||
// @include foundation-tooltip;
|
||||
@include foundation-top-bar;
|
||||
// @include foundation-top-bar;
|
||||
@include foundation-visibility-classes;
|
||||
// @include foundation-float-classes;
|
||||
@include foundation-flex-classes;
|
||||
|
|
Chargement…
Référencer dans un nouveau ticket