Getting closer to a mobile version

frontend/src/views/main/Footer.vue

@@ -6,14 +6,9 @@ import X from "@/views/svg/X.vue";
 
 <template>
 
-  <footer class="py-8 flex flex-col gap-8">
+  <footer class="flex flex-col gap-10">
 
-    <div
-        class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">
-      Hutopy
-    </div>
-
-    <div class="flex flex-row justify-center gap-10 mb-10">
+    <div class="footer-socials">
       <a href="https://www.facebook.com/profile.php?id=61556819217561" target="_blank">
         <facebook class="social-icon"></facebook>
       </a>
@@ -25,7 +20,7 @@ import X from "@/views/svg/X.vue";
       </a>
     </div>
 
-    <div class="flex flex-row flex-wrap justify-center gap-4 px-4">
+    <div class="footer-links">
       <router-link to="/documents/helpandcontact"
                    class="link">
         {{ $t('footer.helpandcontact') }}
@@ -56,7 +51,7 @@ import X from "@/views/svg/X.vue";
       </router-link>
     </div>
 
-    <div class="flex justify-center base-text link">
+    <div class="footer-copyright">
       Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>
 
@@ -66,6 +61,21 @@ import X from "@/views/svg/X.vue";
 
 <style scoped>
 
+.footer-socials {
+  @apply flex flex-row justify-center;
+  @apply gap-10;
+}
+
+.footer-links {
+  @apply flex flex-row flex-wrap justify-center;
+  @apply gap-4 px-4;
+}
+
+.footer-copyright {
+  @apply flex justify-center;
+  @apply text-hOnBackground tracking-widest font-sans text-sm uppercase;
+}
+
 .social-icon {
   @apply fill-current w-8 h-8;
   @apply text-hOnBackground;
@@ -73,43 +83,8 @@ import X from "@/views/svg/X.vue";
 
 .link {
   @apply text-hOnBackground;
+  @apply tracking-widest font-sans text-sm uppercase;
+  @apply hover:text-gray-400;
 }
 
-.base-text {
-  @apply text-hOnBackground tracking-widest font-sans text-sm uppercase
-}
-
-a {
-  @apply base-text
-}
-
-a:hover {
-  @apply text-gray-400
-}
-
-.centered-text {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  letter-spacing: 125px;
-  font-size: 2rem;
-  font-weight: bold;
-  margin-left: 7rem;
-}
-
-@media (max-width: 768px) {
-  .centered-text {
-    letter-spacing: 60px;
-    margin-left: 2rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .centered-text {
-    letter-spacing: 40px;
-    margin-left: 1rem;
-  }
-}
-
-
 </style>