site-v2/app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
      <div id="global-outro-container" class="mt-6 mb-2 mx-0 p2 max-w-screen">
        <div id="global-outro-links" class="mb-0 lg:mb-1 mx-auto mt-4 md:mt-6 p0 flex flex-row flex-wrap justify-center justify-items-center min-w-content">
          <template v-for="link in links" :key="link.text">
            <a :href="`https://${link.href}`" :target="link.target ? `_${link.target}` : '_blank'" class="flex-none text-center text-sm font-mont text-slate-300 font-light px-2 py-1 hover:font-normal hover:text-white transition-colors ease-in-out duration-300">{{ link.text }}</a>
          </template>
        </div>
        <div id="global-copyright-container" class="mx-auto px-0 m-0">
          <p class="text-xs mx-auto italic text-center text-slate-400 font-thin">Copyright WubzyGD 2024</p>
        </div>
        <div id="global-outro-glow" class="p0 m0 mt-2 border-solid border-b lg:mx-6"></div>
      </div>
    </NuxtLayout>
  </div>
</template>

<style>
#global-outro-glow {
  border-image: linear-gradient(to right, transparent 0%, transparent 5%, #ffffff4a 30%, #ffffffa4 47%, #ffffffa4 53%, #ffffff4a 70%, transparent 100%) 1;
}
</style>

<script>
export default {
  data() {
    return {
      links: [
        {text: "Home", href: "wubzy.xyz", target: "self"},
        {text: "GitHub", href: "github.com/WubzyGD"},
        {text: "Insta", href: "instagram.com/wubzygd"},
        {text: "Theme Generator", href: "wubzy.xyz/util/theme"},
        {text: "Gitea", href: "git.wubzy.xyz"},
        {text: "Site Source", href: "git.wubzy.xyz/Wubzy/site-v2"}
      ]
    }
  }
}
</script>