feat: easy customization of theme color
This commit is contained in:
Timothy Lin
parent
f3a21646ab
commit
2c0d11d414
@ -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 →
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -30,7 +30,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
|
||||
type="text"
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
placeholder="Search articles"
|
||||
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-gray-100"
|
||||
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
<svg
|
||||
className="absolute w-5 h-5 text-gray-400 right-3 top-3 dark:text-gray-300"
|
||||
|
||||
@ -59,7 +59,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
||||
{author.twitter && (
|
||||
<Link
|
||||
href={author.twitter}
|
||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
>
|
||||
{author.twitter.replace('https://twitter.com/', '@')}
|
||||
</Link>
|
||||
@ -102,7 +102,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
||||
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
|
||||
Previous Article
|
||||
</h2>
|
||||
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
|
||||
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,7 +112,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
||||
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
|
||||
Next Article
|
||||
</h2>
|
||||
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
|
||||
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
|
||||
</div>
|
||||
</div>
|
||||
@ -123,7 +123,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
||||
<div className="pt-4 xl:pt-8">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
>
|
||||
← Back to the blog
|
||||
</Link>
|
||||
|
||||
@ -44,7 +44,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
||||
<div className="pt-4 xl:pt-8">
|
||||
<Link
|
||||
href={`/blog/${prev.slug}`}
|
||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
>
|
||||
← {prev.title}
|
||||
</Link>
|
||||
@ -54,7 +54,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
||||
<div className="pt-4 xl:pt-8">
|
||||
<Link
|
||||
href={`/blog/${next.slug}`}
|
||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
>
|
||||
{next.title} →
|
||||
</Link>
|
||||
|
||||
@ -70,7 +70,7 @@ export default function Home({ posts }) {
|
||||
<div className="text-base font-medium leading-6">
|
||||
<Link
|
||||
href={`/blog/${slug}`}
|
||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
aria-label={`Read "${title}"`}
|
||||
>
|
||||
Read more →
|
||||
@ -88,7 +88,7 @@ export default function Home({ posts }) {
|
||||
<div className="flex justify-end text-base font-medium leading-6">
|
||||
<Link
|
||||
href="/blog"
|
||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
aria-label="all posts"
|
||||
>
|
||||
All Posts →
|
||||
|
||||
@ -20,13 +20,14 @@ module.exports = {
|
||||
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
blue: colors.lightBlue,
|
||||
primary: colors.cyan,
|
||||
gray: colors.trueGray,
|
||||
code: {
|
||||
green: '#b5f4a5',
|
||||
yellow: '#ffe484',
|
||||
purple: '#d9a9ff',
|
||||
red: '#ff8383',
|
||||
blue: '#93ddfd',
|
||||
primary: '#93ddfd',
|
||||
white: '#fff',
|
||||
},
|
||||
},
|
||||
@ -35,11 +36,11 @@ module.exports = {
|
||||
css: {
|
||||
color: theme('colors.gray.700'),
|
||||
a: {
|
||||
color: theme('colors.blue.500'),
|
||||
color: theme('colors.primary.500'),
|
||||
'&:hover': {
|
||||
color: theme('colors.blue.600'),
|
||||
color: theme('colors.primary.600'),
|
||||
},
|
||||
code: { color: theme('colors.blue.400') },
|
||||
code: { color: theme('colors.primary.400') },
|
||||
},
|
||||
h1: {
|
||||
fontWeight: '700',
|
||||
@ -92,11 +93,11 @@ module.exports = {
|
||||
css: {
|
||||
color: theme('colors.gray.300'),
|
||||
a: {
|
||||
color: theme('colors.blue.500'),
|
||||
color: theme('colors.primary.500'),
|
||||
'&:hover': {
|
||||
color: theme('colors.blue.400'),
|
||||
color: theme('colors.primary.400'),
|
||||
},
|
||||
code: { color: theme('colors.blue.400') },
|
||||
code: { color: theme('colors.primary.400') },
|
||||
},
|
||||
h1: {
|
||||
fontWeight: '700',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user