Multiples fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Footer.vue

@@ -1,10 +1,10 @@
 <template>
   <footer class="footer" ref="footer">
     <mobilizon-logo :invert="true" class="logo" />
-    <img src="../assets/footer.png" :alt="$t('World map')" />
+    <!-- <img src="../assets/footer.png" :alt="$t('World map')" /> -->
     <ul>
       <li>
-        <a href="https://joinmobilizon.org">{{ $t("About") }}</a>
+        <router-link :to="{ name: RouteName.ABOUT }">{{ $t("About") }}</router-link>
       </li>
       <li>
         <router-link :to="{ name: RouteName.TERMS }">{{ $t("Terms") }}</router-link>
@@ -16,14 +16,16 @@
       </li>
     </ul>
     <div class="content has-text-centered">
-      <span>
-        {{
-          $t(
-            "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks",
-            { date: new Date().getFullYear() }
-          )
-        }}
-      </span>
+      <i18n
+        tag="span"
+        path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
+      >
+        <a slot="mobilizon" href="https://joinmobilizon.org">{{ $t("Mobilizon") }}</a>
+        <span slot="date">{{ new Date().getFullYear() }}</span>
+        <a href="https://joinmobilizon.org/hall-of-fame" slot="contributors">{{
+          $t("more than 1360 contributors")
+        }}</a>
+      </i18n>
     </div>
   </footer>
 </template>
@@ -49,11 +51,13 @@ footer.footer {
   display: flex;
   flex-direction: column;
   align-items: center;
+  font-size: 14px;
 
   .logo {
     fill: $secondary;
     flex: 1;
     max-width: 300px;
+    margin-bottom: 2rem;
   }
 
   div.content {
@@ -63,13 +67,15 @@ footer.footer {
   ul li {
     display: inline-flex;
     margin: auto 5px;
-
     a {
-      color: #eee;
-      font-size: 1.5rem;
-      text-decoration: underline;
-      text-decoration-color: $secondary;
+      font-size: 1.1rem;
     }
   }
+
+  a {
+    color: $white;
+    text-decoration: underline;
+    text-decoration-color: $secondary;
+  }
 }
 </style>