fix: update footer opacity, adjust not-found page height, and refine CSS variables

Author: kieranwv

src/layouts/page.vue

@@ -35,7 +35,7 @@ function openGithub() {
     </main>
     <footer flex="~ items-center justify-center gap-2" py-8>
       <a :href="LICENSE_URL" target="_blank">MIT License</a>
-      <span> © {{ new Date().getFullYear() }} </span>
+      <span op-75> © {{ new Date().getFullYear() }} </span>
       <a :href="AUTHOR_URL" target="_blank">Kieran Wang</a>
     </footer>
   </main>

src/pages/[...path].vue

@@ -26,7 +26,7 @@ function goBack() {
 </script>
 
 <template>
-  <div w-full h-full flex="~ items-center justify-center col">
+  <div w-full h-screen flex="~ items-center justify-center col">
     <img w-80 src="@/assets/not-found.svg" alt="404 Image">
     <h1 text-3xl mt-15 mb-5 font-bold>
       {{ t('page.not-found.title') }}

src/styles/main.css

@@ -15,11 +15,11 @@ body,
 }
 
 body {
-  --at-apply: background-color text-color lh-normal;
+  --at-apply: background-color text-color text-op-75 lh-normal;
 }
 
 a {
-  --at-apply: dark:op-75  dark:hover:op-100 op-100 hover:op-75;
+  --at-apply: op-75  hover:op-100;
   text-decoration: underline;
 }