kopia lustrzana https://github.com/cloudflare/wildebeest
introduce wildebeest colors
introduce wildebeest colors to match more closely the mastodon color scheme resolves #48pull/52/head
rodzic
74decfec6c
commit
a39120f86d
|
@ -22,7 +22,7 @@ export default component$((props: Props) => {
|
||||||
const handleContentClick = $(() => nav(statusUrl))
|
const handleContentClick = $(() => nav(statusUrl))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="p-4 border-t border-slate-600 pointer">
|
<div class="p-4 border-t border-wildebeest-600 pointer">
|
||||||
<div onClick$={handleContentClick}>
|
<div onClick$={handleContentClick}>
|
||||||
<div class="flex justify-between mb-3">
|
<div class="flex justify-between mb-3">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
@ -32,11 +32,11 @@ export default component$((props: Props) => {
|
||||||
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
|
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
|
||||||
<a class="no-underline">{status.account.display_name}</a>
|
<a class="no-underline">{status.account.display_name}</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-slate-500">@{status.account.username}</div>
|
<div class="text-wildebeest-500">@{status.account.username}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Link class="no-underline" href={statusUrl}>
|
<Link class="no-underline" href={statusUrl}>
|
||||||
<div class="text-slate-500 flex items-center">
|
<div class="text-wildebeest-500 flex items-center">
|
||||||
<i class="fa fa-xs fa-globe" />
|
<i class="fa fa-xs fa-globe" />
|
||||||
<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
|
<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -49,11 +49,11 @@ export default component$((props: Props) => {
|
||||||
|
|
||||||
{status.card && status.media_attachments.length == 0 && (
|
{status.card && status.media_attachments.length == 0 && (
|
||||||
<a class="no-underline" href={status.card.url}>
|
<a class="no-underline" href={status.card.url}>
|
||||||
<div class="rounded flex border border-slate-600">
|
<div class="rounded flex border border-wildebeest-600">
|
||||||
<img class="preview-image" src={status.card.image} />
|
<img class="preview-image" src={status.card.image} />
|
||||||
<div class="p-3 overflow-hidden">
|
<div class="p-3 overflow-hidden">
|
||||||
<div class="overflow-ellipsis text-sm text-bold text-slate-400">{status.card.title}</div>
|
<div class="overflow-ellipsis text-sm text-bold text-wildebeest-400">{status.card.title}</div>
|
||||||
<div class="overflow-ellipsis mt-2 text-sm text-slate-500">{status.card.provider_name}</div>
|
<div class="overflow-ellipsis mt-2 text-sm text-wildebeest-500">{status.card.provider_name}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { component$, Slot } from '@builder.io/qwik'
|
||||||
|
|
||||||
export default component$(() => {
|
export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<header class="bg-slate-900 sticky top-[3.9rem] xl:top-0 xl:pt-[10px] z-10">
|
<header class="bg-wildebeest-900 sticky top-[3.9rem] xl:top-0 xl:pt-[10px] z-10">
|
||||||
<Slot />
|
<Slot />
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
|
|
@ -17,8 +17,8 @@ export default component$((props: Props) => {
|
||||||
return (
|
return (
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="text-sm text-bold text-slate-400">#{props.tagDetails.name}</div>
|
<div class="text-sm text-bold text-wildebeest-400">#{props.tagDetails.name}</div>
|
||||||
<div class="text-xs text-slate-500">{formatHistory(history)}</div>
|
<div class="text-xs text-wildebeest-500">{formatHistory(history)}</div>
|
||||||
</div>
|
</div>
|
||||||
<Sparkline data={data} />
|
<Sparkline data={data} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,7 +8,7 @@ export default component$(() => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="hidden xl:block text-sm">
|
<div class="hidden xl:block text-sm">
|
||||||
<p class="text-slate-400">
|
<p class="text-wildebeest-400">
|
||||||
<span class="text-semi">{domain}</span> is part of the decentralized social network powered by{' '}
|
<span class="text-semi">{domain}</span> is part of the decentralized social network powered by{' '}
|
||||||
<a href="https://github.com/cloudflare/wildebeest">Wildebeest</a>.
|
<a href="https://github.com/cloudflare/wildebeest">Wildebeest</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -18,7 +18,7 @@ export default component$(() => {
|
||||||
let classList = 'mx-4 my-5 block no-underline text-semi max-w-max ' + location.pathname
|
let classList = 'mx-4 my-5 block no-underline text-semi max-w-max ' + location.pathname
|
||||||
|
|
||||||
if (linkActiveRegex.test(location.pathname)) {
|
if (linkActiveRegex.test(location.pathname)) {
|
||||||
classList += ' text-indigo-400'
|
classList += ' text-wildebeest-vibrant-400'
|
||||||
} else {
|
} else {
|
||||||
classList += ' hover:text-white focus:text-white'
|
classList += ' hover:text-white focus:text-white'
|
||||||
}
|
}
|
||||||
|
@ -40,17 +40,17 @@ export default component$(() => {
|
||||||
const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
|
const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="bg-slate-800 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-slate-400">
|
<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200">
|
||||||
<div>
|
<div>
|
||||||
<div class="xl:p-4">
|
<div class="xl:p-4">
|
||||||
<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
|
<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
|
||||||
<WildebeestLogo size="medium" />
|
<WildebeestLogo size="medium" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<hr class="hidden xl:block border-t border-slate-700 my-3" />
|
<hr class="hidden xl:block border-t border-wildebeest-700 my-3" />
|
||||||
{links.map((link) => renderNavLink(link))}
|
{links.map((link) => renderNavLink(link))}
|
||||||
<div class="xl:hidden">
|
<div class="xl:hidden">
|
||||||
<hr class="border-t border-slate-700 my-3" />
|
<hr class="border-t border-wildebeest-700 my-3" />
|
||||||
{renderNavLink(aboutLink)}
|
{renderNavLink(aboutLink)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default component$(() => {
|
||||||
<script src="https://kit.fontawesome.com/e3d907997f.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/e3d907997f.js" crossorigin="anonymous"></script>
|
||||||
<RouterHead />
|
<RouterHead />
|
||||||
</head>
|
</head>
|
||||||
<body lang="en" class="bg-slate-900 text-white min-w-min">
|
<body lang="en" class="bg-wildebeest-900 text-white min-w-min">
|
||||||
<RouterOutlet />
|
<RouterOutlet />
|
||||||
<ServiceWorkerRegister />
|
<ServiceWorkerRegister />
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -25,15 +25,15 @@ export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StickyHeader>
|
<StickyHeader>
|
||||||
<div class="flex justify-between items-center xl:rounded-t header bg-slate-700">
|
<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
|
||||||
<Link class="text-semi no-underline text-indigo-400 bg-transparent p-4" href="/explore">
|
<Link class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" href="/explore">
|
||||||
<i class="fa fa-chevron-left mr-2" />
|
<i class="fa fa-chevron-left mr-2" />
|
||||||
<span class="hover:underline">Back</span>
|
<span class="hover:underline">Back</span>
|
||||||
</Link>
|
</Link>
|
||||||
<i class="fa fa-eye mr-4 text-slate-400" />
|
<i class="fa fa-eye mr-4 text-wildebeest-400" />
|
||||||
</div>
|
</div>
|
||||||
</StickyHeader>
|
</StickyHeader>
|
||||||
<div class="bg-slate-700 p-4">
|
<div class="bg-wildebeest-700 p-4">
|
||||||
{/* Account Card */}
|
{/* Account Card */}
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<Avatar src={status.account.avatar} />
|
<Avatar src={status.account.avatar} />
|
||||||
|
@ -42,7 +42,7 @@ export default component$(() => {
|
||||||
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
|
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
|
||||||
<a class="no-underline">{status.account.display_name}</a>
|
<a class="no-underline">{status.account.display_name}</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-1 text-slate-400">@{status.account.acct}</div>
|
<div class="p-1 text-wildebeest-400">@{status.account.acct}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
|
@ -54,7 +54,7 @@ export default component$(() => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{/* Info Tray */}
|
{/* Info Tray */}
|
||||||
<div class="text-slate-500 mt-4 text-sm">
|
<div class="text-wildebeest-500 mt-4 text-sm">
|
||||||
<a href={status.url} class="no-underline">
|
<a href={status.url} class="no-underline">
|
||||||
<span>{formatDateTime(status.created_at)}</span>
|
<span>{formatDateTime(status.created_at)}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -32,6 +32,6 @@
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
bottom: -1px;
|
bottom: -1px;
|
||||||
border-color: transparent transparent #282c37;
|
border-color: transparent transparent var(--wildebeest-color-700);
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -17,7 +17,7 @@ export default component$(() => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={`py-4 ${isActive ? 'active' : ''}`}>
|
<div class={`py-4 ${isActive ? 'active' : ''}`}>
|
||||||
<Link href={linkTarget} class="no-underline text-bold text-slate-200 py-4">
|
<Link href={linkTarget} class="no-underline text-bold text-wildebeest-200 py-4">
|
||||||
{linkText}
|
{linkText}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,12 +42,12 @@ export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<div class="explore-wrapper flex flex-col">
|
<div class="explore-wrapper flex flex-col">
|
||||||
<StickyHeader>
|
<StickyHeader>
|
||||||
<h2 class="text-reg text-md m-0 p-4 bg-slate-700 xl:rounded-t">
|
<h2 class="text-reg text-md m-0 p-4 bg-wildebeest-700 xl:rounded-t">
|
||||||
<i class="fa fa-hashtag fa-fw mr-3" />
|
<i class="fa fa-hashtag fa-fw mr-3" />
|
||||||
<span>Explore</span>
|
<span>Explore</span>
|
||||||
</h2>
|
</h2>
|
||||||
</StickyHeader>
|
</StickyHeader>
|
||||||
<div class="bg-slate-900 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
|
<div class="bg-wildebeest-800 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
|
||||||
<div class="flex-auto">
|
<div class="flex-auto">
|
||||||
<Slot />
|
<Slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,11 +21,11 @@ export default component$(() => {
|
||||||
<>
|
<>
|
||||||
{links.map((link) => (
|
{links.map((link) => (
|
||||||
<a href={link.url} class="no-underline" target="_blank">
|
<a href={link.url} class="no-underline" target="_blank">
|
||||||
<div class="p-4 flex justify-between border-b border-slate-600 hover:bg-slate-700">
|
<div class="p-4 flex justify-between border-b border-wildebeest-600 hover:bg-wildebeest-700">
|
||||||
<div class="mr-6">
|
<div class="mr-6">
|
||||||
<div class="my-2 text-sm text-slate-400">{link.provider_name}</div>
|
<div class="my-2 text-sm text-wildebeest-400">{link.provider_name}</div>
|
||||||
<div class="mb-2 text-lg text-bold leading-normal">{link.title}</div>
|
<div class="mb-2 text-lg text-bold leading-normal">{link.title}</div>
|
||||||
<div class="text-sm text-slate-400">{formatHistory(link.history)}</div>
|
<div class="text-sm text-wildebeest-400">{formatHistory(link.history)}</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="thumbnail" src={link.image} />
|
<img class="thumbnail" src={link.image} />
|
||||||
|
|
|
@ -17,7 +17,7 @@ export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
{tags.map((tagDetails) => (
|
{tags.map((tagDetails) => (
|
||||||
<div key={tagDetails.name} class="p-4 border-t border-slate-600">
|
<div key={tagDetails.name} class="p-4 border-t border-wildebeest-600">
|
||||||
<TagDetailsCard tagDetails={tagDetails} />
|
<TagDetailsCard tagDetails={tagDetails} />
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -20,7 +20,7 @@ export default component$(() => {
|
||||||
id="login-username"
|
id="login-username"
|
||||||
name="username"
|
name="username"
|
||||||
pattern="[^@]+"
|
pattern="[^@]+"
|
||||||
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-500 flex-1 w-full"
|
||||||
/>
|
/>
|
||||||
<span>@{domain}</span>
|
<span>@{domain}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -32,12 +32,12 @@ export default component$(() => {
|
||||||
<input
|
<input
|
||||||
id="login-name"
|
id="login-name"
|
||||||
name="name"
|
name="name"
|
||||||
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400"
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="mb-9 bg-indigo-600 hover:bg-indigo-500 p-3 text-white text-uppercase border-indigo-600 text-lg text-semi outline-none border rounded hover:border-indigo-500 focus:border-indigo-500"
|
class="mb-9 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-3 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
|
||||||
>
|
>
|
||||||
Register
|
Register
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -32,7 +32,7 @@ export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{showHeaderAndColumns && (
|
{showHeaderAndColumns && (
|
||||||
<header class="h-[3.9rem] z-50 sticky top-0 bg-slate-800 p-3 w-full border-b border-slate-700 xl:hidden">
|
<header class="h-[3.9rem] z-50 sticky top-0 bg-wildebeest-600 p-3 w-full border-b border-wildebeest-700 xl:hidden">
|
||||||
<a class="no-underline flex items-center w-max" href="https://mastodon.social">
|
<a class="no-underline flex items-center w-max" href="https://mastodon.social">
|
||||||
<WildebeestLogo size="small" />
|
<WildebeestLogo size="small" />
|
||||||
</a>
|
</a>
|
||||||
|
@ -47,12 +47,12 @@ export default component$(() => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div class={`w-full ${showHeaderAndColumns ? 'xl:max-w-xl' : ''}`}>
|
<div class={`w-full ${showHeaderAndColumns ? 'xl:max-w-xl' : ''}`}>
|
||||||
<div class={`bg-slate-800 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
|
<div class={`bg-wildebeest-600 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
|
||||||
<Slot />
|
<Slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{showHeaderAndColumns && (
|
{showHeaderAndColumns && (
|
||||||
<div class="w-fit md:w-72 border-l xl:border-l-0 border-slate-700 xl:mx-[10px]">
|
<div class="w-fit md:w-72 border-l xl:border-l-0 border-wildebeest-700 xl:mx-[10px]">
|
||||||
<div class="sticky top-[3.9rem] xl:top-[10px]">
|
<div class="sticky top-[3.9rem] xl:top-[10px]">
|
||||||
<RightColumn />
|
<RightColumn />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,8 +21,8 @@ export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StickyHeader>
|
<StickyHeader>
|
||||||
<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
|
<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center text-white">
|
||||||
<i class="fa fa-globe fa-fw mr-3 text-slate-100" />
|
<i class="fa fa-globe fa-fw mr-3" />
|
||||||
<span>Federated timeline</span>
|
<span>Federated timeline</span>
|
||||||
</div>
|
</div>
|
||||||
</StickyHeader>
|
</StickyHeader>
|
||||||
|
|
|
@ -20,8 +20,8 @@ export default component$(() => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<StickyHeader>
|
<StickyHeader>
|
||||||
<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
|
<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center">
|
||||||
<i class="fa fa-users fa-fw mr-3 text-slate-100" />
|
<i class="fa fa-users fa-fw mr-3" />
|
||||||
<span>Local timeline</span>
|
<span>Local timeline</span>
|
||||||
</div>
|
</div>
|
||||||
</StickyHeader>
|
</StickyHeader>
|
||||||
|
|
|
@ -20,7 +20,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
|
||||||
<input
|
<input
|
||||||
id="start-instance-title"
|
id="start-instance-title"
|
||||||
name="title"
|
name="title"
|
||||||
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
|
||||||
value={instanceConfig.title}
|
value={instanceConfig.title}
|
||||||
onInput$={(ev) => (instanceConfig.title = (ev.target as HTMLInputElement).value)}
|
onInput$={(ev) => (instanceConfig.title = (ev.target as HTMLInputElement).value)}
|
||||||
/>
|
/>
|
||||||
|
@ -36,7 +36,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
|
||||||
id="start-instance-email"
|
id="start-instance-email"
|
||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
|
||||||
value={instanceConfig.email}
|
value={instanceConfig.email}
|
||||||
onInput$={(ev) => (instanceConfig.email = (ev.target as HTMLInputElement).value)}
|
onInput$={(ev) => (instanceConfig.email = (ev.target as HTMLInputElement).value)}
|
||||||
/>
|
/>
|
||||||
|
@ -51,7 +51,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
|
||||||
<input
|
<input
|
||||||
id="start-instance-description"
|
id="start-instance-description"
|
||||||
name="description"
|
name="description"
|
||||||
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
|
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
|
||||||
value={instanceConfig.description}
|
value={instanceConfig.description}
|
||||||
onInput$={(ev) => (instanceConfig.description = (ev.target as HTMLInputElement).value)}
|
onInput$={(ev) => (instanceConfig.description = (ev.target as HTMLInputElement).value)}
|
||||||
/>
|
/>
|
||||||
|
@ -60,7 +60,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="mb-9 bg-indigo-600 hover:bg-indigo-500 p-3 text-white text-uppercase border-indigo-600 text-lg text-semi outline-none border rounded hover:border-indigo-500 focus:border-indigo-500"
|
class="mb-9 bg-wildebeest-vibrant-400 hover:bg-wildebeest-vibrant-500 p-3 text-white text-uppercase border-wildebeest-vibrant-400 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
|
||||||
preventdefault:click
|
preventdefault:click
|
||||||
onClick$={async () => {
|
onClick$={async () => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
|
|
|
@ -2,6 +2,19 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--wildebeest-color-200: #d9e1e8;
|
||||||
|
--wildebeest-color-400: #9baec8;
|
||||||
|
--wildebeest-color-500: #606984;
|
||||||
|
--wildebeest-color-700: #313543;
|
||||||
|
--wildebeest-color-600: #282c37;
|
||||||
|
--wildebeest-color-800: #1f232b;
|
||||||
|
--wildebeest-color-900: #191b22;
|
||||||
|
--wildebeest-vibrant-color-400: #8c8dff;
|
||||||
|
--wildebeest-vibrant-color-500: #6364ff;
|
||||||
|
--wildebeest-vibrant-color-600: #595aff;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: ui-sans-serif, sans-serif, ui-sans-serif;
|
font-family: ui-sans-serif, sans-serif, ui-sans-serif;
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
|
|
|
@ -2,7 +2,20 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
|
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
colors: {
|
||||||
|
'wildebeest-200': 'var(--wildebeest-color-200)',
|
||||||
|
'wildebeest-400': 'var(--wildebeest-color-400)',
|
||||||
|
'wildebeest-500': 'var(--wildebeest-color-500)',
|
||||||
|
'wildebeest-600': 'var(--wildebeest-color-600)',
|
||||||
|
'wildebeest-700': 'var(--wildebeest-color-700)',
|
||||||
|
'wildebeest-800': 'var(--wildebeest-color-800)',
|
||||||
|
'wildebeest-900': 'var(--wildebeest-color-900)',
|
||||||
|
'wildebeest-vibrant-400': 'var(--wildebeest-vibrant-color-400)',
|
||||||
|
'wildebeest-vibrant-500': 'var(--wildebeest-vibrant-color-500)',
|
||||||
|
'wildebeest-vibrant-600': 'var(--wildebeest-vibrant-color-600)',
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
};
|
};
|
||||||
|
|
Ładowanie…
Reference in New Issue