diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass index b90f5be75ec412b9b5da5aee77b711e8265954af..44a68ac538f05626ba7263757a07ea173b3800f6 100644 --- a/assets/sass/_theme/_configuration.sass +++ b/assets/sass/_theme/_configuration.sass @@ -88,11 +88,13 @@ $zindex-toc: 50 !default // Header $header-color: $main-color !default $header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à plus élégant / générique -$header-background-color: $main-background-color !default +$header-background: $main-background-color !default $header-sticky-enabled: true !default +$header-sticky-background: $header-background !default +$header-sticky-color: $header-color !default $header-transition: 0.3s !default $header-sticky-transition: $header-transition !default -$header-dropdown-background: $header-background-color !default +$header-dropdown-background: $header-background !default $header-dropdown-color: $header-color !default $header-dropdown-transition: $header-transition !default $header-nav-padding-y: $spacing0 !default @@ -108,7 +110,7 @@ $footer-background-color: color-contrast($main-background-color, 3%) !default // Hero $hero-height: 375px !default -$hero-height-md: 450px !default +$hero-height-md: 550px !default $hero-color: invert($main-color) !default $hero-background-color: invert($main-background-color) !default diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass index 56835450eadaba5d0b7b93735651673284cd2531..34a22839ec26556c57517c920b010a7322e114c5 100644 --- a/assets/sass/_theme/design-system/header.sass +++ b/assets/sass/_theme/design-system/header.sass @@ -1,23 +1,31 @@ header[role="banner"] + background: $header-background + position: fixed + left: 0 + transition: transform $header-sticky-transition, background $header-sticky-transition + top: 0 + width: 100% z-index: $zindex-header @include media-breakpoint-down(md) - position: fixed padding: 1rem 0 width: 100% - - @if $header-sticky-enabled - background-color: $header-background-color - top: 0 - transition: transform $header-sticky-transition + &.is-sticky + background: $header-sticky-background + color: $header-sticky-color + .menu + a, + a:hover, + a:focus, + a:active + @include link($header-sticky-color) + span + color: $header-sticky-color + html.is-scrolling-down:not(.has-menu-opened) & + @include media-breakpoint-down(md) + transform: translateY(-100%) @include media-breakpoint-up(md) - position: sticky - html.is-scrolling-down:not(.has-menu-opened) & - @include media-breakpoint-down(md) + &:not(:hover) transform: translateY(-100%) - @include media-breakpoint-up(md) - &:not(:hover) - transform: translateY(-100%) - nav[role="navigation"] padding-bottom: $header-nav-padding-y padding-top: $header-nav-padding-y diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass index 54c74ce47a290448462787142ff9de67da8ca70e..ecca43cc35363e59ba5c54e6fb80182909a6e8eb 100644 --- a/assets/sass/_theme/design-system/hero.sass +++ b/assets/sass/_theme/design-system/hero.sass @@ -1,12 +1,15 @@ .hero align-items: flex-end + // Support gradients + background: $hero-background-color + // Fallback color background-color: $hero-background-color color: $hero-color display: flex min-height: $hero-height overflow: hidden padding-bottom: 2rem - padding-top: 2rem + padding-top: calc(2rem + var(--header-height)) position: relative @include media-breakpoint-up(md) min-height: $hero-height-md diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass index face2ed6d269b1ef83f8cee9bb07640d95b4d9a9..d2f0c099786f529465a0d1e389d63ba368c33c69 100644 --- a/assets/sass/_theme/design-system/nav.sass +++ b/assets/sass/_theme/design-system/nav.sass @@ -14,12 +14,13 @@ margin-top: 1.875rem max-height: 70vh overflow: auto - a, a:hover, a:focus, a:active @include link($header-color) + span + color: $header-color ul display: flex list-style: none @@ -181,7 +182,7 @@ body @include media-breakpoint-up(md) font-size: $program-share-font-size-md .dropdown-menu - background: invert($hero-background-color) + background: $hero-color padding: 0 position: absolute width: 100%