[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
Jérôme Lebleu 2017-12-22 20:46:54 +01:00
Parent e86f75f5c5
révision 7c6f4027c0
11 fichiers modifiés avec 188 ajouts et 154 suppressions

Voir le fichier

@ -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,
) );

Voir le fichier

@ -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>

Voir le fichier

@ -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

Voir le fichier

@ -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;
}
}
}
}

Voir le fichier

@ -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;

Voir le fichier

@ -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

Voir le fichier

@ -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;
}

Voir le fichier

@ -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;

Voir le fichier

@ -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,

Voir le fichier

@ -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;