Update typography styles

Author: stormwarning

docs/src/index.md

@@ -9,7 +9,7 @@ eleventyNavigation:
 
 > OpenType features are like secret compartments in fonts. Unlock them and you'll find ways to make fonts look and behave differently in subtle and dramatic ways. Not all OpenType features are appropriate to use all of the time, but some features are critical for great typography.
 
-::figcaption[— Tim Brown, Head of Typography at Adobe]
+::figcaption[— **Tim Brown**, Head of Typography at Adobe]
 
 :::
 

docs/src/layouts/home.njk

@@ -5,17 +5,17 @@ isHome: true
 
 <div className="px-4 pt-10 pb-24 sm:px-6 xl:pr-0">
 	<p
-		class="text-sky-500 dark:text-sky-400 font-mono text-sm/6 font-semibold tracking-widest uppercase mb-3 max-2xl:mb-4 sm:text-xs/6"
+		class="text-sky-500 dark:text-sky-400 font-mono text-xs/6 font-medium tracking-widest uppercase mb-4"
 	>
 		TailwindCSS × OpenType
 	</p>
 	<h1
-		class="capsize text-gray-950 dark:text-white text-4xl tracking-tighter text-balance max-lg:font-medium sm:text-5xl lg:text-6xl xl:text-8xl mb-8"
+		class="capsize text-gray-950 dark:text-white text-4xl tracking-tighter text-balance max-lg:font-medium sm:text-5xl lg:text-6xl xl:text-8xl mb-10"
 	>
 		Tailwind CSS utility classes for advanced typographic features.
 	</h1>
 	<p
-		class="mb-6 max-w-(--breakpoint-md) text-lg/7 font-medium text-gray-600 dark:text-gray-400"
+		class="mb-6 max-w-(--breakpoint-md) text-lg/7 tracking-tight font-medium text-gray-600 dark:text-gray-400"
 	>
 		These utilities help you make the most of the font that you are using &amp;
 		make your web typography truly sing.

docs/tailwind.config.js

@@ -130,8 +130,47 @@ const config = {
 							fontWeight: 'inherit',
 							color: 'inherit',
 						},
-						'h3 code::before': { content: 'none' },
-						'h3 code::after': { content: 'none' },
+						'code::before': { content: 'none' },
+						'code::after': { content: 'none' },
+						a: {
+							textUnderlineOffset: '2px',
+						},
+						'a:not(:is(:hover, :focus))': {
+							textDecorationColor:
+								'color-mix(in srgb, currentColor, transparent 50%)',
+						},
+						'figure:has(blockquote)': {
+							margin: '4rem 0',
+							figcaption: {
+								textAlign: 'end',
+							},
+						},
+						blockquote: {
+							fontSize: 'var(--text-xl)',
+							fontStyle: 'normal',
+							fontWeight: '500',
+							lineHeight: 'calc(var(--spacing) * 9)',
+							letterSpacing: 'var(--tracking-tight)',
+							border: '0',
+							'@media (min-width: 40rem)': {
+								fontSize: 'var(--text-2xl)',
+								lineHeight: 'calc(var(--spacing) * 10)',
+							},
+						},
+						'blockquote p': { position: 'relative' },
+						'blockquote p::before': {
+							position: 'absolute',
+							top: '1rem',
+							left: '-1.5rem',
+							fontSize: '6rem',
+							color:
+								'light-dark(color-mix(in oklab, var(--color-gray-950) 10%, transparent), color-mix(in oklab, #fff 10%, transparent))',
+							content: '“',
+							pointerEvents: 'none',
+							'@media (min-width: 64rem)': {
+								fontSize: '8rem',
+							},
+						},
 						table: {
 							fontSize: theme('fontSize.sm')[0],
 							lineHeight: theme('fontSize.sm')[1].lineHeight,