Getting closer to a mobile version

frontend/src/App.vue

@@ -29,7 +29,7 @@ import SideBar from "@/views/main/SideBar.vue";
 
 .shell-side {
   @apply border border-[#3d3d3d];
-  @apply lg:h-screen;
+  @apply lg:max-h-screen;
   @apply lg:fixed;
   @apply border-b lg:border-b-0 lg:border-r;
   @apply flex-shrink-0;

frontend/src/views/creators/BannerActions.vue

@@ -28,16 +28,8 @@ const baseURL = window.location.origin;
             }">
 
         <div class="flex flex-row py-4 pr-4 items-center">
-          <!-- Profile et Info -->
+          <creator-logo/>
-
+          <name-title></name-title>
-          <div class="absolute -mt-4">
-            <creator-logo/>
-          </div>
-
-          <div class="flex items-center ml-56 grow">
-            <name-title></name-title>
-          </div>
-
           <donation-button-banner
               v-if="brandingStore.value?.acceptDonation"
               :creator-id="brandingStore.value?.id"
@@ -120,5 +112,4 @@ const baseURL = window.location.origin;
 }
 
 
-
 </style>

frontend/src/views/creators/CreatorLayout.vue

@@ -1,27 +1,4 @@
-<template>
+<script async setup>
-
-  <div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
-
-    <div v-if="brandingStore.loading">
-      <v-progress-linear indeterminate></v-progress-linear>
-    </div>
-    <div v-else>
-      <div>
-        <banner></banner>
-      </div>
-      <div>
-        <router-view></router-view>
-      </div>
-      <div>
-        <Footer></Footer>
-      </div>
-    </div>
-
-  </div>
-
-</template>
-
-<script async setup>
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {onMounted} from "vue";
 import Banner from "@/views/creators/Banner.vue";
@@ -35,3 +12,20 @@ onMounted(async () => {
 });
 
 </script>
+
+<template>
+
+  <div class="min-h-screen max-w-[1024px] bg-hSurface text-hOnSurface">
+
+    <div v-if="brandingStore.loading">
+      <v-progress-linear indeterminate></v-progress-linear>
+    </div>
+    <div v-else>
+      <banner></banner>
+      <router-view></router-view>
+      <Footer></Footer>
+    </div>
+
+  </div>
+
+</template>

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
+    <div class="footer-socials">
-        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">
       <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>