New newsletter design

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fix following cache issue [#631](https://github.com/datagouv/udata-front/pull/631)
 - Add dataservice search to header [#622](https://github.com/datagouv/udata-front/pull/622)
+- New footer newsletter design [#634](https://github.com/datagouv/udata-front/pull/634)
 
 ## 6.0.7 (2024-12-20)
 

udata_front/theme/gouvfr/assets/less/components/follow-button.less

@@ -1,12 +1,10 @@
 @import (less) "@gouvfr/dsfr/dist/component/follow/follow.css";
 
 .fr-follow {
-    .fr-h4 {
-        --text-title-grey: @text-label-blue-cumulus;
-    }
-    p.fr-text--alt {
-        color: @text-label-blue-cumulus;
-    }
+    --background-alt-blue-france: var(--background-default-grey);
+    --background-alt-blue-france-hover: var(--background-default-grey-hover);
+    --background-alt-blue-france-active: var(--background-default-grey-active);
+    --border-default-blue-france: @grey-125;
 }
 
 .follow-button {

udata_front/theme/gouvfr/assets/less/content/typography.less

@@ -40,6 +40,10 @@ h6,
     font-weight: bold;
 }
 
+.font-800 {
+    font-weight: 800 !important;
+}
+
 .sup {
     display: inline-block;
     font-weight: 300;

udata_front/theme/gouvfr/assets/less/font.less

@@ -18,3 +18,12 @@
 
     font-display: swap;
 }
+
+@font-face {
+    font-weight: 800;
+    font-family: Marianne;
+    src: url("../fonts/Marianne-ExtraBold.woff2") format("woff2"),
+        url("../fonts/Marianne-ExtraBold.woff") format("woff");
+
+    font-display: swap;
+}

udata_front/theme/gouvfr/assets/less/specific/footer.less

@@ -1,9 +1,5 @@
 @import (less) "@gouvfr/dsfr/dist/component/footer/footer.css";
 
-.fr-footer {
-    --border-plain-blue-france: @blue-400;
-}
-
 .fr-footer__top-link {
     &:extend(a.unstyled);
 }

udata_front/theme/gouvfr/templates/newsletter.html

@@ -1,5 +1,5 @@
 {% cache cache_duration, 'newsletter', g.lang_code|default(config.DEFAULT_LANGUAGE)|string %}
-<div class="fr-follow">
+<div class="fr-follow border-top">
     <div class="fr-container">
         <div class="fr-grid-row">
             <div class="fr-col-12 fr-col-md-8 flex">
@@ -8,15 +8,15 @@
                 </div>
                 <div class="fr-follow__newsletter fr-col">
                     <div>
-                        <p class="fr-h4">{{ _("Subscribe to our newsletter") }}</p>
-                        <p class="fr-text--lg fr-text--alt f-italic">{{
+                        <p class="fr-h4 font-800 fs-xl fr-mb-1v">{{ _("Subscribe to our newsletter") }}</p>
+                        <p class="fr-text--lg">{{
                             _("To stay up to date about {site} and open data news, subscribe to our newsletter and follow our events.")
                                 .format(site=current_site.title)
                         }}</p>
                     </div>
                     <div>
                         <a
-                            class="fr-btn fr-mr-2w fr-my-1w"
+                            class="fr-btn fr-mr-2w"
                             title="{{ _('Subscribe to our newsletter') }}"
                             href="{{ config.NEWSLETTER_SUBSCRIPTION_URL }}"
                         >
@@ -34,7 +34,7 @@
             </div>
             <div class="fr-col-12 fr-col-md-4">
                 <div class="fr-follow__social">
-                    <p class="fr-h5">{{ _("Follow us") }}
+                    <p class="fr-h5 font-800 fs-xl">{{ _("Follow us") }}
                         <br> {{ _("on social media") }}
                     </p>
                     <ul class="fr-links-group">