45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import clsx from "clsx"
|
|
|
|
export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
|
|
|
|
export const inlineIconClass = clsx`inline w-5 align-sub`
|
|
|
|
export const linkClass = ({ active = false } = {}) =>
|
|
clsx(
|
|
clsx`font-medium inline-block relative`,
|
|
clsx`opacity-60 hover:opacity-100 transition-opacity`,
|
|
clsx`after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition`,
|
|
clsx`hover:after:translate-y-[-1px] hover:after:opacity-100`,
|
|
active
|
|
? clsx`text-emerald-500 after:bg-emerald-500`
|
|
: clsx`after:bg-white/50`,
|
|
)
|
|
|
|
export const docsProseClass = clsx`
|
|
prose prose-invert
|
|
prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl
|
|
prose-h2:font-light
|
|
prose-h3:font-light
|
|
prose-p:my-3
|
|
prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline
|
|
prose-strong:font-medium prose-strong:text-emerald-400
|
|
prose-pre:font-monospace prose-pre:overflow-x-auto
|
|
prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400
|
|
prose-li:mb-5
|
|
max-w-none
|
|
`
|
|
|
|
export const buttonClass = ({
|
|
variant,
|
|
}: {
|
|
variant: "solid" | "semiblack"
|
|
}) => {
|
|
return clsx(
|
|
clsx`inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg`,
|
|
clsx`hover:translate-y-[-2px] hover:shadow`,
|
|
clsx`active:translate-y-[0px] active:transition-none`, // using translate-y-[0px] instead of just -0 so it takes priority
|
|
variant === "solid" && clsx`bg-emerald-700 hover:bg-emerald-800`,
|
|
variant === "semiblack" && clsx`bg-black/25 hover:bg-black/40`,
|
|
)
|
|
}
|