chore: improve footer

The "Mentions légales" link was not enough visible on small viewports
because of the back to top link. So I change the disposition to improve
that.

6 files changed, 52 insertions, 24 deletions

diff --git a/src/components/Copyright/Copyright.module.scss b/src/components/Copyright/Copyright.module.scss
index 5ebbca4..35445b2 100644
--- a/src/components/Copyright/Copyright.module.scss
+++ b/src/components/Copyright/Copyright.module.scss
@@ -1,13 +1,33 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
   --icon-size: #{fun.convert-px(70)};
 
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
   align-items: center;
+  place-content: center;
   gap: var(--spacing-2xs);
   margin: 0;
   font-family: var(--font-family-secondary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-md);
+  text-align: center;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      place-content: start;
+      text-align: left;
+    }
+  }
+}
+
+.name {
+  flex: 1 0 100%;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      flex: auto;
+    }
+  }
 }
diff --git a/src/components/Copyright/Copyright.tsx b/src/components/Copyright/Copyright.tsx
index 7ea3829..d2de2e9 100644
--- a/src/components/Copyright/Copyright.tsx
+++ b/src/components/Copyright/Copyright.tsx
@@ -5,7 +5,7 @@ import styles from './Copyright.module.scss';
 const Copyright = () => {
   return (
     <p className={styles.wrapper}>
-      <span>{settings.name}</span>
+      <span className={styles.name}>{settings.name}</span>
       <CopyrightIcon />
       <span>
         {settings.copyright.startYear} - {settings.copyright.endYear}
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 51e308e..1d156f8 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -1,13 +1,21 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: column wrap;
+  gap: var(--spacing-xs);
   place-items: center;
   place-content: center;
-  gap: var(--spacing-xs);
   padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
   border-top: fun.convert-px(3) solid var(--color-border-light);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      flex-flow: row wrap;
+      font-size: var(--font-size-sm);
+    }
+  }
 }
 
 .back-to-top {
diff --git a/src/components/FooterNav/FooterNav.module.scss b/src/components/FooterNav/FooterNav.module.scss
index af72df0..73ea568 100644
--- a/src/components/FooterNav/FooterNav.module.scss
+++ b/src/components/FooterNav/FooterNav.module.scss
@@ -1,17 +1,20 @@
+@use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
-.wrapper {
-  font-size: var(--font-size-sm);
-}
-
 .list {
   @extend %flex-list;
+
   gap: var(--spacing-xs);
+  place-content: center;
 }
 
 .item {
-  &::before {
-    content: "\2022";
-    margin-right: var(--spacing-xs);
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      &::before {
+        content: "\2022";
+        margin-right: var(--spacing-xs);
+      }
+    }
   }
 }
diff --git a/src/components/FooterNav/FooterNav.tsx b/src/components/FooterNav/FooterNav.tsx
index f1fd0b7..7167b69 100644
--- a/src/components/FooterNav/FooterNav.tsx
+++ b/src/components/FooterNav/FooterNav.tsx
@@ -28,17 +28,15 @@ const FooterNav = () => {
   });
 
   return (
-    <div className={styles.wrapper}>
-      <nav
-        className={styles.nav}
-        aria-label={intl.formatMessage({
-          defaultMessage: 'Footer',
-          description: 'FooterNav: aria-label',
-        })}
-      >
-        <ul className={styles.list}>{navItems}</ul>
-      </nav>
-    </div>
+    <nav
+      className={styles.nav}
+      aria-label={intl.formatMessage({
+        defaultMessage: 'Footer',
+        description: 'FooterNav: aria-label',
+      })}
+    >
+      <ul className={styles.list}>{navItems}</ul>
+    </nav>
   );
 };
 
diff --git a/src/components/Icons/Copyright/Copyright.module.scss b/src/components/Icons/Copyright/Copyright.module.scss
index 0497c1d..8ea801e 100644
--- a/src/components/Icons/Copyright/Copyright.module.scss
+++ b/src/components/Icons/Copyright/Copyright.module.scss
@@ -2,7 +2,6 @@
 
 .icon {
   display: block;
-  margin: auto;
   width: var(--icon-size, #{fun.convert-px(40)});
   fill: var(--color-fg);
 }