New newsletter design

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Add dataservice search to header [#622](https://github.com/datagouv/udata-front/pull/622)
 - Trigger GitLab infra deployment through simple-scaffolding script [#632](https://github.com/datagouv/udata-front/pull/632)
 - Fix CI trigger GitLab pipeline job [#635](https://github.com/datagouv/udata-front/pull/635)
+- New footer newsletter design [#634](https://github.com/datagouv/udata-front/pull/634)
 
 ## 6.0.7 (2024-12-20)
 

udata_front/theme/gouvfr/__init__.py

@@ -121,7 +121,7 @@
 nav.Bar('gouvfr_resources', resources_links)
 
 footer_links = [
-    nav.Item(_('Licences'), 'gouvfr.show_page', args={'slug': 'legal/licences'}),
+    nav.Item(_('Licenses'), 'gouvfr.show_page', args={'slug': 'legal/licences'}),
     nav.Item(_('Terms of use'), 'gouvfr.show_page', args={'slug': 'legal/cgu'}),
     nav.Item(_('Tracking and privacy'), 'gouvfr.suivi'),
     nav.Item(_('Legal notice'), 'gouvfr.show_page', args={'slug': 'legal/legal-notice'}),

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/layout/grid.less

@@ -114,7 +114,7 @@
 }
 
 .justify-between {
-    justify-content: space-between;
+    justify-content: space-between !important;
 }
 
 .justify-around {

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

@@ -1,7 +1,7 @@
 @import (less) "@gouvfr/dsfr/dist/component/footer/footer.css";
 
 .fr-footer {
-    --border-plain-blue-france: @blue-400;
+    --border-plain-blue-france: var(--border-action-high-grey);
 }
 
 .fr-footer__top-link {

udata_front/theme/gouvfr/templates/footer.html

@@ -131,12 +131,13 @@ <h3 class="fr-footer__top-cat">{{ _('Development') }}</h3>
             {% cache cache_duration, 'footer-bottom', g.lang_code|default(config.DEFAULT_LANGUAGE)|string %}
             <div class="fr-footer__bottom">
                 <ul class="fr-footer__bottom-list">
-                    {% for item in nav.gouvfr_footer %}
-                        <li class="fr-footer__bottom-item">
-                            <a href="{{ '' if item.items else item.url }}" class="fr-footer__bottom-link">
-                                {{ item.label }}
-                            </a>
-                        </li>
+                    {%- for item in nav.gouvfr_footer -%}
+                        <li
+                            class="fr-footer__bottom-item"
+                        ><a
+                                href="{{ '' if item.items else item.url }}"
+                                class="fr-footer__bottom-link"
+                            >{{ item.label }}</a></li>
                     {% endfor %}
                 </ul>
                 <div class="fr-footer__bottom-copy">

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,22 +8,22 @@
                 </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--base">{{
                             _("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 }}"
                         >
                             {{ _("Subscribe") }}
                         </a>
                         <a
-                            class="fr-btn fr-btn--secondary fr-btn--secondary-grey-500"
+                            class="fr-btn fr-btn--secondary"
                             title="{{ _('Subscribe to our newsletter') }}"
                             href="{{ url_for('gouvfr.show_page', slug='webinaires') }}"
                         >
@@ -33,8 +33,8 @@
                 </div>
             </div>
             <div class="fr-col-12 fr-col-md-4">
-                <div class="fr-follow__social">
-                    <p class="fr-h5">{{ _("Follow us") }}
+                <div class="fr-follow__social justify-between">
+                    <p class="fr-h5 font-800 fs-xl">{{ _("Follow us") }}
                         <br> {{ _("on social media") }}
                     </p>
                     <ul class="fr-links-group">