Made sidebar image smaller

app/components/global/sidebar/Sidebar.vue

@@ -166,12 +166,16 @@ const breakpoints = useBreakpoints(
     </menu>
 
     <UserCTA />
+
+    <div class="sidebar-backdrop">
+      <NuxtImg src="/images/sidebar-min.webp" width="160" :preload="true" />
+    </div>
   </nav>
 </template>
 
 <style lang="scss" scoped>
 nav {
-  &::after {
+  .sidebar-backdrop {
     display: block;
     content: '';
     position: absolute;
@@ -179,12 +183,12 @@ nav {
     inset-inline: 0;
     height: 25rem;
     max-height: 100%;
-    background-image: url("/images/sidebar.png");
-    background-position: bottom;
-    background-size: cover;
-    background-repeat: no-repeat;
-    mask-image: linear-gradient(to top, black 25%, transparent 50%, transparent);
+    display: grid;
+    align-items: end;
+    mask-image: linear-gradient(to top, var(--color-black) 25%, transparent 50%, transparent);
     z-index: -1;
+    opacity: .5;
+    filter: saturate(200%);
   }
 }
 </style>

app/pages/about.vue

@@ -15,7 +15,7 @@ watch(locale, () => refresh())
     <Title>{{ $t("pages.about.title") }}</Title>
   </Head>
 
-  <main class="container overflow-y-auto py-8 px-5 md:px-8 grid gap-4 grid-rows-[auto_1fr]">
+  <main class="overflow-y-auto py-8 px-5 md:px-8 grid gap-4 grid-rows-[auto_1fr]">
     <div class="flex items-center gap-3">
       <div class="md:hidden">
         <SidebarToggle />
@@ -30,6 +30,6 @@ watch(locale, () => refresh())
       <PhCircleNotch size="50" class="opacity-33 animate-spin"/>
     </div>
 
-    <LazyContentRenderer v-else-if="status === 'success' && page" :value="page" class="content" />
+    <LazyContentRenderer v-else-if="status === 'success' && page" :value="page" class="content max-w-5xl" />
   </main>
 </template>