pill shape for version footer

Signed-off-by: Vu Van Dung <me@joulev.dev>
joulev · May 7, 2024 · 1b28dc8 · 1b28dc8
1 parent 67fda5d
commit 1b28dc8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -30,7 +30,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <body
         className={cn(sans.variable, mono.variable, "bg-[#334155] font-sans text-text-primary")}
       >
-        <div className="fixed inset-0 pattern-cross pattern-text-tertiary pattern-bg-black pattern-size-6 pattern-opacity-20" />
+        <div className="fixed inset-0 -z-50 pattern-cross pattern-text-tertiary pattern-bg-black pattern-size-6 pattern-opacity-20" />
         {children}
         <VersionFooter />
         <Analytics />

diff --git a/src/app/version-footer.tsx b/src/app/version-footer.tsx
@@ -15,11 +15,13 @@ export function VersionFooter() {
     : "https://github.com/joulev/website";
   const label = sha ? sha.slice(0, 7) : "unknown";
   return (
-    <footer className="px-6 pb-12 text-center text-xs text-text-tertiary">
-      <Link unstyled href={url} className="transition hover:text-text-secondary">
-        <GitHub className="inline size-3" /> joulev/website@
-        <span className="font-mono">{label}</span>
-      </Link>
+    <footer className="px-6 pb-12 flex flex-row justify-center text-xs text-text-tertiary">
+      <div className="backdrop-blur bg-bg-darker px-3 py-1 rounded">
+        <Link unstyled href={url} className="transition hover:text-text-secondary">
+          <GitHub className="inline size-3" /> joulev/website@
+          <span className="font-mono">{label}</span>
+        </Link>
+      </div>
     </footer>
   );
 }