diff --git a/app/assets/images/header/logo-ds-narrow.svg b/app/assets/images/header/logo-ds-narrow.svg
index eda8aa5eb..437c271ee 100644
--- a/app/assets/images/header/logo-ds-narrow.svg
+++ b/app/assets/images/header/logo-ds-narrow.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/app/assets/images/header/logo-ds-wide.svg b/app/assets/images/header/logo-ds-wide.svg
new file mode 100644
index 000000000..3fb67e18a
--- /dev/null
+++ b/app/assets/images/header/logo-ds-wide.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/images/header/logo-ds.svg b/app/assets/images/header/logo-ds.svg
index 3fb67e18a..eda8aa5eb 100644
--- a/app/assets/images/header/logo-ds.svg
+++ b/app/assets/images/header/logo-ds.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/app/assets/stylesheets/new_design/new_header.scss b/app/assets/stylesheets/new_design/new_header.scss
index 3912d1f29..87ee0446b 100644
--- a/app/assets/stylesheets/new_design/new_header.scss
+++ b/app/assets/stylesheets/new_design/new_header.scss
@@ -3,7 +3,8 @@
@import "constants";
@import "mixins";
-$landing-breakpoint: 1040px;
+$header-landing-breakpoint: 1040px;
+$header-mobile-breakpoint: 550px;
// FIXME: Rename when the header is generalized
.new-header {
@@ -23,24 +24,28 @@ $landing-breakpoint: 1040px;
.header-logo {
display: inline-block;
+ height: 100%;
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
- .header-logo-wide {
- margin-right: 4 * $default-spacer;
+ // Logo large
+ background-image: url("/assets/header/logo-ds-wide.svg");
+ width: 360px;
+ margin-right: 4 * $default-spacer;
+
+ // Logo normal
+ @media (max-width: $header-landing-breakpoint) {
+ background-image: url("/assets/header/logo-ds.svg");
+ width: 132px;
+ margin-right: $default-spacer;
}
- .header-logo-narrow {
- display: none;
- }
-
- @media (max-width: $landing-breakpoint) {
- .header-logo-wide {
- display: none;
- }
-
- .header-logo-narrow {
- display: inline;
- margin-right: 0;
- }
+ // Logo narrow
+ @media (max-width: $header-mobile-breakpoint) {
+ background-image: url("/assets/header/logo-ds-narrow.svg");
+ width: 32px;
+ margin-right: 0;
}
}
diff --git a/app/views/layouts/_new_header.haml b/app/views/layouts/_new_header.haml
index ea23934fd..f996d6565 100644
--- a/app/views/layouts/_new_header.haml
+++ b/app/views/layouts/_new_header.haml
@@ -6,9 +6,7 @@
.header-inner-content
.flex.align-center
- = link_to root_path_for_profile(nav_bar_profile), class: "header-logo" do
- = image_tag "header/logo-ds.svg", alt: "demarches-simplifiees.fr", class: "header-logo-wide"
- = image_tag "header/logo-ds-narrow.svg", alt: "demarches-simplifiees.fr", class: "header-logo-narrow"
+ = link_to '', root_path_for_profile(nav_bar_profile), class: "header-logo", title: "Revenir à l’accueil"
- if nav_bar_profile == :gestionnaire && gestionnaire_signed_in?
- current_url = request.path_info