bunch of styles
This commit is contained in:
parent
54b3288c61
commit
58403c710b
@ -2,13 +2,15 @@ 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">
|
||||
<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 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>
|
||||
|
@ -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>
|
||||
|
@ -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}>
|
||||
{text}
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user