feat: rework og template (again)

docs/.vitepress/hooks/Template.vue

@@ -3,30 +3,38 @@ defineProps<{ title: string; description?: string }>()
 </script>
 
 <template>
-  <div
-    style="background-image: url(https://files.catbox.moe/8ucyny.png)"
-    tw="w-full h-full bg-black flex flex-col"
+  <span
+    style="
+      background-image: radial-gradient(
+        100% 100% at 50% 100%,
+        #1fd8a4 0%,
+        rgba(58, 221, 198, 0.75) 25%,
+        rgba(78, 227, 226, 0.5) 50%,
+        rgba(190, 227, 248, 0) 100%
+      );
+    "
+    tw="w-full h-full bg-black flex-col"
   >
-    <div
+    <span
       tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between"
     >
-      <div tw="w-full flex justify-between items-center text-5xl font-medium">
-        <div tw="flex items-center">
-          <div
-            style="color: rgb(31, 178, 124)"
-            tw="ml-2 mt-1 font-semibold"
-            v-html="title"
-          />
-        </div>
-      </div>
-      <div tw="w-full pr-56 flex flex-col items-start justify-end">
-        <div
-          style="color: rgb(31, 178, 124)"
+      <span tw="w-full flex justify-between items-center text-5xl font-medium">
+        <span tw="flex items-center">
+          <img tw="h-22 w-22" src="https://megathread.pages.dev/favicon.svg" />
+
+          <span tw="text-gray-200 ml-2 mt-1 font-semibold">
+            the privateersclub wiki
+          </span>
+        </span>
+      </span>
+      <span tw="w-full pr-56 flex flex-col items-start justify-end">
+        <span tw="text-6xl text-gray-200 font-bold" v-html="title" />
+        <span
           v-if="description"
-          tw="mt-2 text-3xl"
+          tw="mt-2 text-gray-200 text-4xl"
           v-html="description"
         />
-      </div>
-    </div>
-  </div>
+      </span>
+    </span>
+  </span>
 </template>