feat: easy customization of theme color

This commit is contained in:
Timothy Lin
2021-06-19 17:40:01 +08:00
parent f3a21646ab
commit 2c0d11d414
7 changed files with 25 additions and 24 deletions

View File

@ -3,13 +3,13 @@ import Link from '@/components/Link'
const Card = ({ title, description, imgSrc, href }) => (
<div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}>
<div className="h-full border-2 border-gray-200 border-opacity-60 dark:border-gray-700 rounded-md overflow-hidden">
<div className="h-full overflow-hidden border-2 border-gray-200 rounded-md border-opacity-60 dark:border-gray-700">
{href ? (
<Link href={href} aria-label={`Link to ${title}`}>
<Image
alt={title}
src={imgSrc}
className="lg:h-48 md:h-36 object-cover object-center"
className="object-cover object-center lg:h-48 md:h-36"
width={544}
height={306}
/>
@ -18,13 +18,13 @@ const Card = ({ title, description, imgSrc, href }) => (
<Image
alt={title}
src={imgSrc}
className="lg:h-48 md:h-36 object-cover object-center"
className="object-cover object-center lg:h-48 md:h-36"
width={544}
height={306}
/>
)}
<div className="p-6">
<h2 className="text-2xl font-bold leading-8 tracking-tight mb-3">
<h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
{href ? (
<Link href={href} aria-label={`Link to ${title}`}>
{title}
@ -33,11 +33,11 @@ const Card = ({ title, description, imgSrc, href }) => (
title
)}
</h2>
<p className="prose text-gray-500 max-w-none dark:text-gray-400 mb-3">{description}</p>
<p className="mb-3 prose text-gray-500 max-w-none dark:text-gray-400">{description}</p>
{href && (
<Link
href={href}
className="text-base font-medium leading-6 text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`Link to ${title}`}
>
Learn more &rarr;

View File

@ -4,7 +4,7 @@ import kebabCase from '@/lib/utils/kebabCase'
const Tag = ({ text }) => {
return (
<Link href={`/tags/${kebabCase(text)}`}>
<a className="mr-3 text-sm font-medium text-blue-500 uppercase hover:text-blue-600 dark:hover:text-blue-400">
<a className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
{text.split(' ').join('-')}
</a>
</Link>