refactor tailwind typography to v3 and update styling
This commit is contained in:
Timothy Lin
@@ -73,7 +73,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
|
||||
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />
|
||||
<body className="bg-white text-black antialiased dark:bg-gray-900 dark:text-white">
|
||||
<body className="bg-white text-black antialiased dark:bg-gray-950 dark:text-white">
|
||||
<ThemeProviders>
|
||||
<Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
|
||||
<SectionContainer>
|
||||
|
||||
@@ -40,7 +40,9 @@ export default function AuthorLayout({ children, content }: Props) {
|
||||
<SocialIcon kind="twitter" href={twitter} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="prose max-w-none pb-8 pt-8 dark:prose-dark xl:col-span-2">{children}</div>
|
||||
<div className="prose max-w-none pb-8 pt-8 dark:prose-invert xl:col-span-2">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -92,7 +92,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
|
||||
</dd>
|
||||
</dl>
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
|
||||
<div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
|
||||
<div className="prose max-w-none pb-8 pt-10 dark:prose-invert">{children}</div>
|
||||
<div className="pb-6 pt-6 text-sm text-gray-700 dark:text-gray-300">
|
||||
<Link href={discussUrl(path)} rel="nofollow">
|
||||
Discuss on Twitter
|
||||
@@ -125,7 +125,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
|
||||
)}
|
||||
{(next || prev) && (
|
||||
<div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
|
||||
{prev && (
|
||||
{prev && prev.path && (
|
||||
<div>
|
||||
<h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Previous Article
|
||||
@@ -135,7 +135,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{next && (
|
||||
{next && next.path && (
|
||||
<div>
|
||||
<h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Next Article
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
|
||||
</header>
|
||||
<div className="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
|
||||
<div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
|
||||
<div className="prose max-w-none pb-8 pt-10 dark:prose-invert">{children}</div>
|
||||
</div>
|
||||
{siteMetadata.comments && (
|
||||
<div className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300" id="comment">
|
||||
@@ -50,7 +50,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
|
||||
)}
|
||||
<footer>
|
||||
<div className="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base">
|
||||
{prev && (
|
||||
{prev && prev.path && (
|
||||
<div className="pt-4 xl:pt-8">
|
||||
<Link
|
||||
href={`/${prev.path}`}
|
||||
@@ -61,7 +61,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{next && (
|
||||
{next && next.path && (
|
||||
<div className="pt-4 xl:pt-8">
|
||||
<Link
|
||||
href={`/${next.path}`}
|
||||
|
||||
@@ -15,9 +15,6 @@ module.exports = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
spacing: {
|
||||
'9/16': '56.25%',
|
||||
},
|
||||
lineHeight: {
|
||||
11: '2.75rem',
|
||||
12: '3rem',
|
||||
@@ -28,137 +25,43 @@ module.exports = {
|
||||
sans: ['Inter', ...fontFamily.sans],
|
||||
},
|
||||
colors: {
|
||||
primary: colors.teal,
|
||||
gray: colors.neutral,
|
||||
primary: colors.pink,
|
||||
gray: colors.gray,
|
||||
},
|
||||
typography: (theme) => ({
|
||||
typography: ({ theme }) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
color: theme('colors.gray.700'),
|
||||
a: {
|
||||
color: theme('colors.primary.500'),
|
||||
'&:hover': {
|
||||
color: `${theme('colors.primary.600')} !important`,
|
||||
color: `${theme('colors.primary.600')}`,
|
||||
},
|
||||
code: { color: theme('colors.primary.400') },
|
||||
},
|
||||
h1: {
|
||||
'h1,h2': {
|
||||
fontWeight: '700',
|
||||
letterSpacing: theme('letterSpacing.tight'),
|
||||
color: theme('colors.gray.900'),
|
||||
},
|
||||
h2: {
|
||||
fontWeight: '700',
|
||||
letterSpacing: theme('letterSpacing.tight'),
|
||||
color: theme('colors.gray.900'),
|
||||
},
|
||||
h3: {
|
||||
fontWeight: '600',
|
||||
color: theme('colors.gray.900'),
|
||||
},
|
||||
'h4,h5,h6': {
|
||||
color: theme('colors.gray.900'),
|
||||
},
|
||||
pre: {
|
||||
backgroundColor: theme('colors.gray.800'),
|
||||
},
|
||||
code: {
|
||||
color: theme('colors.pink.500'),
|
||||
backgroundColor: theme('colors.gray.100'),
|
||||
paddingLeft: '4px',
|
||||
paddingRight: '4px',
|
||||
paddingTop: '2px',
|
||||
paddingBottom: '2px',
|
||||
borderRadius: '0.25rem',
|
||||
},
|
||||
'code::before': {
|
||||
content: 'none',
|
||||
},
|
||||
'code::after': {
|
||||
content: 'none',
|
||||
},
|
||||
details: {
|
||||
backgroundColor: theme('colors.gray.100'),
|
||||
paddingLeft: '4px',
|
||||
paddingRight: '4px',
|
||||
paddingTop: '2px',
|
||||
paddingBottom: '2px',
|
||||
borderRadius: '0.25rem',
|
||||
},
|
||||
hr: { borderColor: theme('colors.gray.200') },
|
||||
'ol li::marker': {
|
||||
fontWeight: '600',
|
||||
color: theme('colors.gray.500'),
|
||||
},
|
||||
'ul li::marker': {
|
||||
backgroundColor: theme('colors.gray.500'),
|
||||
},
|
||||
strong: { color: theme('colors.gray.600') },
|
||||
blockquote: {
|
||||
color: theme('colors.gray.900'),
|
||||
borderLeftColor: theme('colors.gray.200'),
|
||||
color: theme('colors.indigo.500'),
|
||||
},
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
invert: {
|
||||
css: {
|
||||
color: theme('colors.gray.300'),
|
||||
a: {
|
||||
color: theme('colors.primary.500'),
|
||||
'&:hover': {
|
||||
color: `${theme('colors.primary.400')} !important`,
|
||||
color: `${theme('colors.primary.400')}`,
|
||||
},
|
||||
code: { color: theme('colors.primary.400') },
|
||||
},
|
||||
h1: {
|
||||
fontWeight: '700',
|
||||
letterSpacing: theme('letterSpacing.tight'),
|
||||
'h1,h2,h3,h4,h5,h6': {
|
||||
color: theme('colors.gray.100'),
|
||||
},
|
||||
h2: {
|
||||
fontWeight: '700',
|
||||
letterSpacing: theme('letterSpacing.tight'),
|
||||
color: theme('colors.gray.100'),
|
||||
},
|
||||
h3: {
|
||||
fontWeight: '600',
|
||||
color: theme('colors.gray.100'),
|
||||
},
|
||||
'h4,h5,h6': {
|
||||
color: theme('colors.gray.100'),
|
||||
},
|
||||
pre: {
|
||||
backgroundColor: theme('colors.gray.800'),
|
||||
},
|
||||
code: {
|
||||
backgroundColor: theme('colors.gray.800'),
|
||||
},
|
||||
details: {
|
||||
backgroundColor: theme('colors.gray.800'),
|
||||
},
|
||||
hr: { borderColor: theme('colors.gray.700') },
|
||||
'ol li::marker': {
|
||||
fontWeight: '600',
|
||||
color: theme('colors.gray.400'),
|
||||
},
|
||||
'ul li::marker': {
|
||||
backgroundColor: theme('colors.gray.400'),
|
||||
},
|
||||
strong: { color: theme('colors.gray.100') },
|
||||
thead: {
|
||||
th: {
|
||||
color: theme('colors.gray.100'),
|
||||
},
|
||||
},
|
||||
tbody: {
|
||||
tr: {
|
||||
borderBottomColor: theme('colors.gray.700'),
|
||||
},
|
||||
},
|
||||
blockquote: {
|
||||
color: theme('colors.gray.100'),
|
||||
borderLeftColor: theme('colors.gray.700'),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user