feat(front): 1402 remove distractive contents

src/components/ErrorComponent.vue

@@ -2,21 +2,6 @@
   <div class="container mx-auto" id="error-wrapper">
     <div class="">
       <section>
-        <div class="text-center">
-          <picture>
-            <source
-              :srcset="`/img/pics/error-480w.webp  1x, /img/pics/error-1024w.webp 2x`"
-              type="image/webp"
-            />
-            <img
-              :src="`/img/pics/error-480w.webp`"
-              alt=""
-              width="480"
-              height="312"
-              loading="lazy"
-            />
-          </picture>
-        </div>
         <o-notification variant="danger" class="">
           <h1>
             {{

src/components/PageFooter.vue

@@ -1,21 +1,8 @@
 <template>
   <footer
-    class="bg-violet-2 color-secondary flex flex-col items-center py-2 px-3"
+    class="bg-violet-2 color-secondary flex flex-col items-center py-3 px-3"
     ref="footer"
   >
-    <picture class="flex max-w-xl">
-      <source
-        :srcset="`/img/pics/footer_${random}-1024w.webp 1x, /img/pics/footer_${random}-1920w.webp 2x`"
-        type="image/webp"
-      />
-      <img
-        :src="`/img/pics/footer_${random}-1024w.webp`"
-        alt=""
-        width="1024"
-        height="428"
-        loading="lazy"
-      />
-    </picture>
     <ul
       class="inline-flex flex-wrap justify-around gap-3 text-lg text-white underline decoration-yellow-1"
     >
@@ -92,15 +79,11 @@ import { saveLocaleData } from "@/utils/auth";
 import { loadLanguageAsync } from "@/utils/i18n";
 import RouteName from "../router/name";
 import langs from "../i18n/langs.json";
-import { computed, watch } from "vue";
+import { watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const { locale, t } = useI18n({ useScope: "global" });
 
-const random = computed((): number => {
-  return Math.floor(Math.random() * 4) + 1;
-});
-
 watch(locale, async () => {
   if (locale) {
     console.debug("Setting locale from footer");
@@ -113,3 +96,9 @@ const isLangSelected = (lang: string): boolean => {
   return lang === locale.value;
 };
 </script>
+
+<style lang="scss">
+footer > ul > li {
+  margin: auto 0;
+}
+</style>

src/views/Event/MyEventsView.vue

@@ -151,7 +151,6 @@
             true // !$apollo.loading
           "
         >
-          <div class="img-container h-64 prose" />
           <div class="text-center prose dark:prose-invert max-w-full">
             <p>
               {{
@@ -500,24 +499,3 @@ useHead({
   title: computed(() => t("My events")),
 });
 </script>
-
-<style lang="scss">
-.not-found {
-  .img-container {
-    background-image: url("../../../img/pics/event_creation-480w.webp");
-
-    @media (min-resolution: 2dppx) {
-      & {
-        background-image: url("../../../img/pics/event_creation-1024w.webp");
-      }
-    }
-
-    max-width: 450px;
-    height: 300px;
-    box-shadow: 0 0 8px 8px white inset;
-    background-size: cover;
-    border-radius: 10px;
-    margin: auto auto 1rem;
-  }
-}
-</style>

src/views/Group/MyGroups.vue

@@ -48,7 +48,6 @@
     >
       <div class="">
         <div class="">
-          <div class="img-container" />
           <div class="text-center prose dark:prose-invert max-w-full">
             <p>
               {{ t("You are not part of any group.") }}
@@ -201,23 +200,4 @@ section {
 .group-member-card {
   margin-bottom: 1rem;
 }
-
-.not-found {
-  .img-container {
-    background-image: url("../../../img/pics/group-480w.webp");
-
-    @media (min-resolution: 2dppx) {
-      & {
-        background-image: url("../../../img/pics/group-1024w.webp");
-      }
-    }
-
-    max-width: 450px;
-    height: 300px;
-    box-shadow: 0 0 8px 8px white inset;
-    background-size: cover;
-    border-radius: 10px;
-    margin: auto auto 1rem;
-  }
-}
 </style>

src/views/HomeView.vue

@@ -145,39 +145,6 @@
   <OnlineEvents />
   <LastEvents v-if="instanceName" :instanceName="instanceName" />
   <!-- Unlogged content section -->
-  <picture v-if="!currentUser?.isLoggedIn">
-    <source
-      media="(max-width: 799px)"
-      :srcset="`/img/pics/homepage-480w.webp`"
-      type="image/webp"
-    />
-
-    <source
-      media="(max-width: 1024px)"
-      :srcset="`/img/pics/homepage-1024w.webp`"
-      type="image/webp"
-    />
-
-    <source
-      media="(max-width: 1920px)"
-      :srcset="`/img/pics/homepage-1920w.webp`"
-      type="image/webp"
-    />
-
-    <source
-      media="(min-width: 1921px)"
-      :srcset="`/img/pics/homepage.webp`"
-      type="image/webp"
-    />
-
-    <img
-      :src="`/img/pics/homepage-1024w.webp`"
-      width="3840"
-      height="2719"
-      alt=""
-      loading="lazy"
-    />
-  </picture>
   <presentation v-if="!currentUser?.isLoggedIn" />
 </template>
 

src/views/PageNotFound.vue

@@ -2,20 +2,6 @@
   <section class="container mx-auto py-4 is-max-desktop max-w-2xl">
     <div class="">
       <div class="">
-        <picture>
-          <source
-            :srcset="`/img/pics/error-480w.webp 1x, /img/pics/error-1024w.webp 2x`"
-            type="image/webp"
-          />
-
-          <img
-            :src="`/img/pics/error-480w.webp`"
-            alt=""
-            width="2616"
-            height="1698"
-            loading="lazy"
-          />
-        </picture>
         <h1 class="text-4xl mb-3">
           {{ $t("The page you're looking for doesn't exist.") }}
         </h1>