bunch of styles

src/app/components/cases.tsx

@@ -2,14 +2,16 @@ import Link from "next/link";
 import { getCases } from "$lib/content";
 
 const Cases = () =>
-  <div className="p-20 w-3/4 mx-auto flex flex-col gap-4">
+  <div className="p-20 w-full lg:w-3/4 mx-auto flex flex-col gap-4">
     {getCases().filter(c => !c.data.draft).sort((a, b) => Number(b.data.z) - Number(a.data.z)).map((c) => c.data).map((d) =>
       <div key={d.slug} className="w-full h-max flex justify-center rounded-lg border-2">
+        <div className="gradient w-full">
           <Link className="btn flex flex-col w-full text-center" href={d.slug}>
             <span className="text-lg px-6">{d.title}</span>
             <span>{d.date}</span>
           </Link>
         </div>
+      </div>
     )}
   </div>
 export default Cases;

src/app/components/links.tsx

@@ -6,10 +6,10 @@ const Links = () =>
   <div className="grid w-full h-full place-content-center">
     <div className={"grid grid-cols-2 gap-4 place-content-center"}>
       <Link aria-label="GitHub" href={process.env.NEXT_PUBLIC_GITHUB_URL!} target="_blank">
-        <FontAwesomeIcon className="svg-link" icon={faGithub} />
+        <FontAwesomeIcon className="w-14 h-14 hover:text-sky-400" icon={faGithub} />
       </Link>
       <Link aria-label="GitLab" href={process.env.NEXT_PUBLIC_GITLAB_URL!} target="_blank">
-        <FontAwesomeIcon className="svg-link" icon={faGitlab} />
+        <FontAwesomeIcon className="w-14 h-14 hover:text-sky-400" icon={faGitlab} />
       </Link>
     </div>
   </div>

src/app/components/navbar.tsx

@@ -6,8 +6,10 @@ const Navbar = () => {
   const path = usePathname()
   const link = (text: string, href: string) => {
     return (
-      <Link data-selected={path === href} className="btn" aria-label={text} href={href}>
+      <Link data-selected={path === href} className="gradient w-full h-max rounded-md border-2" aria-label={text} href={href}>
+        <div className="btn">
           {text}
+        </div>
       </Link>
     )
   }

src/app/contact/page.tsx

@@ -6,7 +6,7 @@ const mailto = `mailto:${email}`
 const Contact = () =>
   <div className="w-full h-full p-2 grid place-content-center">
     <div className="flex flex-row gap-4">
-      <a aria-label={mailto} href={mailto}><FontAwesomeIcon className="svg-link" icon={faEnvelope} /></a>
+      <a aria-label={mailto} href={mailto}><FontAwesomeIcon className="w-14 h-14 hover:text-sky-400" icon={faEnvelope} /></a>
     </div>
   </div>
 

src/app/globals.css

@@ -2,22 +2,23 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .btn {
+    @apply bg-gray-900 transition ease-in duration-200 text-gray-300 hover:bg-gray-700/60 rounded-md px-3 py-2 text-sm
+  }
+}
+
+@layer utilities {
+  .gradient {
+    @apply bg-gradient-to-br from-slate-950 via-red-700 to-yellow-400
+  }
+}
+
 body {
-  @apply bg-slate-950 text-slate-50 w-screen h-screen
+  @apply gradient text-slate-50 w-screen h-screen
 }
 
 main {
-  @apply flex flex-col w-full h-full
+  @apply flex flex-col w-full h-full bg-slate-950/95
 }
 
-svg {
-  @apply hover:text-cyan-500
-}
-
-.svg-link {
-  @apply w-14 h-14
-}
-
-.btn {
-  @apply bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium data-[selected=true]:bg-gray-600
-}